android自定义颜色选择器,自定义View：Android 仿 PS 选色板

谁践踏了优雅 2022-10-18 00:55 498阅读 0赞

前言

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

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

![dfb8a807b180][]

效果图

正文

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

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

![dfb8a807b180][]

在这里插入图片描述

上面的简单介绍了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 = 0

var endColor = 0

var ratio = 0f

var i = positions.size - 1

while (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 / width

val brightness = yDown / height

hsv\[1\] = saturation

hsv\[2\] = 1- brightness

return Color.HSVToColor(hsv)

总结

其实选择器的核心思想就是RGB颜色和HSV颜色的互相转换，其他的都是逻辑问题。

具体demo请点击：选色板demo Github地址

[dfb8a807b180]: /images/20221014/8fdaeaed1cc340eaa412d7fece40ba57.png

android自定义颜色选择器,自定义View：Android 仿 PS 选色板

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Android 之自定义选择器网络获取信息

相关 element自定义主题色

相关 android自定义颜色选择器,自定义View：Android 仿 PS 选色板

相关 android自定义标尺,Android自定义标尺滑动选择值效果

相关【Android】时间选择器PopupWindow(自定义)

相关 Android自定义DataTimePicker（日期选择器）

相关 Android 实现自定义的WheelView选择器

相关 JQuery选择器之自定义选择器

相关自定义多选

相关 Android自定义View之区块选择器