颜色选择器

简介

基于SeekBar控件打造自定义颜色选择器，可以选择黑、白、赤、橙、黄、绿、青、蓝、紫以及它们之间的颜色，废话不多说，先上图

原理

通过设置SeekBar的setProgressDrawable方法将颜色值与拖动条绑定，再监听setOnSeekBarChangeListener实时获取颜色值，部分代码如下

xml中定义seekbar

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <SeekBar
        android:id="@+id/sb_color"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:max="100"
        android:maxHeight="3dp"
        />

    <com.lonelypluto.colorpickerdemo.ColorSizePreView
        android:id="@+id/colorsizepreview"
        android:layout_width="@dimen/color_size_preview_width"
        android:layout_height="@dimen/color_size_preview_height"
        />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="选择的颜色"
        android:textSize="20sp"
        />
</LinearLayout>

activity中

public class MainActivity extends AppCompatActivity {
    private static final String TAG = MainActivity.class.getSimpleName();
    private SeekBar sb_colorPicker;// 拖动条
    private ColorSizePreView colorSizePreView;// 预览图
    private TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView(){

        sb_colorPicker = (SeekBar)findViewById(R.id.sb_color);
        //设置初始值
        sb_colorPicker.setProgress(10);
        Drawable thumb = sb_colorPicker.getThumb();
        thumb.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);

        colorSizePreView = (ColorSizePreView)findViewById(R.id.colorsizepreview);
        tv = (TextView)findViewById(R.id.tv);

        // seekbar拖动监听事件
        sb_colorPicker.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                float radio = (float) progress / sb_colorPicker.getMax();

                int mColor = ColorPickerGradientUtil.getColor(radio);
                // 设置文字颜色
                tv.setTextColor(Color.parseColor("#"+ColorPickerGradientUtil.getHexString(mColor)));
                // 设置拖动按钮随颜色的改变而改变
                Drawable thumb = sb_colorPicker.getThumb();
                thumb.setColorFilter(mColor, PorterDuff.Mode.SRC_IN);
                // 设置预览view颜色
                colorSizePreView.setPaintColor(mColor);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        ShapeDrawable.ShaderFactory shaderFactory = new ShapeDrawable.ShaderFactory() {
            @Override
            public Shader resize(int width, int height) {
                LinearGradient linearGradient = new LinearGradient(0, 0, width, height,
                        ColorPickerGradientUtil.PICKCOLORBAR_COLORS, ColorPickerGradientUtil.PICKCOLORBAR_POSITIONS, Shader.TileMode.REPEAT);
                return linearGradient;
            }
        };

        PaintDrawable paint = new PaintDrawable();
        paint.setShape(new RectShape());
        paint.setCornerRadius(10);
        paint.setShaderFactory(shaderFactory);
        sb_colorPicker.setProgressDrawable(paint);
    }
}

工具类

public class ColorPickerGradientUtil {
    //设置的颜色
    public static final int[] PICKCOLORBAR_COLORS = new int[]{0xFFFFFFFF,0xFFFF3030, 0xFFF4A460,
            0xFFFFFF00, 0xFF66CD00,
            0xFF458B00, 0xFF0000EE,
            0xFF912CEE,0xFF000000};
    //每个颜色的位置
    public static final float[] PICKCOLORBAR_POSITIONS = new float[]{0f, 0.1f, 0.2f, 0.3f, 0.5f, 0.65f,0.8f,0.9f,1f};

    private static int[] mColorArr = PICKCOLORBAR_COLORS;
    private static float[] mColorPosition = PICKCOLORBAR_POSITIONS;

    public ColorPickerGradientUtil(int[] colorArr) {
        this.mColorArr = colorArr;
    }

    public ColorPickerGradientUtil() {
    }

    /**
     * 获取某个百分比位置的颜色
     * @param radio 取值[0,1]
     * @return
     */
    public static int getColor(float radio) {
        int startColor;
        int endColor;
        if (radio >= 1) {
            return mColorArr[mColorArr.length - 1];
        }
        for (int i = 0; i < mColorPosition.length; i++) {
            if (radio <= mColorPosition[i]) {
                if (i == 0) {
                    return mColorArr[0];
                }
                startColor = mColorArr[i - 1];
                endColor = mColorArr[i];
                float areaRadio = getAreaRadio(radio,mColorPosition[i-1],mColorPosition[i]);
                return getColorFrom(startColor,endColor,areaRadio);
            }
        }
        return -1;
    }

    private static float getAreaRadio(float radio, float startPosition, float endPosition) {
        return (radio - startPosition) / (endPosition - startPosition);
    }

    /**
     *  取两个颜色间的渐变区间 中的某一点的颜色
     * @param startColor
     * @param endColor
     * @param radio
     * @return
     */
    private static int getColorFrom(int startColor, int endColor, float radio) {
        int redStart = Color.red(startColor);
        int blueStart = Color.blue(startColor);
        int greenStart = Color.green(startColor);
        int redEnd = Color.red(endColor);
        int blueEnd = Color.blue(endColor);
        int greenEnd = Color.green(endColor);

        int red = (int) (redStart + ((redEnd - redStart) * radio + 0.5));
        int greed = (int) (greenStart + ((greenEnd - greenStart) * radio + 0.5));
        int blue = (int) (blueStart + ((blueEnd - blueStart) * radio + 0.5));
        return Color.argb(255, red, greed, blue);
    }
    /**
     * 将十进制颜色值转换成十六进制。
     */
    public static String getHexString(int value) {
        String hexString = Integer.toHexString(value);
        if (hexString.length() == 1) {
            hexString = "0" + hexString;
        }
        return hexString;
    }
}

预览view

public class ColorSizePreView extends View {

	private int viewWidth;
	private int viewHeigt;
	private int size = 20;// 大小
	private Paint mPaint;// 画笔

	public ColorSizePreView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		mPaint.setColor(Color.RED);

		viewWidth = (int) getResources()
				.getDimension(R.dimen.color_size_preview_width);
		viewHeigt = (int) getResources().getDimension(
				R.dimen.color_size_preview_height);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		// 绘制成一个圆
		canvas.drawCircle(viewWidth / 2, viewHeigt / 2, size, mPaint);
	}

	/**
	 * 设置view的颜色
	 * @param color
	 */
	public void setPaintColor(int color) {
		mPaint.setColor(color);
		invalidate();
	}

没什么复杂的代码，附上了一些注释，上面可直接复制粘贴，也可直接下载demo
下载地址：ColorPickerDemo
github地址：ColorPickerDemo