Android 颜色选择器

最新推荐文章于 2020-02-18 10:35:41 发布
最新推荐文章于 2020-02-18 10:35:41 发布
阅读量84 收藏
点赞数
文章标签： 移动开发 java
本文详细介绍了彩色选择器的实现过程，包括颜色选择、颜色变化和颜色监听功能，并展示了其在不同场景下的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

实列图：

 

 

源码：

ColorPickerView.java

package com.px.color;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ComposeShader;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.PointF;
import android.graphics.PorterDuff;
import android.graphics.Rect;
import android.graphics.Shader;
import android.graphics.Shader.TileMode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class ColorPickerView extends View {

	private Context mContext;
	
	private Paint mRightPaint;
	private int mHeight;
	private int mWidth;
	private int[] mRightColors;
	private int RIGHT_WIDTH;
	private int LEFT_WIDTH;
	
	private Bitmap mLeftBitmap;
	private Bitmap mLeftBitmap2;
	private Bitmap mRightBitmap;
	private Bitmap mRightBitmap2;
	
	private Paint mBitmapPaint;
	
	private final int SPLIT_WIDTH = 24;
	
	private boolean downInLeft = false;
	private boolean downInRight = false;
	
	private PointF mLeftSelectPoint; 
	private PointF mRightSelectPoint;
	
	private OnColorChangedListener mChangedListener;
	
	private boolean mLeftMove = false;
	private boolean mRightMove = false;
	
	private float mLeftBitmapRadius;
	
	private Bitmap mGradualChangeBitmap;
	
	private float mRightBitmapHalfHeight;
	private float mRightBitmapQuarterWidth;
	
	private int mCallBackColor = Integer.MAX_VALUE;
	
	public ColorPickerView(Context context) {
		this(context, null);
	}
	
	public ColorPickerView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext = context;
		init();
	}

	public void setOnColorChangedListenner(OnColorChangedListener listener) {
		mChangedListener = listener;
	}
	
	private void init() {
		mRightPaint = new Paint(); 
		mRightPaint.setStyle(Paint.Style.FILL);
		mRightPaint.setStrokeWidth(1);
		
		mRightColors = new int[3];
		mRightColors[0] = Color.WHITE;
		mRightColors[2] = Color.BLACK;
		
		mBitmapPaint = new Paint();
		
		mLeftBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.reading__color_view__button);
		mLeftBitmap2 = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.reading__color_view__button_press);
		mLeftBitmapRadius = mLeftBitmap.getWidth() / 2;
		mLeftSelectPoint = new PointF(SPLIT_WIDTH, SPLIT_WIDTH);
		
		mRightBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.reading__color_view__saturation);
		mRightBitmap2 = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.reading__color_view__saturation_press);
		mRightSelectPoint = new PointF(SPLIT_WIDTH, SPLIT_WIDTH);
		mRightBitmapHalfHeight = mRightBitmap.getHeight() / 2;
		mRightBitmapQuarterWidth = mRightBitmap.getWidth() / 4;
		RIGHT_WIDTH = mRightBitmap.getWidth() / 2;
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		// 左边
		canvas.drawBitmap(getGradual() , null , new Rect(SPLIT_WIDTH, SPLIT_WIDTH, LEFT_WIDTH + SPLIT_WIDTH, mHeight - SPLIT_WIDTH), mBitmapPaint);
		
		// 右边
		mRightColors[1] = mRightPaint.getColor();
		Shader rightShader = new LinearGradient(mWidth - SPLIT_WIDTH - RIGHT_WIDTH / 2, SPLIT_WIDTH, mWidth - SPLIT_WIDTH - RIGHT_WIDTH / 2, mHeight - SPLIT_WIDTH, mRightColors, null, Shader.TileMode.MIRROR);  
		mRightPaint.setShader(rightShader);  
		canvas.drawRect(new Rect(mWidth - SPLIT_WIDTH - RIGHT_WIDTH, SPLIT_WIDTH, mWidth - SPLIT_WIDTH, mHeight-SPLIT_WIDTH), mRightPaint);

		// 两个图标
		if (mLeftMove) {
			canvas.drawBitmap(mLeftBitmap, mLeftSelectPoint.x - mLeftBitmapRadius, mLeftSelectPoint.y - mLeftBitmapRadius, mBitmapPaint);
		} else {
			canvas.drawBitmap(mLeftBitmap2, mLeftSelectPoint.x - mLeftBitmapRadius, mLeftSelectPoint.y - mLeftBitmapRadius, mBitmapPaint);
		}
		
		if (mRightMove) {
			canvas.drawBitmap(mRightBitmap, mWidth - SPLIT_WIDTH - RIGHT_WIDTH - mRightBitmapQuarterWidth, mRightSelectPoint.y - mRightBitmapHalfHeight, mBitmapPaint);
		} else {
			canvas.drawBitmap(mRightBitmap2, mWidth - SPLIT_WIDTH - RIGHT_WIDTH - mRightBitmapQuarterWidth, mRightSelectPoint.y - mRightBitmapHalfHeight, mBitmapPaint);
		}
	}
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int widthMode = MeasureSpec.getMode(widthMeasureSpec);
		int heightMode = MeasureSpec.getMode(heightMeasureSpec);
		int width = MeasureSpec.getSize(widthMeasureSpec);
		int height = MeasureSpec.getSize(heightMeasureSpec);
		if (widthMode == MeasureSpec.EXACTLY) {
			mWidth = width;
		} else {
			mWidth = 480;
		}
		if (heightMode == MeasureSpec.EXACTLY) {
			mHeight = height;
		} else {
			mHeight = 350;
		}
		LEFT_WIDTH = mWidth - SPLIT_WIDTH * 3 - RIGHT_WIDTH;
		setMeasuredDimension(mWidth, mHeight);
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		float x = event.getX();
		float y = event.getY();
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
		case MotionEvent.ACTION_MOVE:
			downInLeft = inLeftPanel(x, y);
			downInRight = inRightPanel(x, y);
			if (downInLeft) {
				mLeftMove = true;
				proofLeft(x, y);
				mRightPaint.setColor(getLeftColor(mLeftSelectPoint.x-SPLIT_WIDTH, mLeftSelectPoint.y-SPLIT_WIDTH));
			} else if (downInRight) {
				mRightMove = true;
				proofRight(x, y);
			}
			
			invalidate();
			int rightColor = getRightColor(mRightSelectPoint.y - SPLIT_WIDTH);
			if (mCallBackColor == Integer.MAX_VALUE || mCallBackColor != rightColor) {
				mCallBackColor = rightColor;
			} else {
				break;
			}
			if (mChangedListener != null) {
				mChangedListener.onColorChanged(mCallBackColor, 
						mRightPaint.getColor(),
						(mRightSelectPoint.y - SPLIT_WIDTH) / (mHeight - 2 * SPLIT_WIDTH));
			}
			break;
		case MotionEvent.ACTION_UP:
			if (downInLeft) {
				downInLeft = false;
			} else if (downInRight) {
				downInRight = false;
			}
			mLeftMove = false;
			mRightMove = false;
			invalidate();
			if (mChangedListener != null) {
				mChangedListener.onColorChanged(getRightColor(mRightSelectPoint.y - SPLIT_WIDTH), 
						mRightPaint.getColor(),
						(mRightSelectPoint.y - SPLIT_WIDTH) / (mHeight - 2 * SPLIT_WIDTH));
			}
		}
		return true;
	}
	
	@Override
	protected void onDetachedFromWindow() {
		if (mGradualChangeBitmap != null && mGradualChangeBitmap.isRecycled() == false) {
			mGradualChangeBitmap.recycle();
		}
		if (mLeftBitmap != null && mLeftBitmap.isRecycled() == false) {
			mLeftBitmap.recycle();
		}
		if (mLeftBitmap2 != null && mLeftBitmap2.isRecycled() == false) {
			mLeftBitmap2.recycle();
		}
		if (mRightBitmap != null && mRightBitmap.isRecycled() == false) {
			mRightBitmap.recycle();
		}
		if (mRightBitmap2 != null && mRightBitmap2.isRecycled() == false) {
			mRightBitmap2.recycle();
		}
		super.onDetachedFromWindow();
	}
	
	private Bitmap getGradual() {
		if (mGradualChangeBitmap == null) {
			Paint leftPaint = new Paint();
			leftPaint.setStrokeWidth(1);
			mGradualChangeBitmap = Bitmap.createBitmap(LEFT_WIDTH, mHeight - 2 * SPLIT_WIDTH, Config.RGB_565);
			Canvas canvas = new Canvas(mGradualChangeBitmap);
			int bitmapWidth = mGradualChangeBitmap.getWidth();
			LEFT_WIDTH = bitmapWidth;
			int bitmapHeight = mGradualChangeBitmap.getHeight();
			int[] leftColors = new int[] {Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN, Color.BLUE, Color.MAGENTA};
			Shader leftShader = new LinearGradient(0, bitmapHeight / 2, bitmapWidth, bitmapHeight / 2, leftColors, null, TileMode.REPEAT);
			LinearGradient shadowShader = new LinearGradient(bitmapWidth / 2, 0, bitmapWidth / 2, bitmapHeight,
					Color.WHITE, Color.BLACK, Shader.TileMode.CLAMP);
			ComposeShader shader = new ComposeShader(leftShader, shadowShader, PorterDuff.Mode.SCREEN);
			leftPaint.setShader(shader);
			canvas.drawRect(0, 0, bitmapWidth, bitmapHeight, leftPaint);
		}
		return mGradualChangeBitmap;
	}
	
	private boolean inLeftPanel(float x, float y) {
		if ( 0 < x && x < SPLIT_WIDTH + LEFT_WIDTH + SPLIT_WIDTH / 2 && 0 < y && y < mWidth) {
			return true;
		} else {
			return false;
		}
	}
	
	private boolean inRightPanel(float x, float y) {
		if (mWidth - SPLIT_WIDTH - RIGHT_WIDTH - SPLIT_WIDTH / 2 < x && x < mWidth && 0 < y && y < mHeight) {
			return true;
		} else {
			return false;
		}
	}
	
	// 校正xy
	private void proofLeft(float x, float y) {
		if (x < SPLIT_WIDTH) {
			mLeftSelectPoint.x = SPLIT_WIDTH;
		} else if (x > (SPLIT_WIDTH + LEFT_WIDTH)) {
			mLeftSelectPoint.x = SPLIT_WIDTH + LEFT_WIDTH;
		} else {
			mLeftSelectPoint.x = x;
		}
		if (y < SPLIT_WIDTH) {
			mLeftSelectPoint.y = SPLIT_WIDTH;
		} else if (y > (mHeight - SPLIT_WIDTH)) {
			mLeftSelectPoint.y = mHeight - SPLIT_WIDTH;
		} else {
			mLeftSelectPoint.y = y;
		}
	}
	
	private void proofRight(float x, float y) {
		if (x < SPLIT_WIDTH) {
			mRightSelectPoint.x = SPLIT_WIDTH;
		} else if (x > (SPLIT_WIDTH + LEFT_WIDTH)) {
			mRightSelectPoint.x = SPLIT_WIDTH + LEFT_WIDTH;
		} else {
			mRightSelectPoint.x = x;
		}
		if (y < SPLIT_WIDTH) {
			mRightSelectPoint.y = SPLIT_WIDTH;
		} else if (y > (mHeight - SPLIT_WIDTH)) {
			mRightSelectPoint.y = mHeight - SPLIT_WIDTH;
		} else {
			mRightSelectPoint.y = y;
		}
	}
	
	private int getLeftColor(float x, float y) {
		Bitmap temp = getGradual();
		// 为了防止越界
		int intX = (int) x;
		int intY = (int) y;
		if (intX >= temp.getWidth()) {
			intX = temp.getWidth() - 1;
		}
		if (intY >= temp.getHeight()) {
			intY = temp.getHeight() - 1;
		}
        return temp.getPixel(intX, intY);
	}
	
	private int getRightColor(float y) {
		int a, r, g, b, so, dst;  
		float p;  
		
		float rightHalfHeight = (mHeight - (float)SPLIT_WIDTH * 2) / 2;
		if (y < rightHalfHeight) {
			so = mRightColors[0];   
			dst = mRightColors[1];
			p =  y / rightHalfHeight;
		} else {
			so = mRightColors[1];
			dst = mRightColors[2];
			p = (y - rightHalfHeight) / rightHalfHeight;
		}
  
        a = ave(Color.alpha(so), Color.alpha(dst), p);  
        r = ave(Color.red(so), Color.red(dst), p);  
        g = ave(Color.green(so), Color.green(dst), p);  
        b = ave(Color.blue(so), Color.blue(dst), p);  
        return Color.argb(a, r, g, b);
	} 
	
	private int ave(int s, int d, float p) {
		return s + Math.round(p * (d - s));
	}
	
	// ### 内部类 ###
	public interface OnColorChangedListener {
		void onColorChanged(int color, int originalColor, float saturation);
	}
}

　　

测试代码：

ColorPickerActivity.java

package com.px.color;

import com.px.color.ColorPickerView.OnColorChangedListener;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.TextView;

public class ColorPickerActivity extends Activity{
    /** Called when the activity is first created. */
	
	TextView tv = null;
	ColorPickerView cpv = null;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        cpv = (ColorPickerView)findViewById(R.id.colorpicker);
        cpv.setOnColorChangedListenner(colorChangedListener);
        
        tv = (TextView)findViewById(R.id.tv);
    }

    OnColorChangedListener colorChangedListener = new  OnColorChangedListener(){

		@Override
		public void onColorChanged(int color, int originalColor,
				float saturation) {
			Log.v("ColorPickerActivity", "color = " + color + ", " + "originalColor = " + originalColor);
			tv.setBackgroundColor(color);
		}
    };
}

　　

Android 自定义View颜色选择器（ 条形、水平），使用HSV颜色模型实现取色器并反向定位颜色所在位置
tg_0804的博客
03-16 3012
轻松实现一个简单的Android条形水平颜色选择器，可以通过设置颜色值反向定位滑块 Demo地址： 效果图： 先贴完整代码： /** * Author: Aeolou * Date:2020/3/14 0014 * Email:tg0804013x@gmail.com */ public class ColorBarView extends View { priva...
条形颜色选择器
12-09
实现了，横向的的条形颜色选择器，可以自由设定颜色，自己实现的小Dome，可以直接项目中应用
Android颜色选择器
编程开发资料库
11-02 177
参考网上文章，做了两种颜色选择器。 一种是固定颜色的选择器，这个很简单，只要画出来各种颜色区域，用户选择哪个，就选择了什么颜色。 另一种是万能颜色选择器，这个有一些算法的，所以就参考了网上的文章（由于原始出处不详，就不表示感谢了），又做了一些优化和修改。 目前的这个万能颜色选择器的功能已经足够了，也没什么可保密的，就放上来，给需要的人做个参考。喜欢就拿去好了。 package ...
Android 颜色选择器(ColorPicker)
clarkamx的博客
01-06 1486
因为画图板中需要使用颜色选择器. 去查了下api demo, 发现有现成的ColorPickerDialog, 但是功能比较简单, 主要是无法选择黑色和白色. 之后也去网上找了下, 倒是发现了几个, 但是用着感觉不太好.就想着自己重写个好了.   先上图 1.测试界面   2. 调色板对话框   3...
Android颜色选择器大全
12-27
本文将详细介绍Android颜色选择器的种类、实现方式以及如何在项目中集成这4种不同的颜色选择器样式。 1. **彩虹颜色选择器（Rainbow Color Picker）** 这种颜色选择器通常通过一个滑块来让用户选择色相（Hue），而...
Android-一个Android颜色选择器库
08-13
标题提及的"Android-一个Android颜色选择器库"显然是一个专为Android平台设计的第三方颜色选择器组件。这个库可能是为了提供比原生Android SDK更丰富、更灵活的颜色选取功能。 在Android开发中，开发者通常使用原生...
SimpleDroidColorPicker:简单的 Android 颜色选择器库
06-10
SimpleDroidColorPicker是一个简单易用的 Android 颜色选择器库。 目前它处于预发布状态，支持环形、圆形和线性颜色选择器。 当前版本v0.3支持： 环形颜色选择器，圆形颜色选择器，三个线性颜色选择器 HSV线性...
android selector
breeze666的专栏
08-28 6340
Android颜色选择器介绍 使用Android的颜色选择器可以让我们的view在不同状态下显示不同的颜色。 1、Android中ListView 选择某项改变该行字体颜色   2、文件位置 res/color/filename.xml，文件名被做资源的ID 3、语法示例 xml version="1.0" encoding="utf-8"?> se
Android代码-安卓平台下的颜色选择器
08-06
ColorSelector4Android ColorSelector4Android是安卓平台下的颜色选择器 使用Android Studio开发，依赖本库也只能在Android Studio，API等级为19 已封装好Activity、DialogFragment、AlertDialog等形式供直接使用 也可以直接在自己的程序里内嵌ColorPalette来使用 若不需要自定义可直接依赖aar包，需自定义可导入Module：ColorPalette自行修改源码 无其他依赖项 Activity模式使用方法 启动ColorSelectActivity //生成一个Intent指向ColorSelectActivity Intent intent = new Intent(this, ColorSelectActivity.class); //在Intent中放入上一次的颜色数据 intent.putExtra(ColorSelectActivity.LAST_COLOR,lastColor); //启动ColorSelectActivity
Android 颜色渲染(一) 颜色选择器 ColorPickerDialog剖析
844604778
08-26 463
Android 颜色选择器之ColorPickerDialog剖析 有这样一个需求，可以让用户自定义背景颜色，这就需要提供一个颜色选择器给用户. 在Android 中，如何实现这样的功能呢，遇到这种需求是,先查看一下ApiDemos,是否已经有相关的实例,果然，找到了一个可以参考的demo:ColorPickerDialog 我已经把apidemos导入到eclipse中,请看截图: ...
Android 简单的条形颜色选择器
hn_lgc的专栏
05-25 4748
/** * 简单的条形颜色选择器，可以使用xml设置宽和高 * 圆形滑块 * 其中的高为滑块的高，颜色条的高为滑块高的1/2 */
安卓自定义条形颜色选择器(ColorPickerBar)
蓝不蓝编程
02-18 996
效果图 集成方法 添加依赖 修改根目录下build.gradle文件,在allprojects的repositories中增加如下信息 maven { url 'https://jitpack.io' } 修改app工程下build.gradle文件,在dependencies中增加如下信息 implementation 'com.gitee.cxyzy1:colorPicker...
android 颜色选择器
u010436741的专栏
08-27 2002
看到一个android手机上的颜色选择器，觉得有参考价值，收藏了， 转自http://blog.youkuaiyun.com/t12x3456/article/details/10298975 Android 颜色选择器之ColorPickerDialog剖析       有这样一个需求，可以让用户自定义背景颜色，这就需要提供一个颜色选择器给用户.       在Android 中，如
ANDROID 颜色选择器
EN_Blog
04-19 960
  这两天花了点时间做了一个android 的 颜色选择器   大牛就不要笑了. 看了几篇文章... 其实好像都是转载的...找不到出处. 其中有一个是 "AS3调色板算法" 里面有介绍了原理. 我们经常看到这种样子的颜色选择器吧..   我这里就只是简单说一下. 1构建一张 七彩图:   然后其实右边的亮度选择是:     这样我们的代码就可以进行啦....
Android 颜色选择器的实现与应用
因此，我们假设这里需要讨论的是Android颜色选择器的功能、设计以及在Android应用开发中的使用。 #### 标签解读 “Android 颜色选择器”作为标签，它代表了我们即将讨论的主题范围。标签的使用有助于我们在Android...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值