【Android】自定义View —— 环形调色板

关键字

自定义View 调色板

摘要：

通过布局代码和java代码结合的方式，来自定义视图，构建一个环形调色板；

效果图

思路：

• 虽然可以通过继承view的方式同时实现布局和触摸效果，
  但是如果通过xml布局代码控制视图显示 + java代码控制触摸效果将会更简单；

• 布局：借助两张同样大小的透明图片（彩色圆环、中间部分），
  并在最里层放置一个含背景颜色ImageView，来动态设置触摸处对应的颜色值；

• 通过LayoutInflater加载xml文件，并添加给自己；
  LayoutInflater.from(context).inflate(R.layout.view_color_picker, this, true);

• 自定义的View继承自FrameLayout，并通过LayoutInflater加载以merge为根布局的xml文件；

• 只对最外层的ImageView添加触摸事件；

• 过滤颜色值为0的部分，这样的话触摸到空白的地方就不会改变颜色了（即只在有颜色的地方允许触摸）；

• 添加变化的监听接口OnColorChangeListener

• 根据触摸点的位置来获取对应点颜色值(使用bitmap.getPixel(x, y)的方式获取)；

用法

private void initView() {    ColorPickerLayout cpv = (ColorPickerLayout) findViewById(R.id.cpv_simple_light);    if (cpv != null) {        cpv.setOnColorChangeListener(new ColorPickerLayout.OnColorChangeListener() {            @Override            public void doColor(int color) {                int r = Color.red(color);                int g = Color.green(color);                int b = Color.blue(color);                Log.i(TAG, "当前颜色 color=" + color + " 对应rgb值：r=" + r + " g=" + g + " b=" + b);            }        });    }}

源码

public class ColorPickerLayout extends FrameLayout {    public interface OnColorChangeListener {        void doColor(int color);    }    public void setOnColorChangeListener(OnColorChangeListener listener) {        mOnColorChangeListener = listener;    }    private OnColorChangeListener mOnColorChangeListener;    public ColorPickerLayout(Context context) {        this(context, null);    }    public ColorPickerLayout(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public ColorPickerLayout(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        setUp(context);    }    private void setUp(Context context) {        // 从布局中加载并添加给自己        View view = LayoutInflater.from(context).inflate(R.layout.view_color_picker, this, true);        final ImageView ivIndicator = (ImageView) view.findViewById(R.id.iv_picker_indicator);        final ImageView ivPointerBg = (ImageView) view.findViewById(R.id.iv_pointer_bg);        final ImageView ivBg = (ImageView) view.findViewById(R.id.iv_picker_bg);        final Bitmap bgBitmap = Uimg.getBitmap(ivBg);        // 给外层的ivBg设置触摸监听        ivBg.setOnTouchListener(new OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                int x = (int) event.getX();                int y = (int) event.getY();                int color = 0;                if (x >= 0 && y >= 0 && x < bgBitmap.getWidth() && y < bgBitmap.getHeight()) {                    color = bgBitmap.getPixel(x, y);                }                switch (event.getAction()) {                    case MotionEvent.ACTION_DOWN:                    case MotionEvent.ACTION_MOVE:                    case MotionEvent.ACTION_UP:                        if (color != 0) {                            changePointerBgColor(ivPointerBg, color);                            changeIndicatorPosition(ivIndicator, x, y);                        }                }                return true;            }        });    }    // 改变触摸点位置    private void changeIndicatorPosition(ImageView ivIndicator, int x, int y) {        MarginLayoutParams layoutParams = (MarginLayoutParams) ivIndicator.getLayoutParams();        layoutParams.leftMargin = x - ivIndicator.getWidth() / 2;        layoutParams.topMargin = y - ivIndicator.getHeight() / 2;        ivIndicator.requestLayout();        if (ivIndicator.getVisibility() != VISIBLE) {            ivIndicator.setVisibility(VISIBLE);        }    }    // 改变触摸指示器颜色    private void changePointerBgColor(ImageView iv, int color) {        iv.setBackgroundColor(color);        if (mOnColorChangeListener != null) {            mOnColorChangeListener.doColor(color);        }    }}

源码地址

• ColorPickerLayout