Android 颜色选择器之ColorPickerDialog剖析

有这样一个需求，可以让用户自定义背景颜色，这就需要提供一个颜色选择器给用户.在Android 中，如何实现这样的功能呢，遇到这种需求是，先查看一下ApiDemos是否已经有相关的实例，果然，找到了一个可以参考的demo:ColorPickerDialog。我已经把apidemos导入到eclipse中,请看截图：

我们要找的就是这个ColorPickerDialog,在com.example.android.apis.graphics目录下,是一个颜色选择器对话框，在哪个demo中使用的呢,References下之后，发现是在

FingerPaint，也就是涂鸦的例子中:

接下来还是直接看代码:

[java] view plaincopyprint?

1. package com.example.android.apis.graphics;
3. import android.os.Bundle;
4. import android.app.Dialog;
5. import android.content.Context;
6. import android.graphics.*;
7. import android.view.MotionEvent;
8. import android.view.View;
10. public class ColorPickerDialog extends Dialog {
12. public interface OnColorChangedListener {
13. void colorChanged(int color);
14. }
16. private OnColorChangedListener mListener;
17. privateint mInitialColor;
19. privatestatic class ColorPickerViewextends View {//颜色选择器自定义View
20. private Paint mPaint;<span><span></span><spanclass="comment">//渐变色环画笔</span><span> </span></span>
21. private Paint mCenterPaint;<span><span></span><spanclass="comment">//中间圆画笔</span><span> </span></span>
22. private final int[] mColors;<span><span></span><span class="comment">//渐变色环颜色</span><span></span></span>
23. private OnColorChangedListener mListener;//颜色改变回调
25. ColorPickerView(Context c, OnColorChangedListener l,int color) {
26. super(c);
27. mListener = l;
28. mColors = new int[] {//渐变色数组
29. 0xFFFF0000,0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00,
30. 0xFFFFFF00, 0xFFFF0000
31. };
32. Shader s = new SweepGradient(0,0, mColors, null);
33. //初始化渐变色画笔
34. mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
35. mPaint.setShader(s);
36. mPaint.setStyle(Paint.Style.STROKE);
37. mPaint.setStrokeWidth(32);
39. //初始化中心园画笔
40. mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
41. mCenterPaint.setColor(color);
42. mCenterPaint.setStrokeWidth(5);
43. }
45. privateboolean mTrackingCenter;
46. private boolean mHighlightCenter;
48. @Override
49. protectedvoid onDraw(Canvas canvas) {
50. float r = CENTER_X - mPaint.getStrokeWidth()*0.5f;
52. //移动中心
53. canvas.translate(CENTER_X, CENTER_X);
54. //画出色环和中心园
55. canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
56. canvas.drawCircle(0,0, CENTER_RADIUS, mCenterPaint);
58. if (mTrackingCenter) {
59. int c = mCenterPaint.getColor();
60. mCenterPaint.setStyle(Paint.Style.STROKE);
62. if (mHighlightCenter) {
63. mCenterPaint.setAlpha(0xFF);
64. } else {
65. mCenterPaint.setAlpha(0x80);
66. }
67. canvas.drawCircle(0,0,
68. CENTER_RADIUS + mCenterPaint.getStrokeWidth(),
69. mCenterPaint);
71. mCenterPaint.setStyle(Paint.Style.FILL);
72. mCenterPaint.setColor(c);
73. }
74. }
76. @Override
77. protectedvoid onMeasure(int widthMeasureSpec,int heightMeasureSpec) {
78. setMeasuredDimension(CENTER_X*2, CENTER_Y*2);
79. }
81. privatestatic final int CENTER_X = 100;
82. private static final int CENTER_Y =100;
83. privatestatic final int CENTER_RADIUS = 32;
85. privateint floatToByte(float x) {
86. int n = java.lang.Math.round(x);
87. return n;
88. }
89. privateint pinToByte(int n) {
90. if (n < 0) {
91. n = 0;
92. } else if (n > 255) {
93. n = 255;
94. }
95. return n;
96. }
98. private int ave(int s, int d,float p) {
99. return s + java.lang.Math.round(p * (d - s));
100. }
102. private int interpColor(int colors[], float unit) {
103. if (unit <=0) {
104. return colors[0];
105. }
106. if (unit >= 1) {
107. return colors[colors.length -1];
108. }
110. float p = unit * (colors.length -1);
111. int i = (int)p;
112. p -= i;
114. // now p is just the fractional part [0...1) and i is the index
115. int c0 = colors[i];
116. int c1 = colors[i+1];
117. int a = ave(Color.alpha(c0), Color.alpha(c1), p);
118. int r = ave(Color.red(c0), Color.red(c1), p);
119. int g = ave(Color.green(c0), Color.green(c1), p);
120. int b = ave(Color.blue(c0), Color.blue(c1), p);
122. return Color.argb(a, r, g, b);
123. }
125. privateint rotateColor(int color,float rad) {
126. float deg = rad * 180 / 3.1415927f;
127. int r = Color.red(color);
128. int g = Color.green(color);
129. int b = Color.blue(color);
131. ColorMatrix cm = new ColorMatrix();
132. ColorMatrix tmp = new ColorMatrix();
134. cm.setRGB2YUV();
135. tmp.setRotate(0, deg);
136. cm.postConcat(tmp);
137. tmp.setYUV2RGB();
138. cm.postConcat(tmp);
140. final float[] a = cm.getArray();
142. int ir = floatToByte(a[0] * r + a[1] * g + a[2] * b);
143. int ig = floatToByte(a[5] * r + a[6] * g + a[7] * b);
144. int ib = floatToByte(a[10] * r + a[11] * g + a[12] * b);
146. return Color.argb(Color.alpha(color), pinToByte(ir),
147. pinToByte(ig), pinToByte(ib));
148. }
150. private static final float PI =3.1415926f;
152. @Override
153. public boolean onTouchEvent(MotionEvent event) {
154. float x = event.getX() - CENTER_X;
155. float y = event.getY() - CENTER_Y;
156. boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS;
158. switch (event.getAction()) {
159. case MotionEvent.ACTION_DOWN:
160. mTrackingCenter = inCenter;
161. if (inCenter) {//是否则中心园
162. mHighlightCenter = true;
163. invalidate();
164. break;
165. }
166. case MotionEvent.ACTION_MOVE:
167. if (mTrackingCenter) {
168. if (mHighlightCenter != inCenter) {
169. mHighlightCenter = inCenter;
170. invalidate();
171. }
172. } else {
173. float angle = (float)java.lang.Math.atan2(y, x);
174. // need to turn angle [-PI ... PI] into unit [0....1]
175. float unit = angle/(2*PI);
176. if (unit < 0) {
177. unit += 1;
178. }
179. mCenterPaint.setColor(interpColor(mColors, unit));
180. invalidate();
181. }
182. break;
183. case MotionEvent.ACTION_UP:
184. if (mTrackingCenter) {
185. if (inCenter) {
186. mListener.colorChanged(mCenterPaint.getColor());
187. }
188. mTrackingCenter = false;// so we draw w/o halo
189. invalidate();
190. }
191. break;
192. }
193. return true;
194. }
195. }
197. public ColorPickerDialog(Context context,
198. OnColorChangedListener listener,
199. int initialColor) {
200. super(context);
202. mListener = listener;
203. mInitialColor = initialColor;
204. }
206. @Override
207. protectedvoid onCreate(Bundle savedInstanceState) {
208. super.onCreate(savedInstanceState);
209. OnColorChangedListener l = new OnColorChangedListener() {
210. public void colorChanged(int color) {
211. mListener.colorChanged(color);
212. dismiss();
213. }
214. };
216. setContentView(new ColorPickerView(getContext(), l, mInitialColor));
217. setTitle("Pick a Color");
218. }
219. }

package com.example.android.apis.graphics;

import android.os.Bundle;
import android.app.Dialog;
import android.content.Context;
import android.graphics.*;
import android.view.MotionEvent;
import android.view.View;

public class ColorPickerDialog extends Dialog {

    public interface OnColorChangedListener {
        void colorChanged(int color);
    }

    private OnColorChangedListener mListener;
    private int mInitialColor;

    private static class ColorPickerView extends View {//颜色选择器自定义View
        private Paint mPaint;<span class="comment">//渐变色环画笔</span> 
        private Paint mCenterPaint;<span class="comment">//中间圆画笔</span>  
        private final int[] mColors;<span class="comment">//渐变色环颜色</span>
        private OnColorChangedListener mListener;//颜色改变回调
        
        ColorPickerView(Context c, OnColorChangedListener l, int color) {
            super(c);
            mListener = l;
            mColors = new int[] {//渐变色数组
                0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00,
                0xFFFFFF00, 0xFFFF0000
            };
            Shader s = new SweepGradient(0, 0, mColors, null);
            //初始化渐变色画笔
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setShader(s);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(32);
            
            //初始化中心园画笔
            mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mCenterPaint.setColor(color);
            mCenterPaint.setStrokeWidth(5);
        }
        
        private boolean mTrackingCenter;
        private boolean mHighlightCenter;

        @Override 
        protected void onDraw(Canvas canvas) {
            float r = CENTER_X - mPaint.getStrokeWidth()*0.5f;
            
            //移动中心
            canvas.translate(CENTER_X, CENTER_X);
            //画出色环和中心园
            canvas.drawOval(new RectF(-r, -r, r, r), mPaint);            
            canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);
            
            if (mTrackingCenter) {
                int c = mCenterPaint.getColor();
                mCenterPaint.setStyle(Paint.Style.STROKE);
                
                if (mHighlightCenter) {
                    mCenterPaint.setAlpha(0xFF);
                } else {
                    mCenterPaint.setAlpha(0x80);
                }
                canvas.drawCircle(0, 0,
                                  CENTER_RADIUS + mCenterPaint.getStrokeWidth(),
                                  mCenterPaint);
                
                mCenterPaint.setStyle(Paint.Style.FILL);
                mCenterPaint.setColor(c);
            }
        }
        
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            setMeasuredDimension(CENTER_X*2, CENTER_Y*2);
        }
        
        private static final int CENTER_X = 100;
        private static final int CENTER_Y = 100;
        private static final int CENTER_RADIUS = 32;

        private int floatToByte(float x) {
            int n = java.lang.Math.round(x);
            return n;
        }
        private int pinToByte(int n) {
            if (n < 0) {
                n = 0;
            } else if (n > 255) {
                n = 255;
            }
            return n;
        }
        
        private int ave(int s, int d, float p) {
            return s + java.lang.Math.round(p * (d - s));
        }
        
        private int interpColor(int colors[], float unit) {
            if (unit <= 0) {
                return colors[0];
            }
            if (unit >= 1) {
                return colors[colors.length - 1];
            }
            
            float p = unit * (colors.length - 1);
            int i = (int)p;
            p -= i;

            // now p is just the fractional part [0...1) and i is the index
            int c0 = colors[i];
            int c1 = colors[i+1];
            int a = ave(Color.alpha(c0), Color.alpha(c1), p);
            int r = ave(Color.red(c0), Color.red(c1), p);
            int g = ave(Color.green(c0), Color.green(c1), p);
            int b = ave(Color.blue(c0), Color.blue(c1), p);
            
            return Color.argb(a, r, g, b);
        }
        
        private int rotateColor(int color, float rad) {
            float deg = rad * 180 / 3.1415927f;
            int r = Color.red(color);
            int g = Color.green(color);
            int b = Color.blue(color);
            
            ColorMatrix cm = new ColorMatrix();
            ColorMatrix tmp = new ColorMatrix();

            cm.setRGB2YUV();
            tmp.setRotate(0, deg);
            cm.postConcat(tmp);
            tmp.setYUV2RGB();
            cm.postConcat(tmp);
            
            final float[] a = cm.getArray();

            int ir = floatToByte(a[0] * r +  a[1] * g +  a[2] * b);
            int ig = floatToByte(a[5] * r +  a[6] * g +  a[7] * b);
            int ib = floatToByte(a[10] * r + a[11] * g + a[12] * b);
            
            return Color.argb(Color.alpha(color), pinToByte(ir),
                              pinToByte(ig), pinToByte(ib));
        }
        
        private static final float PI = 3.1415926f;

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX() - CENTER_X;
            float y = event.getY() - CENTER_Y;
            boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS;
            
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mTrackingCenter = inCenter;
                    if (inCenter) {//是否则中心园
                        mHighlightCenter = true;
                        invalidate();
                        break;
                    }
                case MotionEvent.ACTION_MOVE:
                    if (mTrackingCenter) {
                        if (mHighlightCenter != inCenter) {
                            mHighlightCenter = inCenter;
                            invalidate();
                        }
                    } else {
                        float angle = (float)java.lang.Math.atan2(y, x);
                        // need to turn angle [-PI ... PI] into unit [0....1]
                        float unit = angle/(2*PI);
                        if (unit < 0) {
                            unit += 1;
                        }
                        mCenterPaint.setColor(interpColor(mColors, unit));
                        invalidate();
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    if (mTrackingCenter) {
                        if (inCenter) {
                            mListener.colorChanged(mCenterPaint.getColor());
                        }
                        mTrackingCenter = false;    // so we draw w/o halo
                        invalidate();
                    }
                    break;
            }
            return true;
        }
    }

    public ColorPickerDialog(Context context,
                             OnColorChangedListener listener,
                             int initialColor) {
        super(context);
        
        mListener = listener;
        mInitialColor = initialColor;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        OnColorChangedListener l = new OnColorChangedListener() {
            public void colorChanged(int color) {
                mListener.colorChanged(color);
                dismiss();
            }
        };

        setContentView(new ColorPickerView(getContext(), l, mInitialColor));
        setTitle("Pick a Color");
    }
}