今天是2017年的第一个工作日,就用这个自定义颜色选择控件来纪念下吧~~
相信做过安卓应用的主题切换、富文本编辑器文字颜色切换、画笔颜色切换等项目,都会遇到关于颜色选择的UI,虽然效果很好实现,比如通过selector的形式就很容易,但是如果项目里面有多处关于颜色选择的UI,只是有一点点差别,
那么我们就得维护多套selector,不能达到复用的效果,因此,我总结几种常见的UI,通过自定义view达到组合及复用的效果。以下列出5中效果图,当然并不局限于这5中效果,通过多种属性的组合,可以实现很多种效果。
效果图01 | 效果图02 |
效果图03 | 效果图04 |
效果图05 | |
CircleColorView提供的属性如下:
属性名 | 含义 |
circleColor | 填充的颜色 |
circleSelected | 选中状态,默认true |
selectUseOutline | 选中状态是否使用外接圆形边框,默认true |
normalUseOutline | 未选中状态是否使用外接圆形边框,默认false |
outlineStrokeWidth | 外接圆形边框的宽度 |
outlineStrokeColor | 外接圆形边框的颜色 |
selectUseFrame | 是否使用外接矩形轮廓 |
frameStrokeWidth | 外接矩形轮廓的宽度 |
frameStrokeColor | 外接矩形轮廓的颜色 |
frameCornerRadius | 外接矩形轮廓的圆角半径 |
innerType | 选中状态内部样式,normal、inner、tick,默认normal |
innerStrokeWidth | 内接圆样式圆形边框的宽度 |
innerStrokeColor | 内接圆样式圆形边框的颜色 |
innerStrokeDividerWidth | 内接圆与外接圆的间隔 |
tickStrokeWidth | 对勾线条的宽度 |
tickStrokeColor | 对勾的颜色 |
tickBackgroundDividerWidth | 对勾与圆形背景的间距 |
tickBackgroundColor | 对勾的圆形背景颜色 |
部分属性如下方图片所示:
RectangleColorView提供的属性如下:
属性名 | 含义 |
rectangleColor | 填充的颜色 |
rectangleSelected | 选中状态 |
rectangleCornerRadius | 矩形的圆角半径 |
rectOutlineStrokeWidth | 矩形外接边框的宽度 |
rectOutlineStrokeColor | 矩形外接边框的颜色 |
rectTickDirection | 选中状态对勾的位置,leftTop,rightTop,leftBottom,rightBottom,默认rightBottom |
rectTickStrokeWidth | 对勾线条的宽度 |
rectTickStrokeColor | 对勾线条的颜色 |
rectTickBackgroundColor | 对勾的圆形背景颜色 |
rectShowTick | 选中状态下是否显示对勾 |
rectTickType | 对勾显示的类型,auto,custom,默认auto |
rectTickWidth | 对勾圆形背景的宽度,在rectTickType为auto时有效 |
rectTickHeight | 对勾圆形背景的高度,在rectTickType为auto时有效 |
使用方法:
maven
<dependency>
<groupId>com.smart.colorview</groupId>
<artifactId>colorview</artifactId>
<version>1.1.1</version>
</dependency>
or gradle
dependencies {
compile 'com.smart.colorview:colorview:1.1.1'
}
布局代码:
<com.smart.colorview.normal.CircleColorView
xmlns:circle="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
circle:circleColor="#9258c2"
circle:innerStrokeDividerWidth="6dp"
circle:innerStrokeWidth="0dp"
circle:innerType="inner"
circle:normalUseOutline="true"
circle:outlineStrokeColor="#9258c2"
circle:outlineStrokeWidth="2dp"
circle:selectUseFrame="false"
circle:selectUseOutline="true"/>
java代码:
CircleColorModel circleColorModel = new CircleColorModel();
circleColorModel.setCircleColor(0xff9258c2);
circleColorModel.setSelectUseOutline(true);
circleColorModel.setOutlineStrokeWidth(4);
circleColorModel.setOutlineStrokeColor(0xff9258c2);
circleColorModel.setInnerType(CircleColorView.InnerType.INNER);
circleColorModel.setInnerStrokeWidth(0);
circleColorModel.setInnerStrokeDividerWidth(14);
circleColorModel.setCircleSelected(true);
mCircleColorView.setCircleColorModel(circleColorModel);
效果:
布局代码:
<com.smart.colorview.normal.RectangleColorView
xmlns:rectangle='http://schemas.android.com/apk/res-auto'
android:layout_width="wrap_content"
android:layout_height="wrap_content"
rectangle:rectOutlineStrokeWidth="0dp"
rectangle:rectShowTick="true"
rectangle:rectTickBackgroundColor="#fadb71"
rectangle:rectTickDirection="rightBottom"
rectangle:rectTickStrokeColor="#ffffff"
rectangle:rectTickStrokeWidth="2dp"
rectangle:rectTickType="auto"
rectangle:rectangleColor="#9258c2"
rectangle:rectangleCornerRadius="8dp"
rectangle:rectangleSelected="true"/>
java代码
RectangleColorModel rectangleColorModel = new RectangleColorModel();
rectangleColorModel.setRectangleColor(0xff9258c2);
rectangleColorModel.setRectangleColorRadius(26);
rectangleColorModel.setRectTickStrokeWidth(4);
rectangleColorModel.setRectTickStrokeColor(0xffffffff);
rectangleColorModel.setRectTickBackgroundColor(0xfffadb71);
rectangleColorModel.setTickDirection(RectangleColorView.TickDirection.RIGHT_BOTTOM);
rectangleColorModel.setRectShowTick(true);
rectangleColorModel.setRectSelected(true);
mRectangleColorView.setRectangleColorModel(rectangleColorModel);
效果:
如果在使用过程中遇到什么问题,欢迎issue告诉我,我将全力为你解决~~
具体的使用方法可以参考示例代码及源码:
如果喜欢,欢迎star一下,您的star将是我开源路上永久的动力~~