Android自定義view實(shí)現(xiàn)圖片選色器

更新時(shí)間：2018年06月02日 08:34:56 作者：oden.su

這篇文章主要為大家詳細(xì)介紹了Android自定義view實(shí)現(xiàn)圖片選色器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

簡(jiǎn)介

本文介紹該自定義view的使用及實(shí)現(xiàn)的方法，主要實(shí)現(xiàn)以下幾個(gè)功能：

- 選取圓盤選色圖片上的顏色，實(shí)時(shí)監(jiān)聽
- 可設(shè)置選色指示圖片，跟隨觸摸位置、指示所選顏色，示例中為白色圓環(huán)
- 可自己設(shè)置選色圖片（目前只支持圓形圖片）

github鏈接

使用效果

首先看下使用效果：

使用示例

在項(xiàng)目中導(dǎo)入該庫(kù)

在工程的 build.gradle中加入：

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

module的build.gradle中加入依賴：

dependencies {
   compile 'com.github.autume:ColorPickerView:1.0'
 }

xml

<RelativeLayout
  android:id="@+id/rl_picker"
  android:layout_below="@+id/img_color"
  android:layout_marginTop="30dp"
  android:layout_centerHorizontal="true"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <colorpickerview.oden.com.colorpicker.ColorPickerView
   android:id="@+id/color_picker"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>


  <ImageView
   android:id="@+id/img_picker"
   android:layout_centerInParent="true"
   android:src="@mipmap/color_picker"
   android:layout_width="25dp"
   android:layout_height="25dp" />

 </RelativeLayout>

選色代碼

private void initRgbPicker() {
  colorPickerView = (ColorPickerView) findViewById(R.id.color_picker);
  colorPickerView.setImgPicker(MainActivity.this, img_picker, 25); //最后一個(gè)參數(shù)是該顏色指示圈的大小(dp)
  colorPickerView.setColorChangedListener(new ColorPickerView.onColorChangedListener() {
   @Override
   public void colorChanged(int red, int blue, int green) {
    img_color.setColorFilter(Color.argb(255, red, green, blue));
   }

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

   }
  });
 }

對(duì)外公開的API

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

實(shí)現(xiàn)過(guò)程

attrs屬性

可通過(guò)picture_resource屬性設(shè)置用來(lái)選色的資源id,現(xiàn)僅支持圓形圖片

 <declare-styleable name="ColorPickerView">
  <attr name="picture_resource" format="reference"/>
 </declare-styleable>

xml

布局中就是放入一個(gè)ImageView控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/rl_root"
 tools:background="@color/black"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">

 <ImageView
  android:id="@+id/img_color_rang"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:src="@mipmap/lights_colors" />


</RelativeLayout>

屬性獲取及view初始化

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

 private void initView(Context context) {
  View view = LayoutInflater.from(context).inflate(R.layout.color_picker, this);
  imgColorRang = (ImageView) view.findViewById(R.id.img_color_rang);
  rl_root = (RelativeLayout) view.findViewById(R.id.rl_root);

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

  bitmap = ((BitmapDrawable) imgColorRang.getDrawable()).getBitmap();//獲取圓盤圖片
 }

顏色回調(diào)監(jiān)聽

 private onColorChangedListener colorChangedListener;//顏色變換監(jiān)聽

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

 /**
  * 顏色變換監(jiān)聽接口
  */
 public interface onColorChangedListener {
  void colorChanged(int red, int blue, int green);
  void stopColorChanged(int red, int blue, int green);
 }

觸摸事件

觸摸事件寫在父控件上，可以統(tǒng)一處理用來(lái)選色的view及指示選色位置的view(imgPicker)，imgPicker為指示顯示位置的圓框，若設(shè)置了則跟隨手指移動(dòng)。

 private void initTouchListener() {
  rl_root.setOnTouchListener(new OnTouchListener() {
   @Override
   public boolean onTouch(View 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 - pickerViewPadding/5;
    }

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

    //觸摸點(diǎn)與圓盤圓心距離
    float diff = (float) Math.sqrt((centreY - yInView) * (centreY - yInView) + (centreX - xInView) *
      (centreX - xInView));

    //在選色圖片內(nèi)則進(jìn)行讀取顏色等操作
    if (diff <= select_radius) {

     //選色位置指示，若設(shè)置了則移動(dòng)到點(diǎn)取的位置
     if (imgPicker != null ) {
      int xInWindow = (int) event.getX();
      int yInWindow = (int) event.getY();
      int left = xInWindow + v.getLeft() - imgPicker.getWidth() / 2;
      int top = yInWindow + v.getTop() - imgPicker.getWidth() / 2;
      int right = left + imgPicker.getWidth();
      int bottom = top + imgPicker.getHeight();

      imgPicker.layout(left, top, 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.stopColorChanged(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;
   }
  });
 }

設(shè)置指示圖標(biāo)

設(shè)置圖標(biāo)，同時(shí)根據(jù)圖標(biāo)的大小設(shè)置控件的padding避免在邊界處顯示不全的問題。

public void setImgPicker(final Context context, final ImageView imgPicker, final int pickerViewWidth) {
  this.imgPicker = imgPicker;
  pickerViewPadding = dip2px(context, pickerViewWidth/2);
  new Handler().postDelayed(new Runnable() {
   @Override
   public void run() {
    rl_root.setPadding(pickerViewPadding, pickerViewPadding, pickerViewPadding, pickerViewPadding);
    bitmap = ((BitmapDrawable) imgColorRang.getDrawable()).getBitmap();//獲取圓盤圖片
   }
  },10);
 }

總結(jié)

ok，至此，一個(gè)比較簡(jiǎn)單的選色器就完成了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: