Android圆环取色器

声明：本篇是以网上代码进行的更改，原址http://www.iteye.com/topic/1119586

主要的改动增加了圆环轨迹，和条形移动的三角箭头标记，美观方便的使用，增加竖屏居中适配；下面附上代码，还是以Dialog形式展现，相应注释也很全面。

package com.example.zdj.baidumapdemo;

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.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by zdj on 2017/5/2.
 */

public class MyCircle extends Dialog {

    private final boolean debug = true;
    private final String TAG = "ColorPicker";

    private Context context;
    private String title;//标题
    private int mInitialColor;//初始颜色
    private OnColorChangedListener mListener;

    /**
     * 初始颜色黑色
     *
     * @param context
     * @param title    对话框标题
     * @param listener 回调
     */
    public MyCircle(Context context, String title,
                    OnColorChangedListener listener) {
        this(context, Color.BLACK, title, listener);
    }

    /**
     * @param context
     * @param initialColor 初始颜色
     * @param title        标题
     * @param listener     回调
     */
    public MyCircle(Context context, int initialColor,
                    String title, OnColorChangedListener listener) {
        super(context);
        this.context = context;
        mListener = listener;
        mInitialColor = initialColor;
        this.title = title;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        WindowManager manager = getWindow().getWindowManager();
        int height = (int) (manager.getDefaultDisplay().getHeight() * 0.5f);
        int width = (int) (manager.getDefaultDisplay().getWidth() * 0.7f);
        LinearLayout linearLayout = new LinearLayout(context);
        linearLayout.setOrientation(LinearLayout.VERTICAL);
        ColorPickerView myView = new ColorPickerView(context, height, width);
        linearLayout.setGravity(Gravity.CENTER);
        linearLayout.addView(myView);
        setContentView(linearLayout);
    }

    private class ColorPickerView extends View {
        private Paint mPaint;//渐变色环画笔
        private Paint mCenterPaint;//中间圆画笔
        private Paint mCenterPaintMove;//移动圆画笔
        private Paint mLinePaint;//分隔线画笔
        private Paint mRectPaint;//渐变方块画笔

        private Shader rectShader;//渐变方块渐变图像
        private float rectLeft;//渐变方块左x坐标
        private float rectTop;//渐变方块右x坐标
        private float rectRight;//渐变方块上y坐标
        private float rectBottom;//渐变方块下y坐标

        /private float lineX;//渐变方块左x坐标
        /private float lineTop;//渐变方块右x坐标
        /private float lineBottom;//渐变方块下y坐标

        private final int[] mCircleColors;//渐变色环颜色
        private final int[] mRectColors;//渐变方块颜色

        private int mHeight;//View高
        private int mWidth;//View宽
        private float r;//色环半径(paint中部)
        private float centerRadius;//中心圆半径
        private float moveX;//移动圆X
        private float moveY;//移动圆Y

        private boolean downInCircle = true;//按在渐变环上
        private boolean downInRect;//按在渐变方块上
        private boolean highlightCenter;//高亮
        private boolean highlightCenterLittle;//微亮
        private boolean showMinCircle = false;//微亮

        public ColorPickerView(Context context, int height, int width) {
            super(context);
            this.mHeight = height - 36;
            this.mWidth = width;
            setMinimumHeight(mHeight - 36);
            setMinimumWidth(mWidth);

            //渐变色环参数
            mCircleColors = new int[]{0xFFFF0000, 0xFFFF00FF, 0xFF0000FF,
                    0xFF00FFFF, 0xFF00FF00, 0xFFFFFF00, 0xFFFF0000};
            Shader s = new SweepGradient(0, 0, mCircleColors, null);
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setShader(s);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(50);
            r = mWidth / 2 * 0.7f - mPaint.getStrokeWidth() * 0.5f;
            moveX = 0;
            moveY = 0;

            //中心圆参数
            mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mCenterPaint.setTextSize(40);
            mCenterPaint.setColor(mInitialColor);
            mCenterPaint.setStrokeWidth(5);
            centerRadius = (r - mPaint.getStrokeWidth() / 2) * 0.7f;

            //移动圆参数
            mCenterPaintMove = new Paint(Paint.ANTI_ALIAS_FLAG);
            mCenterPaintMove.setColor(mInitialColor);
            mCenterPaintMove.setStrokeWidth(5);
            centerRadius = (r - mPaint.getStrokeWidth() / 2) * 0.7f;

            //边框参数
            mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mLinePaint.setColor(Color.parseColor("#72A1D1"));
            mLinePaint.setStrokeWidth(4);

            //黑白渐变参数
            mRectColors = new int[]{0xFF000000, mCenterPaint.getColor(), 0xFFFFFFFF};
            mRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mRectPaint.setStrokeWidth(5);
            rectLeft = -r - mPaint.getStrokeWidth() * 0.5f;
            rectTop = r + mPaint.getStrokeWidth() * 0.5f +
                    mLinePaint.getStrokeMiter() * 0.5f + 35;
            rectRight = r + mPaint.getStrokeWidth() * 0.5f;
            rectBottom = rectTop + 50;

            //标记线的位置
            /lineX = rectLeft + (rectRight - rectLeft) / 2;
            /lineTop = rectTop - 10;
            /lineBottom = rectBottom + 10;
        }

        @Override
        protected void onDraw(Canvas canvas) {
            //移动中心
            canvas.translate(mWidth / 2, mHeight / 2 - 50);
            //画中心圆
            canvas.drawCircle(0, 0, centerRadius, mCenterPaint);
            //是否显示中心圆外的小圆环
            if (highlightCenter || highlightCenterLittle) {
                int c = mCenterPaint.getColor();
                mCenterPaint.setStyle(Paint.Style.STROKE);
                if (highlightCenter) {
                    mCenterPaint.setAlpha(0xFF);
                } else if (highlightCenterLittle) {
                    mCenterPaint.setAlpha(0x90);
                }
                canvas.drawCircle(0, 0,
                        centerRadius + mCenterPaint.getStrokeWidth(), mCenterPaint);

                mCenterPaint.setStyle(Paint.Style.FILL);
                mCenterPaint.setColor(c);
                mCenterPaintMove.setStyle(Paint.Style.FILL);
                mCenterPaintMove.setColor(c);
            }

            //画标题使其居中
            mCenterPaint.setTextAlign(Paint.Align.CENTER);
            canvas.drawText(title, 0, -mHeight / 2 + 38 + 80, mCenterPaint);

            //画色环
            canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
            //移动的小圆点
            if (showMinCircle) {
                canvas.drawCircle(moveX, moveY, 50, mCenterPaintMove);
            }
            //画黑白渐变块
            if (downInCircle) {
                mRectColors[1] = mCenterPaint.getColor();
            }
            rectShader = new LinearGradient(rectLeft, 0, rectRight, 0, mRectColors, null, Shader.TileMode.MIRROR);
            mRectPaint.setShader(rectShader);
            canvas.drawRect(rectLeft, rectTop, rectRight, rectBottom, mRectPaint);
            float offset = mLinePaint.getStrokeWidth() / 2;
            canvas.drawLine(rectLeft - offset, rectTop - offset * 2,
                    rectLeft - offset, rectBottom + offset * 2, mLinePaint);//左
            canvas.drawLine(rectLeft - offset * 2, rectTop - offset,
                    rectRight + offset * 2, rectTop - offset, mLinePaint);//上
            canvas.drawLine(rectRight + offset, rectTop - offset * 2,
                    rectRight + offset, rectBottom + offset * 2, mLinePaint);//右
            canvas.drawLine(rectLeft - offset * 2, rectBottom + offset,
                    rectRight + offset * 2, rectBottom + offset, mLinePaint);//下

            ///实例化路径
            /Path path1 = new Path();
            /path1.moveTo(lineX, lineTop);
            /// 此点为多边形的起点
            /path1.lineTo(lineX + 10, lineTop - 10);
            /path1.lineTo(lineX - 10, lineTop -10);
            /path1.close();
            /// 使这些点构成封闭的多边形
            /canvas.drawPath(path1, mCenterPaint);
            ///实例化路径
            /Path path2 = new Path();
            /path2.moveTo(lineX, lineBottom);
            /// 此点为多边形的起点
            /path2.lineTo(lineX - 10, lineBottom + 10);
            /path2.lineTo(lineX + 10, lineBottom +10);
            /path2.close();
            /// 使这些点构成封闭的多边形
            /canvas.drawPath(path2, mCenterPaint);
//            canvas.drawLine(lineLeft, lineTop, lineRight, lineBottom, mCenterPaint);
            super.onDraw(canvas);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX() - mWidth / 2;
            float y = event.getY() - mHeight / 2 + 50;
            boolean inCircle = inColorCircle(x, y,
                    r + mPaint.getStrokeWidth() / 2, r - mPaint.getStrokeWidth() / 2);
            boolean inCenter = inCenter(x, y, centerRadius);
            boolean inRect = inRect(x, y);

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    downInCircle = inCircle;
                    if (downInCircle) showMinCircle = true;
                    downInRect = inRect;
                    highlightCenter = inCenter;
                case MotionEvent.ACTION_MOVE:
                    if (debug)
                        Log.v(TAG, "[MOVE] 高亮: " + highlightCenter + "微亮: " + highlightCenterLittle + " 中心: " + inCenter);
                    if (highlightCenter || highlightCenterLittle) {//点击中心圆, 当前移动在中心圆
                        highlightCenter = true;
                        highlightCenterLittle = false;
                        invalidate();
                        return true;
                    } else if (highlightCenter || highlightCenterLittle) {//点击在中心圆, 当前移出中心圆
                        highlightCenter = false;
                        highlightCenterLittle = true;
                    } else {
                        highlightCenter = false;
                        highlightCenterLittle = false;
                    }
                    if (downInRect) {//down在渐变方块内, 且move也在渐变方块内
                        /if (x>rectLeft&&x<rectRight) {
                        /    lineX = x;
                        /    mCenterPaint.setColor(interpRectColor(mRectColors, x));
                        /}
                    } else {
                        if (downInCircle) {
                            double bl = Math.sqrt(x * x + y * y) / r;
                            moveX = (float) (x / bl);
                            moveY = (float) (y / bl);
                            float angle = (float) Math.atan2(y, x);
                            float unit = (float) (angle / (2 * Math.PI));
                            if (unit < 0) {
                                unit += 1;
                            }
                            mCenterPaint.setColor(interpCircleColor(mCircleColors, unit));
                            mCenterPaintMove.setColor(interpCircleColor(mCircleColors, unit));
                            if (debug) Log.v(TAG, "色环内, 坐标: " + x + "," + y);

                            ///重新还原位置
                            /lineX = rectLeft + (rectRight - rectLeft) / 2;
                            /lineTop = rectTop - 10;
                            /lineBottom = rectBottom + 10;
                        }
                    }
                    invalidate();
                    break;
                case MotionEvent.ACTION_UP:
                    if (highlightCenter && inCenter) {//点击在中心圆, 且当前启动在中心圆
                        if (mListener != null) {
                            mListener.colorChanged(mCenterPaint.getColor());
                            MyCircle.this.dismiss();
                        }
                    }
                    if (downInCircle) {
                        downInCircle = false;
                    }
                    if (downInRect) {
                        downInRect = false;
                    }
                    if (highlightCenter) {
                        highlightCenter = false;
                    }
                    if (highlightCenterLittle) {
                        highlightCenterLittle = false;
                    }
                    invalidate();
                    break;
            }
            return true;
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            Log.i("tagcs", getWidth() + "-*-" + mWidth);
            super.onMeasure(getWidth(), mHeight);
        }

        /**
         * 坐标是否在色环上
         *
         * @param x         坐标
         * @param y         坐标
         * @param outRadius 色环外半径
         * @param inRadius  色环内半径
         * @return
         */
        private boolean inColorCircle(float x, float y, float outRadius, float inRadius) {
            double outCircle = Math.PI * outRadius * outRadius;
            double inCircle = Math.PI * inRadius * inRadius;
            double fingerCircle = Math.PI * (x * x + y * y);
            if (fingerCircle < outCircle && fingerCircle > inCircle) {
                return true;
            } else {
                return false;
            }
        }

        /**
         * 坐标是否在中心圆上
         *
         * @param x            坐标
         * @param y            坐标
         * @param centerRadius 圆半径
         * @return
         */
        private boolean inCenter(float x, float y, float centerRadius) {
            double centerCircle = Math.PI * centerRadius * centerRadius;
            double fingerCircle = Math.PI * (x * x + y * y);
            if (fingerCircle < centerCircle) {
                return true;
            } else {
                return false;
            }
        }

        /**
         * 坐标是否在渐变色中
         *
         * @param x
         * @param y
         * @return
         */
        private boolean inRect(float x, float y) {
            if (x <= rectRight && x >= rectLeft && y <= rectBottom && y >= rectTop) {
                return true;
            } else {
                return false;
            }
        }

        /**
         * 获取圆环上颜色
         *
         * @param colors
         * @param unit
         * @return
         */
        private int interpCircleColor(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);
        }

        /**
         * 获取渐变块上颜色
         *
         * @param colors
         * @param x
         * @return
         */
        private int interpRectColor(int colors[], float x) {
            int a, r, g, b, c0, c1;
            float p;
            if (x < 0) {
                c0 = colors[0];
                c1 = colors[1];
                p = (x + rectRight) / rectRight;
            } else {
                c0 = colors[1];
                c1 = colors[2];
                p = x / rectRight;
            }
            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);
            return Color.argb(a, r, g, b);
        }

        private int ave(int s, int d, float p) {
            return s + Math.round(p * (d - s));
        }
    }

    /**
     * 回调接口
     *
     * @author <a href="clarkamx@gmail.com">LynK</a>
     *         <p>
     *         Create on 2012-1-6 上午8:21:05
     */
    public interface OnColorChangedListener {
        /**
         * 回调函数
         *
         * @param color 选中的颜色
         */
        void colorChanged(int color);
    }

    public int getmInitialColor() {
        return mInitialColor;
    }

    public void setmInitialColor(int mInitialColor) {
        this.mInitialColor = mInitialColor;
    }

    public OnColorChangedListener getmListener() {
        return mListener;
    }

    public void setmListener(OnColorChangedListener mListener) {
        this.mListener = mListener;
    }
}

可直接以构造来使用，有回调传出选择的颜色，相信这个就不用附上代码了，使用很方便。