Android颜色选择器

废话不多说了，先上效果图

中间那个盘可以随手指移动，中心是透明的，通过它读取色盘上的颜色

技术方案：采用组合控件，将颜色选择器封装成一个控件，监听小盘的onTouch事件

1、组合控件布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/rl_root"    android:layout_width="wrap_content"      android:layout_height="wrap_content" >    <ImageView        android:id="@+id/iv_color_range"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:layout_margin="30dp"        android:src="@drawable/color_range" />    <ImageView        android:id="@+id/iv_color_picker"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:background="@drawable/color_picker"        android:clickable="true" /></RelativeLayout>

android:layout_margin="30dp" 是为了使小盘滑动到大盘边缘不被裁剪掉，具体效果，大家可以去掉试试

android:clickable="true" 如果不设这属性，ImageView将滑动不了

2、组合控件代码

/** * 工程名: colorpicker * 文件名: ColorPickerView.java * 包名: com.style.colorpicker * 日期: 2014-3-30上午10:14:15 * Copyright (c) 2014 **/package com.style.colorpicker;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Color;import android.graphics.drawable.BitmapDrawable;import android.util.AttributeSet;import android.util.FloatMath;import android.util.Log;import android.view.LayoutInflater;import android.view.MotionEvent;import android.view.View;import android.widget.FrameLayout; import android.widget.ImageView;import android.widget.RelativeLayout;/** * 类名: ColorPickerView <br/> * 功能: 颜色选择器. <br/> * 日期: 2014-3-30 上午10:14:15 <br/> * * @author   msl * @version    */public class ColorPickerView extends FrameLayout {private ImageView iv_color_range;//颜色选择盘private ImageView iv_color_picker;//颜色选择器private RelativeLayout rl_root;//根布局private int range_radius ;//圆盘半径private int picker_radius;//颜色选择器半径private int centreX;//圆盘中心X坐标private int centreY;//圆盘中心Y坐标private int picker_centreX;//颜色选择器中心X坐标private int picker_centreY;//颜色选择器中心Y坐标private Bitmap bitmap;//颜色选择盘图片private onColorChangedListener colorChangedListener;//颜色变换监听public ColorPickerView(Context context) {super(context); }public ColorPickerView(Context context, AttributeSet attrs) {super(context, attrs); init(context); }/** *  * init:(初始化). <br/> * @author msl * @param context * @since 1.0 */private void init(Context context){View view = LayoutInflater.from(context).inflate(R.layout.color_picker, this);iv_color_range = (ImageView) view.findViewById(R.id.iv_color_range);iv_color_picker = (ImageView) view.findViewById(R.id.iv_color_picker);rl_root = (RelativeLayout)view.findViewById(R.id.rl_root);//选择器触摸监听iv_color_picker.setOnTouchListener(new OnTouchListener() {int lastX, lastY;//上次触摸坐标@Overridepublic boolean onTouch(View v, MotionEvent event) {int ea=event.getAction(); if(range_radius==0){//未初始化range_radius =iv_color_range.getWidth()/2;//圆盘半径picker_radius = iv_color_picker.getWidth()/2;//选择器半径centreX =iv_color_range.getRight()-range_radius;centreY =iv_color_range.getBottom()-iv_color_range.getHeight()/2;     bitmap =((BitmapDrawable)iv_color_range.getDrawable()).getBitmap();//获取圆盘图片}switch(ea){case MotionEvent.ACTION_DOWN://按下lastX = (int) event.getRawX();lastY = (int) event.getRawY();getParent().requestDisallowInterceptTouchEvent(true);//通知父控件勿拦截本控件touch事件break;case MotionEvent.ACTION_MOVE://拖动//拖动距离int dx =(int)event.getRawX() - lastX;int dy =(int)event.getRawY() - lastY;//相对于父控件的新坐标int left = v.getLeft() + dx;int top = v.getTop() + dy;int right = v.getRight() + dx;int bottom = v.getBottom() + dy;//选择器圆心坐标picker_centreX = right-picker_radius;picker_centreY = bottom-picker_radius;//选择器圆心与圆盘圆心距离float diff = FloatMath.sqrt((centreY-picker_centreY)*(centreY-picker_centreY)+(centreX-picker_centreX)*(centreX-picker_centreX))+picker_radius/2;//两个圆心距离+颜色选择器半径//在边距内，则拖动if(diff<=range_radius){v.layout(left, top, right, bottom);int pixel = bitmap.getPixel(picker_centreX-iv_color_range.getLeft(), picker_centreY-iv_color_range.getTop());//获取选择器圆心像素if(colorChangedListener!=null){//读取颜色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));lastX = (int) event.getRawX();lastY = (int) event.getRawY();}getParent().requestDisallowInterceptTouchEvent(true);//通知父控件勿拦截本控件touch事件break;default:break;}return false;}});}    public onColorChangedListener getColorChangedListener() {return colorChangedListener;}public void setColorChangedListener(onColorChangedListener colorChangedListener) {this.colorChangedListener = colorChangedListener;}/** * 颜色变换监听接口 */interface onColorChangedListener{    public void colorChanged(int red,int blue,int green);    } }

代码中都有详细注释，就不解释了

3、使用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <com.style.colorpicker.ColorPickerView        android:id="@+id/cpv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true" /></RelativeLayout>

demo下载地址：github下载

demo粗糙，尤其是滑到边缘时，体验不好，仅供大家参考。有什么建议和疑问，可以邮件联系：490185202@qq.com

更多相关文章

随机推荐