ColorPicker
一款仿Photoshop取色器的Android版取色器。
github地址：https://github.com/relish-wang/ColorPicker
前言
上一篇已经简单介绍了ColorPicker的核心自定义控件ColorPickerView的绘制流程。接下来我们详细解析一下ColorPickerView的监听事件相关代码。
注：
- 1 如果你对HSV颜色空间和RGB颜色空间不够熟悉的话，请参看该系列的第一篇文章【Android自定义View】仿Photoshop取色器ColorPicker(一)
- 2 如果你对ColorPickerView的绘制流程不熟悉的话 ，请参看该系列的第二篇文章【Android自定义View】仿Photoshop取色器ColorPicker(二)
初始颜色传入
在讲颜色改变监听之前，先来讲讲初始颜色传入时，代码的变化吧!
- 1 先把RGB颜色转化成HSV三个值
- 2 刷新页面
invalidate
说明：调用invalidate后，View会触发onDraw()方法，因此两个调色板会根据现在的HSV值绘制当前显示的色板以及指示器的位置。
public void setColor(int color) {
setColor(color, false);
}
public void setColor(int color, boolean callback) {
float[] hsv = new float[3];
Color.colorToHSV(color, hsv);
mHue = hsv[0];
mSat = hsv[1];
mVal = hsv[2];
if (callback && mListener != null) {
mListener.onColorChanged(Color.HSVToColor(new float[]{mHue, mSat, mVal}));
}
invalidate();
}
颜色改变监听事件
在选择颜色过程中，会触发两种监听事件：轨迹球拖拽事件(onTrackballEvent)、屏幕点击事件(onTouchEvent)
轨迹球拖拽事件onTrackballEvent
观察这边的代码，这里分为两种情况处理：
- 当前触点在[饱和度灰度调色板]上
- 根据x、y坐标获得sat(饱和度)、val(灰度)值（并且做了边界处理）
- 当前触点在[色相调色板]上
- 根据y轴坐标获得hue(色相)值 (并且做了边界处理)
最后再将HSV值换算成RGB值，通过监听器回调给上一级(ColorPickerDialog)
@Override
public boolean onTrackballEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
boolean isUpdated = false;
if (event.getAction() == MotionEvent.ACTION_MOVE) {
switch (mLastTouchedPanel) {
case PANEL.SAT_VAL:
float sat, val;
sat = mSat + x / 50f;
val = mVal - y / 50f;
if (sat < 0f) {
sat = 0f;
} else if (sat > 1f) {
sat = 1f;
}
if (val < 0f) {
val = 0f;
} else if (val > 1f) {
val = 1f;
}
mSat = sat;
mVal = val;
isUpdated = true;
break;
case PANEL.HUE:
float hue = mHue - y * 10f;
if (hue < 0f) {
hue = 0f;
} else if (hue > 360f) {
hue = 360f;
}
mHue = hue;
isUpdated = true;
break;
}
}
if (isUpdated) {
if (mListener != null) {
mListener.onColorChanged(Color.HSVToColor(new float[]{mHue, mSat, mVal}));
}
invalidate();
return true;
}
return super.onTrackballEvent(event);
}
屏幕点击事件onTrackballEvent
- 1 监听了手指的DOWN、UP、MOVE的事件
- 2 具体处理逻辑在
moveTrackersIfNeeded()方法中- 2.1 先判断触点是否在调色板内
- 2.2 然后根据调色板更新对应的sat、val值或hue值
- 3 根据是否更新了颜色进行监听回调
- 4 刷新页面
invalidate();
@Override
public boolean onTouchEvent(MotionEvent event) {
boolean isUpdated = false;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mStartTouchPoint = new Point((int) event.getX(), (int) event.getY());
isUpdated = moveTrackersIfNeeded(event);
break;
case MotionEvent.ACTION_MOVE:
isUpdated = moveTrackersIfNeeded(event);
break;
case MotionEvent.ACTION_UP:
mStartTouchPoint = null;
isUpdated = moveTrackersIfNeeded(event);
break;
}
if (isUpdated) {
if (mListener != null) {
mListener.onColorChanged(Color.HSVToColor(new float[]{mHue, mSat, mVal}));
}
invalidate();
return true;
}
return super.onTouchEvent(event);
}
private boolean moveTrackersIfNeeded(MotionEvent event) {
if (mStartTouchPoint == null) return false;
boolean update = false;
int startX = mStartTouchPoint.x;
int startY = mStartTouchPoint.y;
if (mHueRect.contains(startX, startY)) {
mLastTouchedPanel = PANEL.HUE;
mHue = pointToHue(event.getY());
update = true;
} else if (mSatValRect.contains(startX, startY)) {
mLastTouchedPanel = PANEL.SAT_VAL;
float[] result = pointToSatVal(event.getX(), event.getY());
mSat = result[0];
mVal = result[1];
update = true;
}
return update;
}
最后汇总一下，今天这篇文章主要讲了，ColorPickerView的初始颜色传入+颜色改变监听。下一篇将讲解ColorPickerDialog的主要代码，敬请期待。
