颜色选择器

颜色选择器

最近公司要做一个app控制灯的颜色的app。网上已经有很多选择器了。我这里整理了一下自己做的选择器，分圆形颜色选择器和环形颜色选择器。ColorWheelPicker和 CircleColorPicke

环形颜色选择器

package com.qiaotong.colorpicker.widget;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class WheelColorPicker extends View {
    private Paint colorRingPaint;
    private Paint centerCirclePaint;
    private Paint selectorPaint;

    private float ringWidth;
    private int[] colors;
    private float selectorPosition;
    private OnColorChangedListener listener;

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

    public WheelColorPicker(Context context) {
        super(context);
        init();
    }

    public WheelColorPicker(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // 初始化颜色环的颜色（HSV色相环）
        colors = new int[360];
        for (int i = 0; i < 360; i++) {
            colors[i] = Color.HSVToColor(new float[]{i, 1f, 1f});
        }

        // 颜色环画笔
        colorRingPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        colorRingPaint.setStyle(Paint.Style.STROKE);
        colorRingPaint.setStrokeCap(Paint.Cap.ROUND);

        // 中心圆画笔
        centerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        centerCirclePaint.setStyle(Paint.Style.FILL);
        centerCirclePaint.setColor(Color.RED); // 默认颜色

        // 选择器画笔
        selectorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        selectorPaint.setStyle(Paint.Style.FILL);
        selectorPaint.setColor(Color.WHITE);
        selectorPaint.setStrokeWidth(2);
        selectorPaint.setStyle(Paint.Style.STROKE);

        ringWidth = dpToPx(20); // 环的宽度
        selectorPosition = 0; // 默认在0度位置
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int centerX = getWidth() / 2;
        int centerY = getHeight() / 2;
        ringWidth = (float) centerX /2;

        int radius = Math.min(centerX, centerY) - (int) (ringWidth / 2);

        // 绘制颜色环
        drawColorRing(canvas, centerX, centerY, radius);

        // 绘制中心圆
//        drawCenterCircle(canvas, centerX, centerY, (int)(radius - ringWidth));
        drawCenterCircle(canvas, centerX, centerY, radius/3);

        // 绘制选择器
        drawSelector(canvas, centerX, centerY, radius);
    }

    private void drawColorRing(Canvas canvas, int centerX, int centerY, int radius) {
        RectF rectF = new RectF(centerX - radius, centerY - radius,
                centerX + radius, centerY + radius);

        // 使用SweepGradient创建渐变色环
        SweepGradient sweepGradient = new SweepGradient(centerX, centerY, colors, null);
        colorRingPaint.setShader(sweepGradient);
        colorRingPaint.setStrokeWidth(ringWidth);

        canvas.drawArc(rectF, 0, 360, false, colorRingPaint);
    }

    private void drawCenterCircle(Canvas canvas, int centerX, int centerY, int radius) {
        canvas.drawCircle(centerX, centerY, radius, centerCirclePaint);
    }

    private void drawSelector(Canvas canvas, int centerX, int centerY, int radius) {
        float angle = (float) Math.toRadians(selectorPosition);
        float selectorX = centerX + (radius) * (float) Math.cos(angle);
        float selectorY = centerY + (radius) * (float) Math.sin(angle);

        canvas.drawCircle(selectorX, selectorY, ringWidth / 6, selectorPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                updateColor(event.getX(), event.getY());
                return true;
        }
        return super.onTouchEvent(event);
    }

    private void updateColor(float x, float y) {
        int centerX = getWidth() / 2;
        int centerY = getHeight() / 2;

        // 计算触摸点相对于中心的角度
        double angle = Math.atan2(y - centerY, x - centerX);
        float degree = (float) Math.toDegrees(angle);
        if (degree < 0) {
            degree += 360;
        }

        selectorPosition = degree;

        // 更新中心圆颜色
        int selectedColor = getColorAtAngle(degree);
        centerCirclePaint.setColor(selectedColor);

        // 回调监听器
        if (listener != null) {
            listener.onColorChanged(selectedColor);
        }

        invalidate();
    }

    private int getColorAtAngle(float degree) {
        int index = (int) (degree * colors.length / 360) % colors.length;
        return colors[index];
    }

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

    public int getSelectedColor() {
        return centerCirclePaint.getColor();
    }

    public void setSelectedColor(int color) {
        centerCirclePaint.setColor(color);
        invalidate();
    }

    private float dpToPx(float dp) {
        return dp * getResources().getDisplayMetrics().density;
    }
}

圆形颜色选择器

/*
 * Copyright (C) 2019 Cricin
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.qiaotong.colorpicker.widget.colorpicker;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.ColorInt;
import androidx.annotation.Nullable;

import com.qiaotong.colorpicker.R;


public class CircleColorPicker extends View {
  private static final int[] COLORS = {
    Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN,
    Color.BLUE, Color.MAGENTA, Color.RED
  };

  private static final int DEFAULT_CIRCLE_RADIUS = 160;//dp

  private Paint mPaint;

  private ThumbDrawable mThumb;
  private int mThumbRadius;

  //first element is also the degree, X coordinate is left to right, Y coordinate is top to bottom
  private float[] mColorHSV = {0.0F, 1.0F, 1.0F};
  private OnValueChangeListener mListener;

  private int mRadius;//radius of circle
  private int mDistance;

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

  public CircleColorPicker(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    final int desiredRadius = (int) (context.getResources().getDisplayMetrics().density * DEFAULT_CIRCLE_RADIUS + 0.5);
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleColorPicker);
    mRadius = (int) a.getDimension(R.styleable.CircleColorPicker_radius, desiredRadius);
    a.recycle();
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mThumb = new ThumbDrawable(context);
    mThumbRadius = mThumb.getIntrinsicWidth() / 2;
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    final int mySize = mThumbRadius * 2 + mRadius;
    setMeasuredDimension(resolveSize(mySize, widthMeasureSpec),
      resolveSize(mySize, heightMeasureSpec));
  }

  @Override
  protected void onDraw(Canvas canvas) {
    //draw gradient circle
    final int viewCenterX = getWidth() / 2;
    final int viewCenterY = getHeight() / 2;
   /// final int radius = Math.min(viewCenterX, viewCenterY) - 0*mThumbRadius;
    final int radius = Math.min(viewCenterX, viewCenterY) ;
    canvas.drawCircle(viewCenterX, viewCenterY, radius, mPaint);

    //draw thumb
    canvas.save();
    canvas.translate(viewCenterX, viewCenterY);
    final int len = mDistance;
    canvas.rotate(mColorHSV[0]);
    mThumb.setBounds(len - mThumbRadius, mThumbRadius, len + mThumbRadius, -mThumbRadius);
    mThumb.draw(canvas);
    canvas.restore();
  }

  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    mRadius = Math.min(getWidth(), getHeight()) / 2 - mThumbRadius;
    SweepGradient sg = new SweepGradient(w / 2, h / 2, COLORS, null);
    mPaint.setShader(sg);
    mDistance = mRadius;
  }

  @Override
  protected void drawableStateChanged() {
    super.drawableStateChanged();
    if (mThumb.isStateful()) {
      boolean changed = mThumb.setState(getDrawableState());
      if (changed) {
        invalidate();
      }
    }
  }

  @SuppressLint("ClickableViewAccessibility")
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    int action = event.getActionMasked();
    final int x = (int) event.getX();
    final int y = (int) event.getY();
    switch (action) {
      case MotionEvent.ACTION_DOWN:
        setPressed(true);
//        break;
      case MotionEvent.ACTION_MOVE:
        getParent().requestDisallowInterceptTouchEvent(true);
        mDistance = Math.min(mRadius, distance(x, y, getWidth() / 2, getHeight() / 2));
        mColorHSV[0] = calculateDegree(getWidth(), getHeight(), x, y);
        invalidate();
//        Log.i("gao","R = "+mColorHSV[0]+" G = "+mColorHSV[1]+" B = "+mColorHSV[2]);
        if (mListener != null) mListener.onValueChanged(this, Color.HSVToColor(mColorHSV));
        break;
      case MotionEvent.ACTION_UP:
      case MotionEvent.ACTION_CANCEL:
        setPressed(false);
        invalidate();
    }
    return true;
  }

  public void setOnValueChangeListener(OnValueChangeListener listener) {
    this.mListener = listener;
  }

  /**
   * Get color in this ColorPicker, note this color is opaque(alpha channel is 0xFF).
   */
  @ColorInt
  public int getColor() {
    return Color.HSVToColor(mColorHSV);
  }

  /**
   * Set a new color to this ColorPicker, note this color will be convert to
   * opaque if the color's alpha channel is not 0xFF
   */
  public void setColor(@ColorInt int color) {
    Color.colorToHSV(color, mColorHSV);
    mColorHSV[1] = 1F;
    mColorHSV[2] = 1F;
    invalidate();
  }

  private static int distance(int x0, int y0, int x1, int y1) {
    final int xLen = x0 - x1;
    final int yLen = y0 - y1;
    return (int) Math.sqrt(xLen * xLen + yLen * yLen);
  }

  private static float calculateDegree(int w, int h, int x, int y) {
    final int centerX = w / 2;
    final int centerY = h / 2;
    double theta = Math.atan2(x - centerX, y - centerY);
    float degree = (float) (Math.toDegrees(theta) - 90);
    if (degree > 0) degree = 360 - degree;
    return Math.abs(degree);
  }
}

需要资源的可以去下载：下载地址