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高手进阶教程.pdf

  • 2017-09-27 22:09
  • 1.97MB
  • 下载

android 开发进阶

  • 2013-07-29 13:50
  • 1.87MB
  • 下载

Android 属性动画进阶总结篇(篇3)

前言:总结之前学习的关于属性动画的笔记 和 学习了郭霖大神的 属性动画高级用法相关的博客之后的记录1.在文章的开始首先贴上郭霖 大神关于 属性动画高级用法相关的博客地址:博客Url: http://b...

Android高手进阶教程

  • 2013-11-24 21:06
  • 1.97MB
  • 下载

Android界面使用进阶版

  • 2014-04-19 11:50
  • 1.19MB
  • 下载

Android悬浮窗进阶版-中篇(代码篇)

我们上一篇已经说明了我们需要改进的三个需求,分别是: 拖拽悬浮窗,需要判断拖拽距离后才会产生拖拽效果。 根据悬浮窗在手机屏幕的位置,自动判断靠边。 悬浮窗首次绘制时的屏幕位置能随意更改。 那么,我...

Android进阶之ListView与BaseAdapter的使用

Android进阶之ListView与BaseAdapter的使用 效果图 布局 activity_my_adapter.xml里的my_listview.xml       ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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