Android自定义view实现图片选色器

简介

本文介绍该自定义vie的使用及实现的方法，主要实现以下几个功能

- 选取圆盘选色图片上的颜色，实时监听
- 可设置选色指示图片，跟随触摸位置、指示所选颜色，示例中为白色圆环
- 可自己设置选色图片（目前只支持圆形图片）

github链接

使用效果

看下使用效果

使用示例

在项目中导入该库

在工程的 build.gradle中加入

allprojects {
  repositories {
   ...
   maven { url "https://jitpack.io" }
  }
 }

module的build.gradle中加入依赖

dependencies {
   pile '.github.autume:ColorPickerVie:1.0'
 }

xml

选色代码

private void initRgbPicker() {
  colorPickerVie = (ColorPickerVie) findVieById(R.id.color_picker);
  colorPickerVie.setImgPicker(MainActivity.this, img_picker, 25); //一个参数是该颜色指示圈的大小(dp)
  colorPickerVie.setColorChangedListener(ne ColorPickerVie.onColorChangedListener() {
   @Override
   public void colorChanged(int red, int blue, int green) {
 img_color.setColorFilter(Color.argb(255, red, green, blue));
   }

   @Override
   public void sColorChanged(int red, int blue, int green) {

   }
  });
 }

对外公开的API

 public void setImgPicker(final Context context, final ImageVie imgPicker, final int pickerVieWidth)
 public void setImgResource(final int imgResource)
 public void setColorChangedListener(onColorChangedListener colorChangedListener)

实现过程

attrs属性

可通过picture_resource属性设置用来选色的资源id,现仅支持圆形图片

xml

布局中就是放入一个ImageVie控件

属性获取及vie初始化

private void initAttrs(Context context, AttributeSet attrs) {
  if (null != attrs) {
   TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ColorPickerVie);
   imgResource = typedArray.getResourceId(R.styleable.ColorPickerVie_picture_resource, 0);
   typedArray.recycle();
  }
 }

 private void initVie(Context context) {
  Vie vie = LayoutInflater.from(context).inflate(R.layout.color_picker, this);
  imgColorRang = (ImageVie) vie.findVieById(R.id.img_color_rang);
  rl_root = (RelativeLayout) vie.findVieById(R.id.rl_root);

  if (imgResource != 0)
   imgColorRang.setImageResource(imgResource);

  bitmap = ((BitmapDraable) imgColorRang.getDraable()).getBitmap();//获取圆盘图片
 }

颜色回调监听

 private onColorChangedListener colorChangedListener;//颜色变换监听

 public void setColorChangedListener(onColorChangedListener colorChangedListener) {
  this.colorChangedListener = colorChangedListener;
 }

 
 public interface onColorChangedListener {
  void colorChanged(int red, int blue, int green);
  void sColorChanged(int red, int blue, int green);
 }

触摸事件

触摸事件写在父控件上，可以统一处理用来选色的vie及指示选色位置的vie(imgPicker)，imgPicker为指示显示位置的圆框，若设置了则跟随手指移动。

 private void initTouchListener() {
  rl_root.setonTouchListener(ne onTouchListener() {
   @Override
   public boolean onTouch(Vie v, MotionEvent event) {

 if (range_radius == 0) {
  range_radius = imgColorRang.getWidth() / 2; //圆盘半径
  centreX = imgColorRang.getRight() - range_radius;
  centreY = imgColorRang.getBottom() - imgColorRang.getHeight() / 2;
  select_radius = range_radius - pickerViePadding/5;
 }

 float xInVie = event.getX();
 float yInVie = event.getY();
 Log.d(TAG, "xInVie: " + xInVie + ",yInVie: " + yInVie + ",left: " + imgColorRang.getLeft() + ",: " + imgColorRang.getTop() + ",right: " +imgColorRang.getRight() + ",bottom: " + imgColorRang.getBottom());

 //触摸点与圆盘圆心距离
 float diff = (float) Math.sqrt((centreY - yInVie)  (centreY - yInVie) + (centreX - xInVie) 
   (centreX - xInVie));

 //在选色图片内则进行读取颜色等操作
 if (diff <= select_radius) {

  //选色位置指示，若设置了则移动到点取的位置
  if (imgPicker != null ) {
   int xInWindo = (int) event.getX();
   int yInWindo = (int) event.getY();
   int left = xInWindo + v.getLeft() - imgPicker.getWidth() / 2;
   int  = yInWindo + v.getTop() - imgPicker.getWidth() / 2;
   int right = left + imgPicker.getWidth();
   int bottom =  + imgPicker.getHeight();

   imgPicker.layout(left, , right, bottom);
  }


  if ((event.getY() - imgColorRang.getTop()) < 0)
   return true;
  //读取颜色
  int pixel = bitmap.getPixel((int) (event.getX() - imgColorRang.getLeft()), (int) (event.getY() - imgColorRang.getTop())); //获取选择像素
  if (colorChangedListener != null) {
   if (event.getAction() == MotionEvent.ACTION_UP) {
colorChangedListener.sColorChanged(Color.red(pixel), Color.blue(pixel), Color.green(pixel));
   }else {
colorChangedListener.colorChanged(Color.red(pixel), Color.blue(pixel), Color.green(pixel));
   }
  }
  Log.d(TAG, "radValue=" + Color.red(pixel) + " bluevalue=" + Color.blue(pixel) + " greenValue" + Color.green(pixel));
 }
 return true;
   }
  });
 }

设置指示图标

设置图标，根据图标的大小设置控件的padding避免在边界处显示不全的问题。

public void setImgPicker(final Context context, final ImageVie imgPicker, final int pickerVieWidth) {
  this.imgPicker = imgPicker;
  pickerViePadding = dip2px(context, pickerVieWidth/2);
  ne Handler().postDelayed(ne Runnable() {
   @Override
   public void run() {
 rl_root.setPadding(pickerViePadding, pickerViePadding, pickerViePadding, pickerViePadding);
 bitmap = ((BitmapDraable) imgColorRang.getDraable()).getBitmap();//获取圆盘图片
   }
  },10);
 }

ok，至此，一个比较简单的选色器就完成了。