ImageView 实现Android colorPikcer 选择器

Android colorPikcer 选择器

color_picker.gif

环形的ColorPicker，主要思路是:

1. Color 选在放在ImageView 的background上面，根据点击的位置判断选择的颜色。
2. 重写onTouch，在onTouch 里面判断点击点的颜色。
3. 根据当前选择的颜色设置图片的src.

获取Bitmap

在 ColorPickerView 构造函数中初始化 Bitmap。因为getBackground有多种drawable，然后获取Bitmap 的方式也不用，

void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr){
        Drawable drawable = getBackground();
        if(drawable instanceof BitmapDrawable){
            mBitmap = ((BitmapDrawable) drawable).getBitmap();
        } else if(drawable instanceof VectorDrawable){
            mBitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
            Canvas vectorCanvas = new Canvas(mBitmap);
            drawable.setBounds(0, 0, vectorCanvas.getWidth(), vectorCanvas.getHeight());
            drawable.draw(vectorCanvas);
        }

重写onTouch

根据Touch 事件的左边获取 Bitmap 对应点的颜色。
需要注意的是如果 View 的宽和高参数是 wrap_content, MotionEvent 的点击的点一定在Bitmap 的坐标内。但是如果不是wrap_content， 需要对坐标转换，利用矩阵Matrix 对点击点转换。

public boolean onTouch(View v, MotionEvent event) {

        if (event.getAction() == MotionEvent.ACTION_DOWN && mBitmap != null) {
    
            float scaleX = mBitmap.getWidth()*1.0f/v.getWidth();
            float scaleY = mBitmap.getHeight()*1.0f/v.getHeight();

            float[] touchPoint = new float[] { event.getX(), event.getY() };
            Matrix matrix = new Matrix();
            matrix.setScale(scaleX, scaleY);
            matrix.mapPoints(touchPoint);

            mSelectColor = mBitmap.getPixel((int) touchPoint[0], (int) touchPoint[1]);
        }

        return false;
    }

完整的代码：

public class ColorPickerView extends android.support.v7.widget.AppCompatImageView implements View.OnTouchListener{

    private Bitmap mBitmap;
    private int mSelectColor = -1;
    private int mIndex = -1;
    private int[] mDrawableSelects;
    private int[] mColorArray;

    private OnColorSelectedListener mOnColorSelectedListener;


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

    public ColorPickerView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ColorPickerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr){
        Drawable drawable = getBackground();
        if(drawable instanceof BitmapDrawable){
            mBitmap = ((BitmapDrawable) drawable).getBitmap();
        } else if(drawable instanceof VectorDrawable){
            mBitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
            Canvas vectorCanvas = new Canvas(mBitmap);
            drawable.setBounds(0, 0, vectorCanvas.getWidth(), vectorCanvas.getHeight());
            drawable.draw(vectorCanvas);
        }

        TypedArray resTypeArray = context.obtainStyledAttributes(attrs, R.styleable.ColorPickerView);
        int colorPickerArrayId = resTypeArray.getResourceId(R.styleable.ColorPickerView_cp_selected_drawable_array, 0);
        resTypeArray.recycle();

        if (colorPickerArrayId != 0) {
            TypedArray typeArray = getResources().obtainTypedArray(colorPickerArrayId);
            mDrawableSelects = new int[typeArray.length()];
            for (int i = 0; i < typeArray.length(); i++) {
                mDrawableSelects[i] = typeArray.getResourceId(i, 0);
            }
            typeArray.recycle();
        }

        setOnTouchListener(this);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {

        if (event.getAction() == MotionEvent.ACTION_DOWN && mBitmap != null) {
            if(event.getX() > v.getWidth() || event.getX() < 0){
                return false;
            }

            if(event.getY() > v.getHeight() || event.getY() < 0){
                return false;
            }

            float scaleX = mBitmap.getWidth()*1.0f/v.getWidth();
            float scaleY = mBitmap.getHeight()*1.0f/v.getHeight();

            float[] touchPoint = new float[] { event.getX(), event.getY() };
            Matrix matrix = new Matrix();
            matrix.setScale(scaleX, scaleY);
            matrix.mapPoints(touchPoint);

            mSelectColor = mBitmap.getPixel((int) touchPoint[0], (int) touchPoint[1]);
            mIndex = getColorIndex(mSelectColor);

            if(mDrawableSelects.length > 0 && mIndex >=0 && mIndex < mDrawableSelects.length) {
                ((ImageView) v).setImageResource(mDrawableSelects[mIndex]);
            }

            if(mOnColorSelectedListener != null){
                mOnColorSelectedListener.onColorSelected(mIndex, mSelectColor);
            }
        }

        return false;
    }

    private int getColorIndex(int color){

        for (int i = 0 ; i < mColorArray.length; i++){
            if(color == mColorArray[i]){
                return i;
            }
        }

        return -1;
    }

    public void setSelectColorArray(int[] array) {
        mColorArray = array;
    }

    public void setSelectDrawableIdArray(int[] idArray){
        mDrawableSelects = idArray;
    }

    public int getIndex(){
        return mIndex;
    }

    public int getSelectColor(){
        return mSelectColor;
    }

    public void setOnColorSelectedListener(OnColorSelectedListener listener){
        mOnColorSelectedListener = listener;
    }

    public interface OnColorSelectedListener{
        void onColorSelected(int index , int color);
    }
}