前言
多選和單選是日常開發(fā)經(jīng)常用的控件，android系統(tǒng)原生的控件樣式（RadioButton 兆衅、CheckBox）不太好看，很多時候我們需要根據(jù)美工的設(shè)計自己實(shí)現(xiàn)CheckView磺陡。
我們需要自己準(zhǔn)備兩張圖片沼本。一張為checked狀態(tài)，一張為unchecked狀態(tài)薪捍。如果產(chǎn)品哥哥說你這個顏色不好看笼痹，我們又需要重新修改±掖基于以上原因与倡，我們實(shí)現(xiàn)了自定義的CheckView，可以任意修改 顏色昆稿、大小纺座，形狀（圓心和方形），效果如下溉潭。
PIC.png
源碼展示
自定義CheckView:
package com.xcheng.view.widget;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.annotation.IntRange;
import android.support.v4.content.res.ResourcesCompat;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Checkable;
import com.xcheng.view.R;
import com.xcheng.view.util.LocalDisplay;
import static com.xcheng.view.widget.ProgressView.TYPE_CIRCLE;
public class CheckView extends View implements Checkable {
//圓框的顏色
private int mStrokeWidth; // dp
//圓框的尺寸
private int mSize; // dp
//圓框的顏色
private int mStrokeColor;
//圓框內(nèi)填充的顏色
private int mbgColor;
//選中的顏色
private int mCheckedColor;
private boolean mChecked;
private Paint mStrokePaint;
private Paint mBackgroundPaint;
private Drawable mCheckDrawable;
private Rect mCheckRect;
private Rect mBgRect;
private Rect mStrokeRect;
private int mType;
public CheckView(Context context) {
this(context, null);
}
public CheckView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CheckView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(Context context, AttributeSet attrs, int defStyleAttr) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CheckView, defStyleAttr, 0);
mSize = ta.getDimensionPixelSize(R.styleable.CheckView_ev_size, LocalDisplay.dp2px(18));
mType = ta.getInt(R.styleable.CheckView_ev_type, TYPE_CIRCLE);
mStrokeWidth = ta.getDimensionPixelSize(R.styleable.CheckView_ev_strokeWidth, LocalDisplay.dp2px(2));
mStrokeColor = ta.getColor(R.styleable.CheckView_ev_strokeColor, Color.parseColor("#c2c9cc"));
mbgColor = ta.getColor(R.styleable.CheckView_ev_bgColor, Color.TRANSPARENT);
mCheckedColor = ta.getColor(R.styleable.CheckView_ev_checkedColor, Color.parseColor("#0bd38a"));
mChecked = ta.getBoolean(R.styleable.CheckView_android_checked, false);
ta.recycle();
mStrokePaint = new Paint();
mStrokePaint.setAntiAlias(true);
mStrokePaint.setStyle(Paint.Style.STROKE);
mStrokePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
mStrokePaint.setStrokeWidth(mStrokeWidth);
mStrokePaint.setColor(mStrokeColor);
mCheckDrawable = ResourcesCompat.getDrawable(context.getResources(),
R.drawable.ic_check_white_18dp, context.getTheme());
mBackgroundPaint = new Paint();
mBackgroundPaint.setAntiAlias(true);
mBackgroundPaint.setStyle(Paint.Style.FILL);
mCheckRect = getSquareRect(0);
mBgRect = getSquareRect(mStrokeWidth);
mStrokeRect = getSquareRect(mStrokeWidth / 2);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(mSize + mStrokeWidth * 2 + getPaddingLeft() + getPaddingRight(),
mSize + mStrokeWidth * 2 + getPaddingTop() + getPaddingBottom());
}
@Override
public void setChecked(boolean checked) {
mChecked = checked;
invalidate();
}
@Override
public boolean isChecked() {
return mChecked;
}
@Override
public void toggle() {
setChecked(!mChecked);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mChecked) {
mBackgroundPaint.setColor(mCheckedColor);
if (mType == ProgressView.TYPE_CIRCLE) {
canvas.drawCircle(getPaddingLeft() + mStrokeWidth + mSize / 2,
getPaddingTop() + mStrokeWidth + mSize / 2,
mStrokeWidth + mSize / 2, mBackgroundPaint);
} else {
canvas.drawRect(mBgRect, mBackgroundPaint);
}
mCheckDrawable.setBounds(mCheckRect);
mCheckDrawable.draw(canvas);
} else {
mBackgroundPaint.setColor(mbgColor);
if (mType == ProgressView.TYPE_CIRCLE) {
//渲染這個圓形背景
canvas.drawCircle(getPaddingLeft() + mStrokeWidth + mSize / 2,
getPaddingTop() + mStrokeWidth + mSize / 2,
mSize / 2 + mStrokeWidth, mBackgroundPaint);
//渲染這個圓形邊框
canvas.drawCircle(getPaddingLeft() + mStrokeWidth + mSize / 2,
getPaddingTop() + mStrokeWidth + mSize / 2,
(mStrokeWidth + mSize) / 2/*Paint.Style.STROKE的情況下畫筆在StrokeWidth中間*/, mStrokePaint);
} else {
//渲染這個方形背景
canvas.drawRect(mBgRect, mBackgroundPaint);
//渲染這個方形邊框
canvas.drawRect(mStrokeRect, mStrokePaint);
}
}
// enable hint
setAlpha(isEnabled() ? 1.0f : 0.5f);
}
private Rect getSquareRect(@IntRange(from = 0) int offset) {
int centerX = getPaddingLeft() + mStrokeWidth + mSize / 2;
int centerY = getPaddingTop() + mStrokeWidth + mSize / 2;
return new Rect(centerX - mSize / 2 - offset, centerY - mSize / 2 - offset,
centerX + mSize / 2 + offset, centerY + mSize / 2 + offset);
}
}
xml屬性：
<declare-styleable name="CheckView">
<attr name="android:checked" />
<attr name="ev_type" />
<attr name="ev_strokeColor" format="color" />
<attr name="ev_bgColor" format="color" />
<attr name="ev_checkedColor" format="color" />
<attr name="ev_size" format="dimension" />
<attr name="ev_strokeWidth" format="dimension" />
</declare-styleable>
使用：
<com.xcheng.view.widget.CheckView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:checked="false"
app:ev_type="rect"
app:ev_bgColor="@color/ev_white"
app:ev_strokeColor="@color/ev_blue_normal"
app:ev_checkedColor="@color/colorAccent"
app:ev_size="30dp"
app:ev_strokeWidth="6dp" />
是不是很簡單净响，一勞永逸。再也不用擔(dān)心修改樣式了喳瓣。
