Android 颜色选择器之ColorPickerDialog剖析
有这样一个需求,可以让用户自定义背景颜色,这就需要提供一个颜色选择器给用户.
在Android 中,如何实现这样的功能呢,遇到这种需求是,先查看一下ApiDemos,是否已经有相关的实例,果然,找到了一个可以参考的demo:ColorPickerDialog
我已经把apidemos导入到eclipse中,请看截图:
我们要找的就是这个ColorPickerDialog,在com.example.android.apis.graphics目录下,是一个颜色选择器对话框,在哪个demo中使用的呢,References下之后,发现是在
FingerPaint,也就是涂鸦的例子中:
接下来还是直接看代码:
package com.example.android.apis.graphics;
import android.os.Bundle;
import android.app.Dialog;
import android.content.Context;
import android.graphics.*;
import android.view.MotionEvent;
import android.view.View;
public class ColorPickerDialog extends Dialog {
public interface OnColorChangedListener {
void colorChanged(int color);
}
private OnColorChangedListener mListener;
private int mInitialColor;
private static class ColorPickerView extends View {//颜色选择器自定义View
private Paint mPaint;
private Paint mCenterPaint;
private final int[] mColors;
private OnColorChangedListener mListener;//颜色改变回调
ColorPickerView(Context c, OnColorChangedListener l, int color) {
super(c);
mListener = l;
mColors = new int[] {//渐变色数组
0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00,
0xFFFFFF00, 0xFFFF0000
};
Shader s = new SweepGradient(0, 0, mColors, null);
//初始化渐变色画笔
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setShader(s);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(32);
//初始化中心园画笔
mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCenterPaint.setColor(color);
mCenterPaint.setStrokeWidth(5);
}
private boolean mTrackingCenter;
private boolean mHighlightCenter;
@Override
protected void onDraw(Canvas canvas) {
float r = CENTER_X - mPaint.getStrokeWidth()*0.5f;
//移动中心
canvas.translate(CENTER_X, CENTER_X);
//画出色环和中心园
canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);
if (mTrackingCenter) {
int c = mCenterPaint.getColor();
mCenterPaint.setStyle(Paint.Style.STROKE);
if (mHighlightCenter) {
mCenterPaint.setAlpha(0xFF);
} else {
mCenterPaint.setAlpha(0x80);
}
canvas.drawCircle(0, 0,
CENTER_RADIUS + mCenterPaint.getStrokeWidth(),
mCenterPaint);
mCenterPaint.setStyle(Paint.Style.FILL);
mCenterPaint.setColor(c);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(CENTER_X*2, CENTER_Y*2);
}
private static final int CENTER_X = 100;
private static final int CENTER_Y = 100;
private static final int CENTER_RADIUS = 32;
private int floatToByte(float x) {
int n = java.lang.Math.round(x);
return n;
}
private int pinToByte(int n) {
if (n < 0) {
n = 0;
} else if (n > 255) {
n = 255;
}
return n;
}
private int ave(int s, int d, float p) {
return s + java.lang.Math.round(p * (d - s));
}
private int interpColor(int colors[], float unit) {
if (unit <= 0) {
return colors[0];
}
if (unit >= 1) {
return colors[colors.length - 1];
}
float p = unit * (colors.length - 1);
int i = (int)p;
p -= i;
// now p is just the fractional part [0...1) and i is the index
int c0 = colors[i];
int c1 = colors[i+1];
int a = ave(Color.alpha(c0), Color.alpha(c1), p);
int r = ave(Color.red(c0), Color.red(c1), p);
int g = ave(Color.green(c0), Color.green(c1), p);
int b = ave(Color.blue(c0), Color.blue(c1), p);
return Color.argb(a, r, g, b);
}
private int rotateColor(int color, float rad) {
float deg = rad * 180 / 3.1415927f;
int r = Color.red(color);
int g = Color.green(color);
int b = Color.blue(color);
ColorMatrix cm = new ColorMatrix();
ColorMatrix tmp = new ColorMatrix();
cm.setRGB2YUV();
tmp.setRotate(0, deg);
cm.postConcat(tmp);
tmp.setYUV2RGB();
cm.postConcat(tmp);
final float[] a = cm.getArray();
int ir = floatToByte(a[0] * r + a[1] * g + a[2] * b);
int ig = floatToByte(a[5] * r + a[6] * g + a[7] * b);
int ib = floatToByte(a[10] * r + a[11] * g + a[12] * b);
return Color.argb(Color.alpha(color), pinToByte(ir),
pinToByte(ig), pinToByte(ib));
}
private static final float PI = 3.1415926f;
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX() - CENTER_X;
float y = event.getY() - CENTER_Y;
boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mTrackingCenter = inCenter;
if (inCenter) {//是否则中心园
mHighlightCenter = true;
invalidate();
break;
}
case MotionEvent.ACTION_MOVE:
if (mTrackingCenter) {
if (mHighlightCenter != inCenter) {
mHighlightCenter = inCenter;
invalidate();
}
} else {
float angle = (float)java.lang.Math.atan2(y, x);
// need to turn angle [-PI ... PI] into unit [0....1]
float unit = angle/(2*PI);
if (unit < 0) {
unit += 1;
}
mCenterPaint.setColor(interpColor(mColors, unit));
invalidate();
}
break;
case MotionEvent.ACTION_UP:
if (mTrackingCenter) {
if (inCenter) {
mListener.colorChanged(mCenterPaint.getColor());
}
mTrackingCenter = false; // so we draw w/o halo
invalidate();
}
break;
}
return true;
}
}
public ColorPickerDialog(Context context,
OnColorChangedListener listener,
int initialColor) {
super(context);
mListener = listener;
mInitialColor = initialColor;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
OnColorChangedListener l = new OnColorChangedListener() {
public void colorChanged(int color) {
mListener.colorChanged(color);
dismiss();
}
};
setContentView(new ColorPickerView(getContext(), l, mInitialColor));
setTitle("Pick a Color");
}
}
当然,目前的这个例子还有一定的局限,比如无黑白色,只能选择大概的颜色区间(后续会讲解). 当然只要把这个demo研究好后,具体的改进不是问题.
另附上ApiDemos下载地址:
http://download.csdn.net/detail/t12x3456/6007883
如有转载,请声明出处: 时之沙:
http://blog.csdn.net/t12x3456
分享到:
相关推荐
【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR ) https://blog.csdn.net/shulianghan/article/details/125047457 博客配套源码 ...
Android下使用OpenGL渲染yuv420p图像并显示。例子中提供了两种类型,一种使用GLSurfaceView在onDrawframe中调用native方法绘制,另外一种使用EGL,直接在native层完成渲染和显示功能。
根据不同的颜色值,选择自己想要的颜色,然后点击颜色选择板上的颜色,图片或字体自动附上自己想要的颜色!
这是一个 android 动画特效库, 可以实现各种炫酷动画。 1. 安装 gradle: dependencies { compile 'com.gplibs:magic-surface-view:1.1.1' } 2. 一些示例效果 此文档只做一些简单说明, 具体使用方法还请参考 示例...
一个利用RxJava在TextView和EditText上渲染的markdown解析器,支持大部分语法以及部分语法在EditText上实时预览(yydcdut)
MarkdownView - 支持Markdown渲染的WebView实现
支持YUV 的I420/NV21/NV12的数据渲染,关键字:opengl es 、surfaceview、android、camera
【Opengl Android】在安卓上渲染一个obj模型 用了obj2openjl 这个库
《android 渲染架构演进》
ArcEngine简单教程——栅格、矢量图层的颜色渲染对应demo; 备份链接:链接:https://pan.baidu.com/s/1e9I07SEFI1kRzmZuiLxQ7w 提取码:kkw5 教程博客:https://blog.csdn.net/nominior/article/details/106279762
关于Android游戏开发的前台渲染的基础
之前用id获取DOM的方式颜色渲染不上
android 最新ffmpeg3.4.2版本, 实现硬解软解视频+nativewindow渲染例子
非常方便,前端页面只需引用两个js,加一个div(其他标签进行渲染)就可使用,不存在兼容性问题
根据数据结构动态渲染视图,render.view 为渲染视图结构。
包含JTable基本操作和初始化方法 和高级的颜色渲染功能
用android shader线性渲染实现类似与歌词逐字变色同步的效果
利用opencv库对头发图片进行颜色渲染,实现染发效果。 完整的源码工程文件,可直接编译运行。
android 图片渲染效果源码.zip
使用Html来渲染Android界面的动态化界面方案