Android 仿PhotoShop调色板应用(三) 主体界面绘制
Android 仿PhotoShop调色板应用(三) 主体界面绘制
关于PhotoShop调色板应用的实现我总结了两个最核心的部分:
1. 主体界面不同区域的绘制
2. 颜色选择的生成与交互
这里我讲述一下第一要点,也就是ColorPickerDialog对主体界面的绘制.
首先还是看一下ColorPickerDialog整体显示的效果(见图1)
图1
对应着效果图我画了一张界面结构分析图,相信看了之后会对该界面的组成很快能够掌握:(见图2)
图2
一. 界面组成
可以看到整个显示的部分即为ColorPickerDialog. 这个Dialog根据组件的构成及功能实现上可以分为两大部分:
1. 红色边框区域 由ColorPickerView绘制而成. 主要作为颜色区域的选择,此区域又划分为三个部分:
(1) Saturation Area 饱和度选择区域
(2) Hue Area 色相选择区域
(3) Alpha Area 透明度选择区域 绘制此区域借助了上一篇讲到的AlphaPatternDrawable类
2. 蓝色边框区域 由ColorPickerPanelView绘制. 左边的部分作为初始颜色显示 右边的部分做颜色选择的实时显示区域,点击后可将颜色设置为默认值
该Dialog的布局文件dialog_color_picker.xml:
final RectFrect = mColorRect;if(BORDER_WIDTH_PX > 0){mBorderPaint.setColor(mBorderColor);canvas.drawRect(mDrawingRect, mBorderPaint);}if(mAlphaPattern != null){mAlphaPattern.draw(canvas);}mColorPaint.setColor(mColor);canvas.drawRect(rect, mColorPaint);
如果对颜色渲染方面还是不太清楚的话,可以参照我之前写的颜色渲染系列,关于原理和具体API的讲解.