Android颜色选择器 - 军军小站|张军博客

参考网上文章，做了两种颜色选择器。

一种是固定颜色的选择器，这个很简单，只要画出来各种颜色区域，用户选择哪个，就选择了什么颜色。

另一种是万能颜色选择器，这个有一些算法的，所以就参考了网上的文章（由于原始出处不详，就不表示感谢了），又做了一些优化和修改。

目前的这个万能颜色选择器的功能已经足够了，也没什么可保密的，就放上来，给需要的人做个参考。喜欢就拿去好了。

    
import arui.csdn.generaltools.colorchooser.ColorChooserType;  
import arui.csdn.generaltools.colorchooser.OnColorChangedListener;  
import android.content.Context;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.graphics.LinearGradient;  
import android.graphics.Paint;  
import android.graphics.RectF;  
import android.graphics.Shader;  
import android.graphics.SweepGradient;  
import android.view.MotionEvent;  
import android.view.View;  
/** 
 * Universal color view class. This class will draw color chooser graph. 
 *  
 * @author http://blog.csdn.net/arui319 
 *  
 */  
public class UniversalColorView extends View {  
    private Paint mPaint;  
    private Paint mCenterPaint;  
    private Paint mHSVPaint;  
    private final int[] mColors;  
    private int[] mHSVColors;  
    private boolean mRedrawHSV;  
    private OnColorChangedListener mListener;  
    private boolean mTrackingCenter;  
    private boolean mHighlightCenter;  
    private static final int CENTER_X = 100;  
    private static final int CENTER_Y = CENTER_X;  
    private static final int CENTER_RADIUS = 30;  
    private static final int OUTER_RADIUS = 100;  
    private static final int HSV_X = CENTER_X;  
    private static final int HSV_Y_TOP = CENTER_Y + 10;  
    private static final int HSV_Y_BOTOM = HSV_Y_TOP + 20;  
    private static final float PI = 3.1415926f;  
    public UniversalColorView(Context context, OnColorChangedListener listener,  
            int color) {  
        super(context);  
        this.setBackgroundColor(Color.LTGRAY);  
        mListener = listener;  
        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(55);  
        mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
        mCenterPaint.setColor(color);  
        mCenterPaint.setStrokeWidth(5);  
        mHSVColors = new int[] { 0xFF000000, color, 0xFFFFFFFF };  
        mHSVPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
        mHSVPaint.setStrokeWidth(10);  
        mRedrawHSV = true;  
    }  
    @Override  
    protected void onDraw(Canvas canvas) {  
        float r = CENTER_X - mPaint.getStrokeWidth() * 0.5f;  
        canvas.translate(CENTER_X, CENTER_X);  
        int c = mCenterPaint.getColor();  
        if (mRedrawHSV) {  
            mHSVColors[1] = c;  
            mHSVPaint.setShader(new LinearGradient(0 - HSV_X, 0, HSV_X, 0,  
                    mHSVColors, null, Shader.TileMode.CLAMP));  
        }  
        canvas.drawOval(new RectF(-r, -r, r, r), mPaint);  
        canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);  
        canvas.drawRect(new RectF(0 - HSV_X, HSV_Y_TOP, HSV_X, HSV_Y_BOTOM),  
                mHSVPaint);  
        if (mTrackingCenter) {  
            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);  
        }  
        mRedrawHSV = true;  
    }  
    @Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        setMeasuredDimension(CENTER_X * 2, HSV_Y_BOTOM * 2 - 20);  
    }  
    @Override  
    public boolean onTouchEvent(MotionEvent event) {  
        float x = event.getX() - CENTER_X;  
        float y = event.getY() - CENTER_Y;  
        double radius = Math.sqrt(x * x + y * y);  
        boolean inCenter = radius <= CENTER_RADIUS;  
        boolean inOuter = radius <= OUTER_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 if ((x >= 0 - HSV_X && x <= HSV_X)  
                    && (y <= HSV_Y_BOTOM && y >= HSV_Y_TOP)) {  
                // see if we are in the hsv slider  
                int a, r, g, b, c0, c1;  
                float p;  
                // set the center paint to this color  
                if (x < 0) {  
                    c0 = mHSVColors[0];  
                    c1 = mHSVColors[1];  
                    p = (x + 100) / 100;  
                } else {  
                    c0 = mHSVColors[1];  
                    c1 = mHSVColors[2];  
                    p = x / 100;  
                }  
                a = ave(Color.alpha(c0), Color.alpha(c1), p);  
                r = ave(Color.red(c0), Color.red(c1), p);  
                g = ave(Color.green(c0), Color.green(c1), p);  
                b = ave(Color.blue(c0), Color.blue(c1), p);  
                mCenterPaint.setColor(Color.argb(a, r, g, b));  
                mRedrawHSV = false;  
                invalidate();  
            } else if (inOuter) {  
                float angle = (float) 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 != null) {  
                    mListener.colorChanged(this,  
                            ColorChooserType.UNIVERSAL_COLOR_TYPE, mCenterPaint  
                                    .getColor());  
                }  
                mTrackingCenter = false;  
                invalidate();  
            }  
            break;  
        }  
        return true;  
    }  
    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 ave(int s, int d, float p) {  
        return s + Math.round(p * (d - s));  
    }  
    public int getColor() {  
        return mCenterPaint.getColor();  
    }  
    public void setColor(int color) {  
        mCenterPaint.setColor(color);  
    }  
}

    
/** 
 * color changed listener. 
 *  
 * @author http://blog.csdn.net/arui319 
 *  
 */  
public interface OnColorChangedListener {  
    /** 
     * Color changed event happened. 
     *  
     * @param source 
     *            event source object 
     * @param type 
     *            ColorChooserType 
     * @param color 
     *            color int value 
     */  
    public void colorChanged(Object source, ColorChooserType type, int color);  
}

    
/** 
 * Color chooser's type. One is defined color panel, another is universal color 
 * panel. 
 *  
 * @author http://blog.csdn.net/arui319 
 *  
 */  
public class ColorChooserType {  
    private int type = 0;  
    private static final int DEFINED_COLOR = 1;  
    private static final int UNIVERSAL_COLOR = 2;  
    public static final ColorChooserType DEFINED_COLOR_TYPE = new ColorChooserType(  
            DEFINED_COLOR);  
    public static final ColorChooserType UNIVERSAL_COLOR_TYPE = new ColorChooserType(  
            UNIVERSAL_COLOR);  
    private ColorChooserType(int type) {  
        this.type = type;  
    }  
    public int getType() {  
        return type;  
    }  
    @Override  
    public boolean equals(Object type) {  
        if (type instanceof ColorChooserType) {  
            if (this.getType() == ((ColorChooserType) type).getType()) {  
                return true;  
            }  
        }  
        return false;  
    }  
    @Override  
    public int hashCode() {  
        return this.getType();  
    }  
}

///////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////
附：
dialog样式的颜色选择器：

    
import android.app.Dialog;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.os.Bundle;
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 {
		private Paint mPaint;
		private Paint mCenterPaint;
		private Paint mRadialPaint;
		private final int[] mRadialColors;
		private OnColorChangedListener mListener;

		private Paint mGradientPaint;
		private int[] mLinearColors;
	
		ColorPickerView(Context c, OnColorChangedListener l, int color) {
			super(c);
			mListener = l;
			mRadialColors = new int[] { 0xFFFF0000, 0xFFFF00FF, 0xFF0000FF,
					0xFF00FFFF, 0xFF00FF00, 0xFFFFFF00, 0xFFFF0000 };
			Shader s = new SweepGradient(0, 0, mRadialColors, null);

			mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
			mPaint.setShader(s);
			mPaint.setStyle(Paint.Style.STROKE);
			mPaint.setStrokeWidth(32);

			mLinearColors = getColors(color);
			Shader shader = new LinearGradient(0, 0, Center_X * 2, 0,
					mLinearColors, null, Shader.TileMode.CLAMP);

			mGradientPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
			mGradientPaint.setStyle(Paint.Style.STROKE);
			mGradientPaint.setShader(shader);
			mGradientPaint.setStrokeWidth(32);

			mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
			mCenterPaint.setColor(color);
			mCenterPaint.setStrokeWidth(6);

			mRadialPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
			mRadialPaint.setColor(color);
			mRadialPaint.setStrokeWidth(6);
		}

		private int[] getColors(int color) {
			if (color == Color.BLACK || color == Color.WHITE) {
				return new int[] { Color.BLACK, Color.WHITE };
			}
			return new int[] { Color.BLACK, color, Color.WHITE };
		}

		private boolean mTrackingCenter;
		private boolean mHighlightCenter;
		private boolean mTrackingLinGradient;

		@Override
		protected void onDraw(Canvas canvas) {
			float r = COLOR_CIRCLE - mPaint.getStrokeWidth() * 0.5f;

			canvas.translate(Center_X, COLOR_CIRCLE);
			
			canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
			canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);

			if (mTrackingCenter) {
				int color = 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(color);
			}

			int color = mRadialPaint.getColor();
			mLinearColors = getColors(color);
			Shader shader = new LinearGradient(0, 0, Center_X * 2, 0,
					mLinearColors, null, Shader.TileMode.CLAMP);
			mGradientPaint.setShader(shader);

			canvas.translate(-Center_X, 0);
			canvas.drawLine(0, r + 50, Center_X * 2, r + 50, mGradientPaint);
		}

		@Override
		protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {	
			/*super.onMeasure(widthMeasureSpec, heightMeasureSpec);
			int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
		    int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
		    setMeasuredDimension(parentWidth, parentHeight);
			Center_X = (int) Math.ceil(parentWidth*.5);
			Center_Y = (int) Math.ceil(parentHeight*.5);*/
			
			setMeasuredDimension(Center_X * 2, Center_Y * 2 + 70);
		}

		private static int Center_X = 110;
		private static int Center_Y = 100;
		private static final int CENTER_RADIUS = 32;
		private static final int COLOR_CIRCLE = 100;

		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 static final float PI = 3.1415926f;

		@Override
		public boolean onTouchEvent(MotionEvent event) {
			float x = event.getX() - Center_X;
			float y = event.getY() - COLOR_CIRCLE;
			boolean inCenter = Math.sqrt(x * x + y * y) <= CENTER_RADIUS;
			boolean outOfRadialGradient = y > COLOR_CIRCLE;

			switch (event.getAction()) {
			case MotionEvent.ACTION_DOWN:
				mTrackingCenter = inCenter;
				mTrackingLinGradient = outOfRadialGradient;
				if (inCenter) {
					mHighlightCenter = true;
					invalidate();
					break;
				}
			case MotionEvent.ACTION_MOVE:
				if (mTrackingCenter) {
					if (mHighlightCenter != inCenter) {
						mHighlightCenter = inCenter;
						invalidate();
					}
				} else if (mTrackingLinGradient) {
					float unit = Math.max(0, Math.min(Center_X * 2, x
							+ Center_X))
							/ (Center_X * 2);
					mCenterPaint.setColor(interpColor(mLinearColors, unit));
					invalidate();
				} else {
					float angle = (float) Math.atan2(y, x);
					// need to turn angle [-PI ... PI] into unit [0....1]
					float unit = angle / (2 * PI);
					if (unit < 0) {
						unit += 1;
					}
					int color = interpColor(mRadialColors, unit);
					mCenterPaint.setColor(color);
					mRadialPaint.setColor(color);
					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();
			}
		};	
		

		this.setContentView(new ColorPickerView(this.getContext(), l, mInitialColor));
		this.setTitle(R.string.color_pick);	
		
		/*Display display = this.getWindow().getWindowManager().getDefaultDisplay();
		if(display.getWidth() < display.getHeight()) {
			this.getWindow().setLayout(
					LayoutParams.FILL_PARENT, 
					(int) Math.ceil(display.getHeight()*.7f)
			);
		}
		else {
			this.getWindow().setLayout(					
					(int) Math.ceil(display.getWidth()*.7f),
					LayoutParams.FILL_PARENT
			);
		}*/
	}
}

用法：

    
new ColorPickerDialog(
    			context, 
    			new ColorPickerDialog.OnColorChangedListener() {					
					public void colorChanged(int color) {
						XXX.setColor(color);
					}
				}, 
				oldColor
    	).show();

另一个颜色选取控件：
ColorPickerPreference 颜色选取控件
作为一个颜色选取的控件类库，它有自己的特色。使用它可以为你的用户定制丰富多彩的颜色。如图：

Android颜色选择器

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义