blog 中会记录一些自定义控件的实现过程，完整的使用和其他的自定义控件可以参考，常用控件库WidgetProductor整理
设计样式
这个控件的用途是替换项目中使用的界面的头部布局，减少重复代码的书写，提高效率。
为了通用，我们设计的样式如下，分别为：
左侧ImageView、左侧TextView、标题TextView、标题容器FrameLayout、右侧TextView、右侧ImageView
headView
实现
布局文件 kingoit_head_view.xml
设置属性 res\values\attrs.xml
在res\values\attrs.xml中设置使用该布局时可用的属性值
控件实现 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的使用如下：
- 其他代码
第二个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的效果是用到了另一个自定义控件，在我们的控件库中会有。