【第22期】观点:IT 行业加班,到底有没有价值?

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 开发进阶:自定义 View 1-3 文字的绘制

这篇是Android开发进阶,自定义View系列的第三篇了,如果你没看过前两篇,可以先去看一下: Android 开发进阶: 自定义 View 1-1 绘制基础 Android 开发进阶: 自定义...

Android进阶:ListView深入学习 choiceMode使用及自定义Adapter

首先看效果图: 这个是多选

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

Android进阶#(6/12)让程序更优的技术——性能优化_内存泄漏

(6/12)让程序更优的技术——性能优化_内存泄漏

android UI进阶之实现listview中checkbox的多选与记录

转于:http://www.cnblogs.com/notice520/archive/2012/02/17/2355415.html ---------------------------------------------------------------------------------...

Android进阶#(6/12)让程序更优的技术——性能优化_内存优化

(6/12)让程序更优的技术——性能优化_内存优化
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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