前言

今天突然发现年前的文章竟然没有写完，略微有点尴尬。今天分享的主题是Android仿PS选色板。

记得我刚开始学习Android的时候，就一直对PS选色板有一种执着，终于在今年找到了理想的解决方案。首先动图镇楼：

正文

我们常用的颜色主要是为ARGB还有RGB，不过这种组合格式想要实现选色板确实有点力不从心。从图上看，我们需要的二维矩阵，横向是饱和度的变化，纵向是明亮度的变化，类似我们电视机的色彩调节模式。ARGB和RGB是基本色的互相填充，想要精确把控颜色的变化还是很难的。

终于某一天我在网上偶然看到了新的颜色组合格式：HSV。

上面的简单介绍了HSV颜色的构成，非常符合选色板的要求，而且Android有系统API帮助我们把颜色在RGB和HSV之间互相转换。

// RGB转HSV
val hsv = FloatArray(3)
Color.HSVToColor(hsv)
hsv[0] // 色相
hsv[1] // 饱和度
hsv[2] // 明度
// HSV转RGB
val color = Color.HSVToColor(hsv)
// HSV转ARGB
val color = Color.HSVToColor(alpha, hsv)

绘制右侧的色相选择条

首先我们绘制右侧的色相选择条，把需要的色相按照均等渐变绘制一下：

private fun initLinearGradient() {positions = FloatArray(colorArray.size)for (i in colorArray.indices) {positions[i] = i * (1f / (colorArray.size - 1))}shader = LinearGradient(0f, 0f, measuredWidth.toFloat(), measuredHeight.toFloat(),colorArray, positions, Shader.TileMode.CLAMP)
}

然后根据onTouchEvent的位置，计算手指按压的位置，到底是什么颜色，我这采取的方案是ArgbEvaluator：

 /*** 计算应该当前的颜色值* */private fun calculateCurrentColor(): Int {// 找到两个颜色区间if (progress == 0f) {return colorArray.first()}if (progress >= 1f) {return colorArray.last()}var startColor = 0var endColor = 0var ratio = 0fvar i = positions.size - 1while (i >= 0) {if (progress >= positions[i]) {startColor = colorArray[i]endColor = colorArray[i + 1]ratio = (progress - positions[i]) / (positions[i + 1] - positions[i])break}i--}val argbEvaluator = ArgbEvaluator()return argbEvaluator.evaluate(ratio, startColor, endColor) as Int}

ArgbEvaluator只能计算两个颜色，所以我需要知道手指按压的位置处于哪两个颜色之间，刚才我们绘制渐变色的时候：

positions = FloatArray(colorArray.size)

已经记录了每一个颜色的位置，和手指的y坐标和View高度的比例是对应的，这样就可以具体颜色，不过颜色的格式RGB。

绘制左侧的渐变自定义View

从右侧的色相选择条得到了色相，第一步，把RGB转换为HSV，下面以横向饱和度为例：

Color.colorToHSV(it, hsv)
// 记录色相的饱和度
val temp = hsv[1]
// 保存饱和度为0的颜色
hsv[1] = 0f
val startColor = Color.HSVToColor(hsv)
// 再保存饱和度为1的颜色
hsv[1] = 1f
val endColor = Color.HSVToColor(hsv)
// 恢复之前的颜色
hsv[1] = temp
// 画出饱和度从0到1的渐变色
return LinearGradient(0f, 0f, width.toFloat(), 0f,intArrayOf(startColor, endColor),floatArrayOf(0f, 1f),Shader.TileMode.CLAMP
)

同理可以得到明度从0到1的渐变，然后两种渐变叠加在一起，我们的二维选择器就完成了。

HSV转RGB

接下来的问题是如何返回手指按下的颜色，这个和之前计算色相选择的道理一样，饱和度和明度的范围都是从0到1的，所以我们根据手指的x坐标和y坐标，求出坐标和宽高的比例，就是对应的饱和度的明度：

// 替换颜色饱和度和明度，返回RGB的颜色
private fun calculateCurrentColor(xDown: Float, yDown: Float): Int {val saturation = xDown / widthval brightness = yDown / heighthsv[1] = saturationhsv[2] = 1- brightnessreturn Color.HSVToColor(hsv)
}

总结

其实选择器的核心思想就是RGB颜色和HSV颜色的互相转换，其他的都是逻辑问题。
具体demo请点击：选色板demo Github地址

自定义View：Android 仿 PS 选色板相关推荐

android自定义颜色选择器,自定义View：Android 仿 PS 选色板
前言今天突然发现年前的文章竟然没有写完,略微有点尴尬.今天分享的主题是Android仿PS选色板. 记得我刚开始学习Android的时候,就一直对PS选色板有一种执着,终于在今年找到了理想的解决方案 ...
android 自定义取色器,【Android自定义View】仿Photoshop取色器ColorPicker(二)
ColorPicker 一款仿Photoshop取色器的Android版取色器. 前言上一篇已经简单介绍了ColorPicker的项目结构以及两种颜色空间,接下来我们详细解析一下ColorPicke ...
Android自定义View之仿QQ运动步数进度效果
文章目录前言先看效果图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6e4ddec17933496ea4830fa08d8ffbe5.png?x-oss-pr ...
Android自定义view之仿支付宝芝麻信用仪表盘 ---by ccy
自定义view练习仿支付宝芝麻信用的仪表盘对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码 <?xml version="1.0" encoding=&qu ...
自定义xy组 android,Android自定义view之仿支付宝芝麻信用仪表盘示例
自定义view练习仿支付宝芝麻信用的仪表盘对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码接着在构造方法里初始化自定义属性和画笔: private void initAttr(At ...
自定义View之仿淘宝详情页
自定义View之仿淘宝详情页转载请标明出处: http://blog.csdn.net/lisdye2/article/details/52353071 本文出自:[Alex_MaHao的博客] 项 ...
android 自定义view实现仿QQ运动步数进度效果
最近公司在策划一个新的项目,原型还没出来,再说这公司人都要走没了,估计又要找工作了,所以必须要学习,争取每个写个关于自定义view方面的,这样几个月积累下来,也能学习到东西,今天就带来简单的效果,就是 ...
Android开发自定义View之仿米家APP双色灯控制UI：做一个智能家居产品的简单智能灯UI ！(附带Demo)
一. 前言: 兜兜转转,不知不觉做Android开发已经快2年了,上半年一直在搞wifi模块开发,导致不务正业,写个自定义UI还要折腾半天,真是对不起自己的良心了!最近要对接小米开放平台,不小心看到了 ...
Android自定义View分享——仿网易云音乐留声机效果
写在前面这是笔者自学习自定义View以来,分享的第五篇效果,之前分享过一篇动态时钟效果的自定义View,如果有兴趣的可以看看: Android自定义View分享--一个时钟之前的博客笔者一般都会说 ...
android自定义view(二)-仿华为卡包效果
前段时间产品经理出了一个卡列表展示效果,效果的大致样子是仿照华为门禁卡卡包效果,研究了一下大致效果出来了,但和华为比还有点差距,主要是动画不是很流畅,仅供大家参考指正,有好的优化方式也可以告诉我,大家 ...

自定义View：Android 仿 PS 选色板

前言

正文

绘制右侧的色相选择条

绘制左侧的渐变自定义View

HSV转RGB

总结

自定义View：Android 仿 PS 选色板相关推荐

最新文章

热门文章