Android进阶之SmartColorView

原创 2017年01月03日 23:25:22

今天是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将是我开源路上永久的动力~~

微信公众号:Android及IOS开发
(欢迎关注,第一时间推送博文信息)
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android开发进阶从小工到专家(书签版)

  • 2017年11月28日 17:46
  • 104.77MB
  • 下载

Android高级进阶学习下载

  • 2017年11月29日 10:46
  • 46.23MB
  • 下载

[android进阶]仿京东app分类特效

在eoe论坛上看到某人高分求助,想实现京东分类效果 效果如图1: 图2: 1、首先是图1,点击某分类后,右侧滑动出覆盖层(过程有动画),如图二。 2、图一的分类列表在覆盖动画过程中,字...

【Android 一般进阶】固定JSONObject.toString()键值对顺序

org.json.JSONObject相信很多人都用过,例如:服务端返回给客户端的数据格式是JSONObject的,那我们通过对它进行解析,把它显示在界面上。 有时候希望服务器跟客户端通信的JSONO...
  • ben0612
  • ben0612
  • 2015年03月24日 14:11
  • 4894

Android 自定义View (二) 进阶

  • 2014年04月22日 12:25
  • 4.4MB
  • 下载

Android进阶之路 - 五分钟内快速实现地址选择器(citypicker )

引用于Giuhub(地址):https://github.com/crazyandcoder/citypickerEffect :build引用:compile 'liji.library.dev:c...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android进阶之SmartColorView
举报原因:
原因补充:

(最多只允许输入30个字)