首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 其他教程 > 操作系统 >

Android 仿PhotoShop调色板应用(3) 主体界面绘制

2013-10-08 
Android 仿PhotoShop调色板应用(三) 主体界面绘制Android 仿PhotoShop调色板应用(三) 主体界面绘制关于Pho

Android 仿PhotoShop调色板应用(三) 主体界面绘制

Android 仿PhotoShop调色板应用(三) 主体界面绘制

   关于PhotoShop调色板应用的实现我总结了两个最核心的部分:

  1. 主体界面不同区域的绘制

  2. 颜色选择的生成与交互

 这里我讲述一下第一要点,也就是ColorPickerDialog对主体界面的绘制.

   首先还是看一下ColorPickerDialog整体显示的效果(见图1)

                                      Android 仿PhotoShop调色板应用(3) 主体界面绘制    图1


对应着效果图我画了一张界面结构分析图,相信看了之后会对该界面的组成很快能够掌握:(见图2)

Android 仿PhotoShop调色板应用(3) 主体界面绘制  图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小时前
您的文章已被推荐到博客首页和个人页侧边栏推荐文章,感谢您的分享。

热点排行