blog 中会记录一些自定义控件的实现过程，完整的使用和其他的自定义控件可以参考，常用控件库WidgetProductor整理
设计样式
这个控件的用途是替换项目中使用的界面的头部布局，减少重复代码的书写，提高效率。
为了通用，我们设计的样式如下，分别为：
左侧ImageView、左侧TextView、标题TextView、标题容器FrameLayout、右侧TextView、右侧ImageView
实现
布局文件 kingoit_head_view.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/kingo_head_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical">
<!--left_img-->
<ImageView
android:id="@+id/kingo_head_left_img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"/>
<!--left_tv-->
<TextView
android:id="@+id/kingo_head_left_tv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/kingo_head_left_img"
app:layout_constraintStart_toEndOf="@+id/kingo_head_left_img"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"/>
<!--title-->
<TextView
android:id="@+id/kingo_head_title_tv"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:textSize="16sp"
android:clickable="true"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/kingo_head_left_tv"
app:layout_constraintRight_toLeftOf="@+id/kingo_head_right_tv"
app:layout_constraintTop_toTopOf="parent"/>
<!--head_container-->
<FrameLayout
android:id="@+id/kingo_head_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/kingo_head_left_tv"
app:layout_constraintRight_toLeftOf="@+id/kingo_head_right_tv"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteY="0dp"/>
<!--right_img-->
<ImageView
android:id="@+id/kingo_head_right_img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:scaleType="centerInside"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="0dp"/>
<!--right_tv-->
<TextView
android:id="@+id/kingo_head_right_tv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_toLeftOf="@+id/kingo_head_right_img"
android:layout_toStartOf="@+id/kingo_head_right_img"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="@+id/kingo_head_right_img"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="0dp"/>
</android.support.constraint.ConstraintLayout>设置属性 res\values\attrs.xml
在res\values\attrs.xml中设置使用该布局时可用的属性值
<!--KingoitHeadView ，公用头部控件-->
<declare-styleable name="KingoitHeadView">
<!--左侧ImageView-->
<attr name="headLeftImgSrc" format="reference|integer"/>
<attr name="headLeftImgVisible" format="boolean" />
<attr name="headLeftImgColor" format="color"/>
<!--左侧TextView-->
<attr name="headLeftText" format="string" />
<attr name="headLeftTextColor" format="color" />
<attr name="headLeftTextBackground" format="reference|integer" />
<!--标题TextView-->
<attr name="headTitleText" format="string" />
<attr name="headTitleTextColor" format="color" />
<attr name="headTitleTextVisible" format="boolean" />
<!--右侧TextView-->
<attr name="headRightText" format="string" />
<attr name="headRightTextColor" format="color" />
<attr name="headRightTextBackground" format="reference|integer" />
<!--右侧ImageView-->
<attr name="headRightImgSrc" format="reference|integer"/>
<attr name="headRightImgVisible" format="boolean" />
<attr name="headRightImgColor" format="color"/>
</declare-styleable>控件实现 KingoitHeadView
/**
* 常用头部导航控件
*
* @author zuo
* @date 2018/7/19 16:56
*/
public class KingoitHeadView extends FrameLayout {
/**
* 头部控件，以此为：左侧ImageView、左侧TextView、标题TextView、标题容器FrameLayout、右侧TextView、右侧ImageView
*/
private ImageView headLeftImg;
private TextView headLeftTv;
private TextView headTitleTv;
private FrameLayout headContainer;
private TextView headRightTv;
private ImageView headRightImg;
public KingoitHeadView(@NonNull Context context) {
super(context);
}
public KingoitHeadView(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
View view = View.inflate(context, R.layout.kingoit_head_view, this);
headLeftImg = view.findViewById(R.id.kingo_head_left_img);
headLeftTv = view.findViewById(R.id.kingo_head_left_tv);
headTitleTv = view.findViewById(R.id.kingo_head_title_tv);
headContainer = view.findViewById(R.id.kingo_head_container);
headRightTv = view.findViewById(R.id.kingo_head_right_tv);
headRightImg = view.findViewById(R.id.kingo_head_right_img);
initAttributes(context, attrs);
}
/**
* 初始化，KingoitHeadView 的自定义属性 ，并和相关控件关联上
*/
private void initAttributes(@NonNull Context context, @Nullable AttributeSet attrs) {
@SuppressLint("Recycle")
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.KingoitHeadView);
headLeftImg.setImageResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headLeftImgSrc, R.drawable.arrow_left));
headLeftImg.setVisibility(typedArray.getBoolean(R.styleable.KingoitHeadView_headLeftImgVisible, true) ? View.VISIBLE : View.GONE);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
headLeftImg.setImageTintList(ColorStateList.valueOf(typedArray.getColor(R.styleable.KingoitHeadView_headLeftImgColor, Color.LTGRAY)));
headRightImg.setImageTintList(ColorStateList.valueOf(typedArray.getColor(R.styleable.KingoitHeadView_headRightImgColor, Color.LTGRAY)));
}
headLeftTv.setText(typedArray.getString(R.styleable.KingoitHeadView_headLeftText));
headLeftTv.setTextColor(typedArray.getColor(R.styleable.KingoitHeadView_headLeftTextColor, Color.BLACK));
headLeftTv.setBackgroundResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headLeftTextBackground, R.color.colorWhite));
headTitleTv.setText(typedArray.getString(R.styleable.KingoitHeadView_headTitleText));
headTitleTv.setTextColor(typedArray.getColor(R.styleable.KingoitHeadView_headTitleTextColor, Color.BLACK));
headTitleTv.setVisibility(typedArray.getBoolean(R.styleable.KingoitHeadView_headTitleTextVisible, true) ? View.VISIBLE : View.GONE);
headRightTv.setText(typedArray.getString(R.styleable.KingoitHeadView_headRightText));
headRightTv.setTextColor(typedArray.getColor(R.styleable.KingoitHeadView_headRightTextColor, Color.BLACK));
headRightTv.setBackgroundResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headRightTextBackground, R.color.colorWhite));
headRightImg.setImageResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headRightImgSrc, R.drawable.delete));
headRightImg.setVisibility(typedArray.getBoolean(R.styleable.KingoitHeadView_headRightImgVisible, true) ? View.VISIBLE : View.GONE);
}
//获取布局的相关控件，便于在代码中动态设置相关属性
public ImageView getHeadLeftImg() {
return headLeftImg;
}
public TextView getHeadLeftTv() {
return headLeftTv;
}
public TextView getHeadTitleTv() {
return headTitleTv;
}
public FrameLayout getHeadContainer() {
return headContainer;
}
public TextView getHeadRightTv() {
return headRightTv;
}
public ImageView getHeadRightImg() {
return headRightImg;
}
}控件使用
- 布局文件
上图展示的两个HeadView的使用如下：
<com.kingoit.navigation.KingoitHeadView
android:id="@+id/head_view_0"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginBottom="10dp"
android:background="@color/colorWhite"
app:headLeftImgSrc="@drawable/arrow_left"
app:headRightImgVisible="false"
app:headRightText="菜单"
app:headRightTextColor="@color/com_app_theme_color"
app:headTitleText="第一个头"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.kingoit.navigation.KingoitHeadView
android:id="@+id/head_view_1"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginBottom="10dp"
android:background="@color/colorWhite"
app:headLeftImgColor="@color/com_app_theme_color"
app:headLeftImgSrc="@drawable/arrow_left"
app:headRightImgColor="@color/com_app_theme_color"
app:headRightImgSrc="@drawable/delete"
app:headRightText="说明"
app:headRightTextColor="@color/com_app_theme_color"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>- 其他代码
第二个HeadView 的使用有些不一样，我们在HeadView中引入了另外一个TextView的布局，并动态设置了一个样式。
//动态设置shape
GradientDrawable drawable = new GradientDrawable();
drawable.setCornerRadius(2);
drawable.setStroke(4, Color.parseColor("#3F51B5"));
drawable.setColor(Color.parseColor("#FFFFFF"));
headTitleTv.setBackground(drawable);至于Spinner的效果是用到了另一个自定义控件，在我们的控件库中会有。