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的效果是用到了另一個自定義控件，在我們的控件庫中會有。