一个不错效果的调光调色开关

　　先上效果图:

　　不错吧，最中间那个开关是个CheckBox，中间那个蓝色的是个圆形的拖动条，可以用来显示灯的亮度，而最外面的彩色环形也是可以拖动的，可以用来控制色彩。

　　彩色环形是自定义View——CirclView，onTouch事件计算如旋转的角度，然后旋转画布，那个环形是UI素材。代码如下：

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CircleView extends View {
    public static final int INVALID_ANGLE = Integer.MIN_VALUE;

    private float lastX;                                    //起始X坐标
    private float lastY;                                    //起始Y坐标

    private float centerX;                                    //圆心X坐标
    private float centerY;                                    //圆心Y坐标

    double oldAngle;                                        //旋转前角度
    double angle;                                            //旋转后角度

    private Drawable rotatedPicture;                        //要旋转的背景图片
    private Bitmap rotatedBitmap;
    private float ringRatio;

    private int maxAngle = INVALID_ANGLE;
    private int minAngle = INVALID_ANGLE;

    private OnAngleChangedListener anglelistener;
    private OnColorChangedListener colorListener;

    public CircleView(Context context) {
        this(context, null);
    }

    public CircleView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    /**
     * 
     * @param lastPointX 一次ActionMove的起始X坐标
     * @param lastPointY 一次ActionMove的起始Y坐标
     * @param pointX 一次ActionMove的终止X坐标
     * @param pointY 一次ActionMove的终止Y坐标
     * @return 返回一次ActionMove转过的角度
     */
    private double computeAngle(float lastPointX, float lastPointY, float pointX, float pointY) {
        //坐标系换算，原坐标系为以屏幕左上角为原点的直角坐标系，新坐标系为以圆心位置(centerX,centerY)为原点的直角坐标系
        //没有delta前缀的都是原坐标系的值，delta前缀标识的为换算后新坐标系的值
        float deltaLastPointX = lastPointX - centerX;
        float deltaLastPointY = centerY - lastPointY;

        float deltaPointX = pointX - centerX;
        float deltaPointY = centerY - pointY;

        //gradient表示斜率，如果deltaPonitX的值为零，则gradient为无穷大，否则为deltaPointY / deltaPointX
        float gradient = deltaPointX != 0 ? deltaPointY / deltaPointX : Integer.MAX_VALUE;
        float lastGradient = deltaLastPointX != 0 ? deltaLastPointY / deltaLastPointX : Integer.MAX_VALUE;
        //如果斜率相同，则返回0
        if (gradient == lastGradient)
            return 0;

        //lastPointSidePow,pointSidePow表示对应点到圆心的距离平方
        float lastPointSidePow = deltaLastPointX * deltaLastPointX + deltaLastPointY * deltaLastPointY;
        float pointSidePow = deltaPointX * deltaPointX + deltaPointY * deltaPointY;
        //两点之间距离的平方
        float lastPointPointSidePow = (float) (Math.pow(deltaLastPointY - deltaPointY, 2) + Math.pow(deltaLastPointX
                - deltaPointX, 2));
        //下面使用余弦定理求出一次ActionMove所经过角度的余弦值
        //余弦定理：cosC = (a^2 + b^2 - c^2) / (2·a·b)
        double cosinCentralAngle = (lastPointSidePow + pointSidePow - lastPointPointSidePow)
                / (2 * Math.sqrt(lastPointSidePow) * Math.sqrt(pointSidePow));
        if (cosinCentralAngle > 1 || cosinCentralAngle < -1)
            return 0;
        //反余弦：把余弦值换算成对应弧度
        double acos = Math.acos(cosinCentralAngle);
        //弧度角度换算：把弧度换算成对应角度
        double increment = (acos / Math.PI) * 180;
        //isBellow判断一次ActionMove之后斜率值是否降低
        boolean isBellow = lastGradient > gradient;
        //如果斜率降低
        if (isBellow) {
            //如果ActionMove之前在第一、四象限
            if (deltaLastPointX >= 0) {
                //如果ActionMove之后也在第一、四象限，则旋转的方向为逆时针，角度应为正值
                if (deltaPointX >= 0) {
                    return increment;
                //如果ActionMove之后在第二、三象限，则旋转的方向为顺时针，角度为负值
                } else {
                    return -increment;
                }
            //如果ActionMove之前在第二、三象限
            } else {
                //如果ActionMove之后也在第二、三象限，则旋转的方向为逆时针，角度应为正值
                if (deltaPointX <= 0) {
                    return increment;
                //如果ActionMove之后在第一、四象限，则旋转的方向为顺时针，角度为负值
                } else {
                    return -increment;
                }
            }
        } else {
            if (deltaLastPointX >= 0) {
                if (deltaPointX >= 0) {
                    return -increment;
                } else {
                    return increment;
                }
            } else {
                if (deltaPointX <= 0) {
                    return -increment;
                } else {
                    return increment;
                }
            }
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        centerX = w / 2.0f;
        centerY = h / 2.0f;
        rotatedPicture.setBounds(0, 0, w, h);
        rotatedBitmap = ((BitmapDrawable) rotatedPicture).getBitmap();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();
        canvas.rotate((float) angle, centerX, centerY);
        rotatedPicture.draw(canvas);
        canvas.restore();
    }

    public boolean isHit(int x, int y) {
        //getPixel(x, y)方法返回(x,y)坐标位置的像素颜色信息
        //x,y的取值范围分别为(0...width-1)、(0...height-1)，如果超出取值范围则会抛出异常
        //方法返回值为
        return (rotatedBitmap.getPixel(x, y) & 0xFF000000) != 0;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        final float nowX = event.getX();
        final float nowY = event.getY();

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            if (!isHit((int) nowX, (int) nowY))
                return false;
            lastX = nowX;
            lastY = nowY;
            oldAngle = angle;
            break;
        case MotionEvent.ACTION_MOVE:
            double increment = computeAngle(lastX, lastY, nowX, nowY);
            if (increment != 0) {
                angle += increment;
                if (maxAngle != INVALID_ANGLE && angle > maxAngle) {
                    angle = maxAngle;
                } else if (minAngle != INVALID_ANGLE && angle < minAngle) {
                    angle = minAngle;
                }
                invalidate();
            }
            lastX = nowX;
            lastY = nowY;
            break;
        case MotionEvent.ACTION_UP:
            if (anglelistener != null) {
                anglelistener.onAngleChanged(oldAngle, angle);
            }
            if (colorListener != null && ringRatio != 0) {
                int width = getWidth();
                int r = (int) (width / 2 - ringRatio * width / 4);
                int x = 0;
                int y = 0;
                double radian = (-angle % 360) * Math.PI / 180;
                x = (int) (width / 2 + r * Math.sin(radian));
                y = (int) (width / 2 - r * Math.cos(radian));
                int color = rotatedBitmap.getPixel(x, y);
                colorListener.onColorChanged(Color.red(color), Color.green(color), Color.blue(color));
            }
            invalidate();
            break;
        }

        return true;
    }

    public static interface OnAngleChangedListener {
        public void onAngleChanged(double oldAngle, double newAngle);
    }

    public static interface OnColorChangedListener {
        public void onColorChanged(int red, int green, int blue);
    }

    public void OnAngleChangedListener(OnAngleChangedListener listener) {
        this.anglelistener = listener;
    }

    public void setOnColorChangedListener(OnColorChangedListener listener) {
        this.colorListener = listener;
    }

    public void setRotateDrawable(Drawable rotatedPicture, float ringRatio) {
        this.rotatedPicture = rotatedPicture;
        this.ringRatio = ringRatio;
    }

    public void setRotateDrawable(Drawable rotatedPicture) {
        this.rotatedPicture = rotatedPicture;
    }

    public void setMaxRotatedAngle(int maxAngle) {
        this.maxAngle = maxAngle;
    }

    public void setMinRotatedAngle(int minAngle) {
        this.minAngle = minAngle;
    }

    public void setAngle(double angle) {
        this.angle = angle;
        postInvalidate();
    }

    protected double getAngle() {
        return angle;
    }
}

　　那个圆形拖动条则继承自CircleView，然后重写onDraw方法绘制进度。代码如下：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Paint.Cap;
import android.graphics.Paint.Style;
import android.util.AttributeSet;

public class ProgressCircleView extends CircleView {
    private int progressBackground;
    private int progress;

    private RectF progressRectF;
    private int progressBgWidth, progressWidth;
    private Paint progressBgPaint;
    private Paint progressPaint;

    public ProgressCircleView(Context context) {
        this(context, null);
    }

    public ProgressCircleView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ProgressCircleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        super.setMaxRotatedAngle(360);
        super.setMinRotatedAngle(0);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        int offset = progressWidth / 2 + 1;
        progressRectF = new RectF(offset, offset, w - offset, h - offset);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // draw bg
        canvas.drawArc(progressRectF, 0, 360, false, progressBgPaint);
        // draw arc
        canvas.drawArc(progressRectF, -90, (float) getAngle(), false, progressPaint);
    }

    public void setProgressBackground(int width, int color) {
        int widthDp = (int) (width * getResources().getDisplayMetrics().density);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setAlpha(0xff);
        paint.setStrokeWidth(widthDp);
        paint.setStyle(Style.STROKE);
        paint.setColor(color);
        progressBgWidth = widthDp;
        progressBgPaint = paint;
    }

    public void setProgress(int width, int color) {
        int widthDp = (int) (width * getResources().getDisplayMetrics().density);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setAlpha(0xff);
        paint.setStrokeWidth(widthDp);
        paint.setStyle(Style.STROKE);
        paint.setColor(color);
        paint.setStrokeCap(Cap.ROUND);
        progressWidth = widthDp;
        progressPaint = paint;
    }

}

　　简单使用的Activity：

public class MainActivity extends Activity {

    private double oldAngle;
    boolean isClicked;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.color_light_control_panel);

        CircleView cv = (CircleView) findViewById(R.id.colorCircle);
        cv.setRotateDrawable(getResources().getDrawable(R.drawable.color_light_color_circle), 0.15f);
        cv.setOnColorChangedListener(new OnColorChangedListener() {

            @Override
            public void onColorChanged(int red, int green, int blue) {
                Log.d("onColorChanged", red + " " + green + " " + blue + " ");

            }
        });
        // cv.setMaxRotatedAngle(360);
        // cv.setMinRotatedAngle(0);
        final ProgressCircleView pcv = (ProgressCircleView) findViewById(R.id.progress);
        pcv.setRotateDrawable(getResources().getDrawable(R.drawable.color_light_progress));
        pcv.setProgress(10, 0xFF32CFEB);
        pcv.setProgressBackground(10, 0xFF3A3A3A);

        pcv.OnAngleChangedListener(new OnAngleChangedListener() {

            @Override
            public void onAngleChanged(double oldAngle, double newAngle) {
                Log.d("angle=", "oldAngle=" + oldAngle + " newAngle=" + newAngle);
                MainActivity.this.oldAngle = oldAngle;
            }
        });

        View btn = findViewById(R.id.switch_btn);
        btn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                pcv.setAngle(oldAngle);
            }
        });
    }
}

 　　最后是布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff000000" >

    <com.example.test2.CircleView
        android:id="@+id/colorCircle"
        android:layout_width="242dp"
        android:layout_height="242dp"
        android:layout_centerInParent="true" >
    </com.example.test2.CircleView>

    <com.example.test2.ProgressCircleView
        android:id="@+id/progress"
        android:layout_width="164dp"
        android:layout_height="164dp"
        android:layout_centerInParent="true" >
    </com.example.test2.ProgressCircleView>

    <View
        android:id="@+id/switch_btn"
        android:layout_width="61dp"
        android:layout_height="61dp"
        android:background="@drawable/color_light_switch_on"
        android:layout_centerInParent="true" >
    </View>

</RelativeLayout>