今天是2017年的第一个工作日,就用这个自定义颜色选择控件来纪念下吧~~

相信做过安卓应用的主题切换、富文本编辑器文字颜色切换、画笔颜色切换等项目,都会遇到关于颜色选择的UI,虽然效果很好实现,比如通过selector的形式就很容易,但是如果项目里面有多处关于颜色选择的UI,只是有一点点差别,
那么我们就得维护多套selector,不能达到复用的效果,因此,我总结几种常见的UI,通过自定义view达到组合及复用的效果。以下列出5中效果图,当然并不局限于这5中效果,通过多种属性的组合,可以实现很多种效果。

效果图01

效果图02

android color 资源 安卓color类_android color 资源

android color 资源 安卓color类_ci_02

效果图03

效果图04

android color 资源 安卓color类_ci_03

android color 资源 安卓color类_colorview_04

效果图05

android color 资源 安卓color类_android color 资源_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

对勾的圆形背景颜色

部分属性如下方图片所示:

android color 资源 安卓color类_android_06

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);

效果:

android color 资源 安卓color类_自定义view_07


布局代码:

<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);

效果:

android color 资源 安卓color类_自定义view_08

如果在使用过程中遇到什么问题,欢迎issue告诉我,我将全力为你解决~~

具体的使用方法可以参考示例代码及源码

如果喜欢,欢迎star一下,您的star将是我开源路上永久的动力~~