blog 中会记录一些自定义控件的实现过程，完整的使用和其他的自定义控件可以参考，常用控件库WidgetProductor整理
设计样式
这个控件的用途是替换项目中使用的界面的头部布局，减少重复代码的书写，提高效率。
为了通用，我们设计的样式如下，分别为：
左侧ImageView、左侧TextView、标题TextView、标题容器FrameLayout、右侧TextView、右侧ImageView
headView
实现
布局文件 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">
<android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<android.support.constraint.Guideline
android:id="@+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
<!--title-->
<TextView
android:id="@+id/kingo_head_title_tv"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:clickable="true"
android:ellipsize="end"
android:gravity="center"
android:lines="1"
android:paddingLeft="@dimen/padding2"
android:paddingRight="@dimen/padding2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/guideline2"
app:layout_constraintRight_toLeftOf="@+id/guideline8"
app:layout_constraintTop_toTopOf="parent" />
<!--left_img-->
<ImageView
android:id="@+id/kingo_head_left_img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:clickable="true"
android:paddingLeft="8dp"
android:paddingStart="8dp"
android:scaleType="centerInside"
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:clickable="true"
android:ellipsize="end"
android:gravity="center"
android:lines="1"
android:paddingLeft="8dp"
android:paddingStart="8dp"
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" />
<!--head_container-->
<FrameLayout
android:id="@+id/kingo_head_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:clickable="true"
android:paddingLeft="5dp"
android:paddingRight="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/guideline2"
app:layout_constraintRight_toLeftOf="@+id/guideline8"
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:clickable="true"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="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_toLeftOf="@+id/kingo_head_right_img"
android:layout_toStartOf="@+id/kingo_head_right_img"
android:clickable="true"
android:ellipsize="end"
android:gravity="center"
android:paddingEnd="8dp"
android:paddingRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/kingo_head_right_img"
app:layout_constraintTop_toTopOf="parent"
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="headLeftTextSize" format="dimension" />
<attr name="headLeftTextBackground" format="reference|integer" />
<!--标题TextView-->
<attr name="headTitleText" format="string" />
<attr name="headTitleTextColor" format="color" />
<attr name="headTitleTextSize" format="dimension" />
<attr name="headTitleTextVisible" format="boolean" />
<!--右侧TextView-->
<attr name="headRightText" format="string" />
<attr name="headRightTextColor" format="color" />
<attr name="headRightTextSize" format="dimension" />
<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 implements View.OnClickListener {
/**
* 头部控件，以此为：左侧ImageView、左侧TextView、标题TextView、标题容器FrameLayout、右侧TextView、右侧ImageView
*/
private ImageView headLeftImg;
private TextView headLeftTv;
private TextView headTitleTv;
private FrameLayout headContainer;
private TextView headRightTv;
private ImageView headRightImg;
private boolean mLeftViewClickable = true;
private OnClickListener listener;
public interface OnClickListener {
/**
* 左侧两个控件，点击事件默认一体处理，也可以把事件交给外部区分处理
*
* @param view
*/
void leftView(View view);
/**
* 右侧两个控件，点击事件默认一体处理，也可以把事件交给外部区分处理
*
* @param view
*/
void rightView(View view);
/**
* 头部两个控件，点击事件默认一体处理，也可以把事件交给外部区分处理
*
* @param view
*/
void titleView(View view);
}
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);
headLeftImg.setOnClickListener(this);
headLeftTv.setOnClickListener(this);
headTitleTv.setOnClickListener(this);
headContainer.setOnClickListener(this);
headRightTv.setOnClickListener(this);
headRightImg.setOnClickListener(this);
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, 0));
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.setTextSize(TypedValue.COMPLEX_UNIT_PX, typedArray.getDimension(R.styleable.KingoitHeadView_headLeftTextSize, 32));
headLeftTv.setBackgroundResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headLeftTextBackground, R.color.transparent));
headTitleTv.setText(typedArray.getString(R.styleable.KingoitHeadView_headTitleText));
headTitleTv.setTextColor(typedArray.getColor(R.styleable.KingoitHeadView_headTitleTextColor, Color.BLACK));
headTitleTv.setTextSize(TypedValue.COMPLEX_UNIT_PX, typedArray.getDimension(R.styleable.KingoitHeadView_headTitleTextSize, 38));
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.setTextSize(TypedValue.COMPLEX_UNIT_PX, typedArray.getDimension(R.styleable.KingoitHeadView_headRightTextSize, 32));
headRightTv.setBackgroundResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headRightTextBackground, R.color.transparent));
headRightImg.setImageResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headRightImgSrc, 0));
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;
}
/**
* 控制右侧控件展示，地图和列表切换
*
* @param toggledToMap
*/
public KingoitHeadView toggledRightView(boolean toggledToMap) {
Drawable img;
if (toggledToMap) {
headRightTv.setText(getResources().getString(com.kingoit.onemap.device.R.string.list));
img = getResources().getDrawable(com.kingoit.onemap.device.R.drawable.icon_top_list);
} else {
headRightTv.setText(getResources().getString(com.kingoit.onemap.device.R.string.map));
img = getResources().getDrawable(com.kingoit.onemap.device.R.drawable.icon_top_map);
}
headRightImg.setImageDrawable(img);
return this;
}
/**
* 设置监听事件
*
* @param listener
* @return
*/
public KingoitHeadView setListener(OnClickListener listener) {
this.listener = listener;
return this;
}
/**
* 控制右侧控件是否展示
*
* @param isShow
* @return
*/
public KingoitHeadView showRightView(boolean isShow) {
headRightImg.setVisibility(isShow ? View.VISIBLE : View.INVISIBLE);
headRightTv.setVisibility(isShow ? View.VISIBLE : View.INVISIBLE);
return this;
}
/**
* 控制左侧控件是否展示
*
* @param isShow
* @return
*/
public KingoitHeadView showLeftView(boolean isShow) {
headLeftImg.setVisibility(isShow ? View.VISIBLE : View.INVISIBLE);
headLeftTv.setVisibility(isShow ? View.VISIBLE : View.INVISIBLE);
return this;
}
/**
* 设置左侧TV控件展示内容
*
* @param leftText
* @return
*/
public KingoitHeadView setLeftText(@NonNull String leftText, boolean canClick) {
setLeftView(leftText, null);
this.mLeftViewClickable = canClick;
return this;
}
/**
* 设置左侧TV 和 IV 控件展示内容
*
* @param leftText
* @return
*/
public KingoitHeadView setLeftView(@NonNull String leftText, Drawable leftImg) {
this.mLeftViewClickable = true;
headLeftTv.setText(TextUtils.isEmpty(leftText) ? "" : leftText);
if (leftImg == null) {
headLeftImg.setImageResource(0);
} else {
headLeftImg.setImageDrawable(leftImg);
}
return this;
}
@Override
public void onClick(View v) {
if (CommonUtils.isFastClick() || listener == null) {
return;
}
switch (v.getId()) {
case R.id.kingo_head_left_img:
if (mLeftViewClickable) {
listener.leftView(headLeftImg);
}
break;
case R.id.kingo_head_left_tv:
if (mLeftViewClickable) {
listener.leftView(headLeftTv);
}
break;
case R.id.kingo_head_right_img:
listener.rightView(headRightImg);
break;
case R.id.kingo_head_right_tv:
listener.rightView(headRightTv);
break;
case R.id.kingo_head_title_tv:
listener.titleView(headTitleTv);
break;
case R.id.kingo_head_container:
listener.titleView(headContainer);
break;
}
}
}
控件使用
公用头使用
-
布局文件
上图展示的两个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的效果是用到了另一个自定义控件，在我们的控件库中会有。
