admin管理员组文章数量:1570807
今天在美团点外卖,有一个商品推荐的条目,上面的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
本文标签: 自定义对号androidCheckBoxView
版权声明:本文标题:android 自定义 对号,Android 自定义View 对勾CheckBox 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725736060a1039734.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论