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);

至此，ColorPickerDialog主体面板绘制部分已讲述完毕.下面我会讲述另一大核心部分：颜色选择生成的交互.

如果对颜色渲染方面还是不太清楚的话，可以参照我之前写的颜色渲染系列，关于原理和具体API的讲解.

1楼suannai03143小时前

您的文章已被推荐到博客首页和个人页侧边栏推荐文章，感谢您的分享。