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:

[java] view plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. android:orientation="vertical"
  6. android:paddingLeft="5dp"
  7. android:paddingRight="5dp" >
  8. <net.margaritov.preference.colorpicker.ColorPickerView
  9. android:id="@+id/color_picker_view"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:layerType="software"
  13. android:tag="portrait" />
  14. <LinearLayout
  15. android:id="@+id/text_hex_wrapper"
  16. android:layout_width="fill_parent"
  17. android:layout_height="wrap_content"
  18. android:layout_marginBottom="5dp"
  19. android:layout_marginLeft="6dp"
  20. android:layout_marginRight="6dp" >
  21. <TextView
  22. android:layout_width="wrap_content"
  23. android:layout_height="wrap_content"
  24. android:gravity="left"
  25. android:text="@string/press_color_to_apply"
  26. android:textAppearance="?android:attr/textAppearanceSmall" />
  27. <EditText
  28. android:id="@+id/hex_val"
  29. android:layout_width="0dp"
  30. android:layout_height="wrap_content"
  31. android:layout_weight="1"
  32. android:hint="HEX"
  33. android:imeOptions="actionDone"
  34. android:maxLength="7"
  35. android:singleLine="true"
  36. android:inputType="textCapCharacters"
  37. android:visibility="gone" >
  38. </EditText>
  39. </LinearLayout>
  40. <LinearLayout
  41. android:layout_width="wrap_content"
  42. android:layout_height="40dp"
  43. android:layout_marginBottom="10dp"
  44. android:orientation="horizontal" >
  45. <net.margaritov.preference.colorpicker.ColorPickerPanelView
  46. android:id="@+id/old_color_panel"
  47. android:layout_width="0px"
  48. android:layout_height="fill_parent"
  49. android:layout_weight="0.5" />
  50. <TextView
  51. android:layout_width="wrap_content"
  52. android:layout_height="fill_parent"
  53. android:layout_marginLeft="10dp"
  54. android:layout_marginRight="10dp"
  55. android:gravity="center"
  56. android:text="→"
  57. android:textSize="20sp" />
  58. <net.margaritov.preference.colorpicker.ColorPickerPanelView
  59. android:id="@+id/new_color_panel"
  60. android:layout_width="0px"
  61. android:layout_height="wrap_content"
  62. android:layout_weight="0.5" />
  63. </LinearLayout>
  64. </LinearLayout>

二. 不同区域的绘制实现:

1.     Saturation Area 饱和度选择区域

这里用到了组合渲染(ComposeShader)的方式.

(1)使用了两个线性渲染器:一个作为亮度的显示渲染,一个作为饱和度的显示渲染,    因为我们可以看到颜色渐变和亮度渐变的综合显示效果

此区域完成了HSV(也叫HSB)色彩空间之Saturation(饱和度)value(色调)/brightness(明度)的综合显示

(2) 选择圆环绘制:  分为了内外两个圆环分别绘制. 黑色内圆及灰色外圆

具体实现请看以下代码

[java] view plain copy

  1. /**
  2. * 绘制饱和度选择区域
  3. * @param canvas
  4. */
  5. private void drawSatValPanel(Canvas canvas){
  6. final RectF rect = mSatValRect;
  7. if(BORDER_WIDTH_PX > 0){
  8. mBorderPaint.setColor(mBorderColor);
  9. canvas.drawRect(mDrawingRect.left, mDrawingRect.top, rect.right + BORDER_WIDTH_PX, rect.bottom + BORDER_WIDTH_PX, mBorderPaint);
  10. }
  11. //明度线性渲染器
  12. if (mValShader == null) {
  13. mValShader = new LinearGradient(rect.left, rect.top, rect.left, rect.bottom,
  14. 0xffffffff, 0xff000000, TileMode.CLAMP);
  15. }
  16. //HSV转化为RGB
  17. int rgb = Color.HSVToColor(new float[]{mHue,1f,1f});
  18. //饱和线性渲染器
  19. mSatShader = new LinearGradient(rect.left, rect.top, rect.right, rect.top,
  20. 0xffffffff, rgb, TileMode.CLAMP);
  21. //组合渲染 = 明度线性渲染器 + 饱和线性渲染器
  22. ComposeShader mShader = new ComposeShader(mValShader, mSatShader, PorterDuff.Mode.MULTIPLY);
  23. mSatValPaint.setShader(mShader);
  24. canvas.drawRect(rect, mSatValPaint);
  25. //初始化选择圆块的位置
  26. Point p = satValToPoint(mSat, mVal);
  27. //绘制黑色内圆
  28. mSatValTrackerPaint.setColor(0xff000000);
  29. canvas.drawCircle(p.x, p.y, PALETTE_CIRCLE_TRACKER_RADIUS - 1f * mDensity, mSatValTrackerPaint);
  30. //绘制外圆
  31. mSatValTrackerPaint.setColor(0xffdddddd);
  32. canvas.drawCircle(p.x, p.y, PALETTE_CIRCLE_TRACKER_RADIUS, mSatValTrackerPaint);
  33. }

2.Hue Area 色相选择区域

(1) 颜色渲染部分仍为竖直方向的线性渐变.这里可以看一下对应颜色数组的生成:

[java] view plain copy

  1. private int[] buildHueColorArray(){
  2. int[] hue = new int[361];
  3. int count = 0;
  4. for(int i = hue.length -1; i >= 0; i--, count++){
  5. hue[count] = Color.HSVToColor(new float[]{i, 1f, 1f});
  6. }
  7. return hue;
  8. }

这里使用了一个大小为361的int数组, 根据当前位置生成不同的 hsv颜色数组

通过Color.HSVToColor,将HSV转换为ARGB的形式,因为在线性渐变渲染中,我们不能直接使用HSV色彩,而是需要使用ARGB制式的颜色.

因此我们看到了一个数值方向的一个多彩变换效果

(2) 绘制矩形颜色选择条区域

[java] view plain copy

  1. /**
  2. * 绘制右侧色相选择区域
  3. * @param canvas
  4. */
  5. private void drawHuePanel(Canvas canvas){
  6. final RectF rect = mHueRect;
  7. if(BORDER_WIDTH_PX > 0){
  8. mBorderPaint.setColor(mBorderColor);
  9. canvas.drawRect(rect.left - BORDER_WIDTH_PX,
  10. rect.top - BORDER_WIDTH_PX,
  11. rect.right + BORDER_WIDTH_PX,
  12. rect.bottom + BORDER_WIDTH_PX,
  13. mBorderPaint);
  14. }
  15. //初始化色相线性渲染器
  16. if (mHueShader == null) {
  17. mHueShader = new LinearGradient(rect.left, rect.top, rect.left, rect.bottom, buildHueColorArray(), null, TileMode.CLAMP);
  18. mHuePaint.setShader(mHueShader);
  19. }
  20. canvas.drawRect(rect, mHuePaint);
  21. float rectHeight = 4 * mDensity / 2;
  22. //初始化色相选择器选择条位置
  23. Point p = hueToPoint(mHue);
  24. RectF r = new RectF();
  25. r.left = rect.left - RECTANGLE_TRACKER_OFFSET;
  26. r.right = rect.right + RECTANGLE_TRACKER_OFFSET;
  27. r.top = p.y - rectHeight;
  28. r.bottom = p.y + rectHeight;
  29. //绘制选择条
  30. canvas.drawRoundRect(r, 2, 2, mHueTrackerPaint);
  31. }


3. Alpha Area 透明度选择区域

这里主要借助于AlphaPatternDrawable进行绘制,见上一篇博客:

Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable

具体请见注释,渲染部分和Hue Area类似

[java] view plain copy

  1. /**
  2. * 绘制底部透明度选择区域
  3. * @param canvas
  4. */
  5. private void drawAlphaPanel(Canvas canvas){
  6. if(!mShowAlphaPanel || mAlphaRect == null || mAlphaPattern == null) return;
  7. final RectF rect = mAlphaRect;
  8. if(BORDER_WIDTH_PX > 0){
  9. mBorderPaint.setColor(mBorderColor);
  10. canvas.drawRect(rect.left - BORDER_WIDTH_PX,
  11. rect.top - BORDER_WIDTH_PX,
  12. rect.right + BORDER_WIDTH_PX,
  13. rect.bottom + BORDER_WIDTH_PX,
  14. mBorderPaint);
  15. }
  16. mAlphaPattern.draw(canvas);
  17. float[] hsv = new float[]{mHue,mSat,mVal};//hsv数组
  18. int color = Color.HSVToColor(hsv);
  19. int acolor = Color.HSVToColor(0, hsv);
  20. //初始化透明度线性渲染器
  21. mAlphaShader = new LinearGradient(rect.left, rect.top, rect.right, rect.top,
  22. color, acolor, TileMode.CLAMP);
  23. mAlphaPaint.setShader(mAlphaShader);
  24. canvas.drawRect(rect, mAlphaPaint);
  25. if(mAlphaSliderText != null && mAlphaSliderText!= ""){
  26. canvas.drawText(mAlphaSliderText, rect.centerX(), rect.centerY() + 4 * mDensity, mAlphaTextPaint);
  27. }
  28. float rectWidth = 4 * mDensity / 2;
  29. //初始化透明度选择器选择条位置
  30. Point p = alphaToPoint(mAlpha);
  31. RectF r = new RectF();
  32. r.left = p.x - rectWidth;
  33. r.right = p.x + rectWidth;
  34. r.top = rect.top - RECTANGLE_TRACKER_OFFSET;
  35. r.bottom = rect.bottom + RECTANGLE_TRACKER_OFFSET;
  36. canvas.drawRoundRect(r, 2, 2, mHueTrackerPaint);
  37. }

4. ColorPickerPanelView

由于此区域可做最终颜色的显示,所以也借助了AlphaPatternDrawable的实现

此矩形区域绘制相对比较简单:

[java] view plain copy

  1. final RectF rect = mColorRect;
  2. if(BORDER_WIDTH_PX > 0){
  3. mBorderPaint.setColor(mBorderColor);
  4. canvas.drawRect(mDrawingRect, mBorderPaint);
  5. }
  6. if(mAlphaPattern != null){
  7. mAlphaPattern.draw(canvas);
  8. }
  9. mColorPaint.setColor(mColor);
  10. canvas.drawRect(rect, mColorPaint);

至此,ColorPickerDialog主体面板绘制部分已讲述完毕.下面我会讲述另一大核心部分:颜色选择生成的交互.
如果对颜色渲染方面还是不太清楚的话,可以参照我之前写的颜色渲染系列,关于原理和具体API的讲解.

时间: 06-07

Android 仿PhotoShop调色板应用(三) 主体界面绘制的相关文章

Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应

版权声明:本文为博主原创文章,未经博主允许不得转载.  Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应  上一篇讲过了主体界面的绘制,这里讲解调色板应用中的另外一个核心: 颜色选择及生成. ColorPcikerView中不同部分的选择和ColorPickerPanelView中颜色显示是怎样响应的呢?这里当然少不了回调函数: ColorPickerView: [java] view plain copy public interface OnColorCh

Android应用之《宋词三百首》(二)

接上回,上回我们讲到MainActivity里面将所有的宋词标题和作者显示到界面的ListView中去,我们接下来的工作是通过点击ListView的Item跳转到ContentActivity里面去显示单个宋词的所有内容,跳转代码例如以下: // 为ListView的Item设置点击监听器 mListView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterVi

高仿微信5.2.1主界面架构 包含消息通知

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/25708045 一哥们去新疆前给了我个任务,就是整这东西,哥们回来了,赶紧做了个,哈哈,可惜没给我带切糕. 新版微信的效果,一眼看上去准备用ViewpagerIndicator来实现,但是需要在Indicator的后面添加消息通知(BadgeView),可惜没有办法自定义Indicator,最后还是自己写了个实现. 主结构:ViewPager和FragmentPagerAdapt

Android艺术开发探索第三章————View的事件体系(下)

Android艺术开发探索第三章----View的事件体系(下) 在这里就能学习到很多,主要还是对View的事件分发做一个体系的了解 一.View的事件分发 上篇大致的说了一下View的基础知识和滑动,现在我们再来聊聊一个比较核心的知识点,那就是事件分发了,而且他还是一个难点,我们更加应该掌握,View的滑动冲突一直都是很苦恼的,这里,我们就来一起探索一下 1.点击事件的传递规则 我们分析的点击事件可不是View.OnClickListener,而是我们MotionEvent,即点击事件,关于M

【Android 仿微信通讯录 导航分组列表-上】使用ItemDecoration为RecyclerView打造带悬停头部的分组列表

[Android 仿微信通讯录 导航分组列表-上]使用ItemDecoration为RecyclerView打造带悬停头部的分组列表 一 概述 本文是Android导航分组列表系列上,因时间和篇幅原因分上下,最终上下合璧,完整版效果如下: 上部残卷效果如下:两个ItemDecoration,一个实现悬停头部分组列表功能,一个实现分割线(官方demo) 网上关于实现带悬停分组头部的列表的方法有很多,像我看过有主席的自定义ExpandListView实现的,也看过有人用一个额外的父布局里面套 Rec

Android仿微信UI布局视图(圆角布局的实现)

圆角按钮,或布局可以在xml文件中实现,但也可以使用图片直接达到所需的效果,以前版本的微信就使用了这种方法. 实现效果图:    不得不说,这种做法还是比较方便的. 源代码: MainActivity(没写任何代码,效果全在布局文件中实现): package com.android_settings; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity

Cocos2d-x创建android项目(cocos2d-x系列三)

不例外.最显眼的就是,在文件的根目录中增加了一个名为setup.py的配置文件.运行它可以配置系统的一些环境变量. 2.创建项目 新的版本我们来动手创建一个新项目吧.找到tools文件夹....额 打包的那个名为create-project.py的文件似乎木有了!原来,在新版本中,创建新项目已经可以通过命令行来创建了,相对于先前版本的图形界面,命令行更简洁.我们要在setup.py中设置参数.以mac平台为例,我们进入到对应目录,运行脚本setup.py: Setting up cocos2d-

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

简介 在前文<Android仿小米商城底部导航栏(基于BottomNavigationBar)>我们使用BottomNavigationBar控件模仿实现了小米商城底部导航栏效果.接下来更进一步的,我们将通过BottomNavigationBar控件和ViewPager空间的联动使用来实现主界面的滑动导航. 导航是移动应用最重要的方面之一,对用户体验是良好还是糟糕起着至关重要的作用.好的导航可以让一款应用更加易用并且让用户快速上手.相反,糟糕的应用导航很容易让人讨厌,并遭到用户的抛弃.为了打造

Android仿微信下拉列表实现

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文要实现微信6.1中点击顶部菜单栏的"+"号按钮时,会弹出一个列表框.这里用的了Activity实现,其实最好的方法可以用ActionBar,不过这货好像只支持3.0以后的版本.本文的接上文Android仿微信底部菜单栏+顶部菜单栏(附源码) 效果: 一.仿微信下拉列表布局pop_dialog.xml <?xml version="1.0" encodi