今天在美团点外卖，有一个商品推荐的条目，上面的CheckBox是自定义的，虽然我们大部分都是用图片来自定义样式。但是还是可以自定义View来绘制的，只要画一个圆和对勾即可。
最终效果
最终效果.png
样式对比.png
原理
获取到View宽高后，计算半径，画一个圆。
画一个对勾，仔细观察你会发现对勾，其实就是一个90度的直角，只是2条边长度不同。所以我们使用Canvas的平移、旋转的技巧就可以做出来了。
风格提供2种：
美团外卖
未勾选时，实心圆，背景为淡灰色，中间对勾为白色。
勾选时，实心圆，背景为黄色，中间对勾为褐色。
微软To-Do
未勾选时，空心圆，中间没有对勾。
勾选时，实心圆，背景为紫色，中间对勾为透明，漏出View的背景。(镂空)
美团外卖的样式，比较简单，只要先画圆，再画对勾即可。微软To-Do的样式稍微麻烦点，勾选时对勾为透明，漏出View的背景，镂空的效果，方案就是使用PorterDuffXfermode混合模式，让背景和对勾重合的部分(其实就是对勾的部分)，不绘制颜色。
完整代码
自定义属性
Java代码
public class HookCheckBox extends View {
/**
* View默认最小宽度
*/
private static final int DEFAULT_MIN_WIDTH = 80;
/**
* 普通风格
*/
private static final int STYLE_NORMAL = 1;
/**
* 镂空风格
*/
private static final int STYLE_HOLLOW_OUT = 2;
/**
* 控件宽
*/
private int mViewWidth;
/**
* 控件高
*/
private int mViewHeight;
/**
* 原型半径
*/
private float mRadius;
/**
* 画笔
*/
private Paint mPaint;
/**
* 钩子的线长度
*/
private float mHookLineLength;
/**
* 是否选中
*/
private boolean isCheck;
/**
* 选中时，圆的颜色
*/
private int mCheckCircleColor;
/**
* 未选中时，圆的颜色
*/
private int mUncheckCircleColor;
/**
* 选中时，钩子的颜色
*/
private int mCheckHookColor;
/**
* 未选中时，钩子的颜色
*/
private int mUncheckHookColor;
/**
* 混合模式
*/
private PorterDuffXfermode mPorterDuffXfermode;
/**
* 线宽
*/
private float mLineWidth;
/**
* 风格策略
*/
private BaseStyleStrategy mStyleStrategy;
/**
* 切换改变回调
*/
private OnCheckChangeListener mCheckListener;
public HookCheckBox(Context context) {
this(context, null);
}
public HookCh
最低0.47元/天 解锁文章
3769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
