【Android自定义View】仿Photoshop取色器ColorPicker(一)

时间:2024-04-13 13:54:33

ColorPicker
一款仿Photoshop取色器的Android版取色对话框。采用HSV颜色空间,可手动选取想要的颜色,也可以手动输入具体颜色的16进制编码以获取颜色(如:0xFFFFFF表示白色)。

github地址:ColorPicker

效果图

【Android自定义View】仿Photoshop取色器ColorPicker(一)

总体预览

ColorPicker项目结构如下图所示:

【Android自定义View】仿Photoshop取色器ColorPicker(一)

核心自定义控件: ColorPickerView.java

颜色拾取对话框: ColorPickerDialog.java

颜色转换相关工具: Utils.java

对话框布局文件: dialog_color_picker.xml(纵向布局)+dialog_color_picker.xml(横向布局)

其他文件内容都为项目构建时的默认内容。

准备工作

在开始了解ColorPicker的具体实现之前,需要首先了解一些颜色相关的概念。

  • RGB颜色空间以R(Red:红)、G(Green:绿)、B(Blue:蓝)三种基本色为基础,进行不同程度的叠加,产生丰富而广泛的颜色,所以俗称三基色模式,也是大家所熟知的一种颜色空间。它分为xyz三轴,分别表示绿蓝红(三者取值均在0~255之间,包含边界),因此只要获得绿、蓝、红三个值就可以获得一个确切的颜色,所有的颜色构成了如下图所示的立方体,其中(0, 0, 0)到(255, 255, 255)体对角线表示黑到白的灰度值。

【Android自定义View】仿Photoshop取色器ColorPicker(一)

  • HSV颜色空间是根据颜色的直观特性由A. R. Smith在1978年创建的一种颜色空间, 也称六角锥体模型(Hexcone Model)。模型中颜色的参数分别是:色调(H),饱和度(S),明度(V)。该模型以一个倒圆锥体的形式呈现。H表示圆锥体的底面圆弧上的某个点与圆心连线的线与红色表示的点与圆心连线的线形成的夹角大小。故其取值范围为0~360°(左闭右开;红色为0°,绿色为120°,蓝色为240°)。V颜色明亮的程度,越大明度越高,取值范围为(0,1),包含边界。S表示颜色接近光谱色的程度,数值越大越接近光谱色,取值范围为(0,1),包含边界。因此获得H、S、V三者的值也可以获得一个具体的颜色。

【Android自定义View】仿Photoshop取色器ColorPicker(一)

ColorPicker库核心自定义控件ColorPickerView的颜色拾取功能就是基于HSV颜色空间的。而且HSV和RGB是可以互相转换。不过不必担心转换,因为android.graphics.Color.java提供了转换方法:

【Android自定义View】仿Photoshop取色器ColorPicker(一)

【Android自定义View】仿Photoshop取色器ColorPicker(一)

下一篇:ColorPickerView的绘制流程——仿Photoshop取色器ColorPicker(二)