自定义标签页
一、需求分析：
项目有一个添加标签的需求，而且产品要求，根据接口返回的json数据中的颜色设置标签页的背景颜色，乍一看，没有头绪。要是用普通的select难以实现，那就自定义View吧。先给大家看下效果图：图1-1（所有条目可选状态）图1-2（达到最大值，其余条目不可选状态）
1-1.jpg
1-2.jpg
二、代码实现
我的实现思路是自定义View就是写一个View（UserColorTagView）
继承自AppCompatTextView 实现Checkable接口（可选）实现View.OnClickListener（可以被点击）
下面给出全部代码：
public class UserColorTagView extends AppCompatTextView implements Checkable, View.OnClickListener {
private static final int DEFAULT_TAG_COLOR = Color.BLACK;
private static final int DEFAULT_TAG_DISABLE_COLOR = Color.parseColor("#979797");
private int mTagColor;
private int mDisableColor;
private Paint mPaint;
private float mStrokeWidth;
private RectF mRect;
private RectF mStrokeRect;
private boolean mChecked;
public UserColorTagView(Context context) {
this(context, null);
}
public UserColorTagView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public UserColorTagView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ColorTagView);
final boolean clickable = a.getBoolean(R.styleable.ColorTagView_tag_clickable, true);
mTagColor = a.getColor(R.styleable.ColorTagView_tag_color, DEFAULT_TAG_COLOR);
mDisableColor = a.getColor(R.styleable.ColorTagView_tag_disable_color, DEFAULT_TAG_DISABLE_COLOR);
mStrokeWidth = a.getDimension(R.styleable.ColorTagView_tag_stroke_width, getResources().getDisplayMetrics().density);
a.recycle();
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStrokeWidth(mStrokeWidth);
super.setOnClickListener(this);
setClickable(clickable);
changeTextColor();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mRect = new RectF(0, 0, w, h);
final float stroke = mStrokeWidth / 2;
mStrokeRect = new RectF(0 + stroke, 0 + stroke, w - stroke, h - stroke);
}
@Override
protected void onDraw(Canvas canvas) {
final float radius = (mRect.bottom - mRect.top) / 2;
if (isEnabled()) {
if (mChecked) {
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mTagColor);
canvas.drawRoundRect(mRect, radius, radius, mPaint);
} else {
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.WHITE);
canvas.drawRoundRect(mRect, radius, radius, mPaint);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(mTagColor);
canvas.drawRoundRect(mStrokeRect, radius, radius, mPaint);
}
} else {
if (mChecked) {
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mTagColor);
canvas.drawRoundRect(mRect, radius, radius, mPaint);
}else{
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.WHITE);
canvas.drawRoundRect(mRect, radius, radius, mPaint);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(mDisableColor);
canvas.drawRoundRect(mStrokeRect, radius, radius, mPaint);
}
}
super.onDraw(canvas);
}
@Override
public void setEnabled(boolean enabled) {
super.setEnabled(enabled);
changeTextColor();
}
@Override
public void setChecked(boolean checked) {
mChecked = checked;
changeTextColor();
postInvalidate();
}
private void changeTextColor() {
if (isEnabled()) {
if (isChecked()) {
setTextColor(Color.WHITE);
} else {
setTextColor(mTagColor);
}
} else {
if (isChecked()) {
setTextColor(Color.WHITE);
}else{
setTextColor(mDisableColor);
}
}
}
@Override
public boolean isChecked() {
return mChecked;
}
@Override
public void toggle() {
setChecked(!mChecked);
postInvalidate();
}
@Override
public void onClick(View v) {
toggle();
if (mListener != null) {
mListener.onClick(v);
}
}
public void setTagColor(@ColorInt int color) {
mTagColor = color;
changeTextColor();
postInvalidate();
}
public void setTagDisableColor(@ColorInt int color) {
mDisableColor = color;
changeTextColor();
postInvalidate();
}
private View.OnClickListener mListener;
@Override
public void setOnClickListener(@Nullable View.OnClickListener l) {
mListener = l;
}
}
下面是UserColorTagView的自定义属性
写在res --> values --> attrs.xml 中
里面主要用到的就是这个自定义View
使用方法
/**
* 获取标签tagview
*
* @return
*/
private UserColorTagView getUserColorTagView() {
UserColorTagView userColorTagView = new UserColorTagView(mContext);
userColorTagView.setGravity(Gravity.CENTER);
userColorTagView.setTextColor(getResources().getColor(R.color.white));
userColorTagView.setTextSize(14);
userColorTagView.setEnabled(true);
userColorTagView.setChecked(false);
int leftRightPadding = ScreenUtils.dip2px(15, mContext);
int topBottomPadding = ScreenUtils.dip2px(5, mContext);
userColorTagView.setPadding(leftRightPadding, topBottomPadding, leftRightPadding, topBottomPadding);
return userColorTagView;
}
为了能够给userColorTagView自适应布局换行我在他的外面包了一层
FlowLayout代码布局如下：
其实FlowLayout就是可以保证UserColorTagView能够自动换行。
FlowLayout可能有的小伙伴不陌生了。如果不懂的可以百度一下，
或者去github搜索FlowLayout
最后为了大家方便看代码我把整个Demo的github地址给大家。
点我下载Demo
希望对你有所帮助！