ColorPicker
一款仿Photoshop取色器的Android版取色器。
github地址：https://github.com/relish-wang/ColorPicker
前言
上一篇已經(jīng)簡(jiǎn)單介紹了ColorPicker的核心自定義控件ColorPickerView的繪制流程。接下來(lái)我們?cè)敿?xì)解析一下ColorPickerView的監(jiān)聽事件相關(guān)代碼。
注：
- 1 如果你對(duì)HSV顏色空間和RGB顏色空間不夠熟悉的話，請(qǐng)參看該系列的第一篇文章【Android自定義View】仿Photoshop取色器ColorPicker(一)
- 2 如果你對(duì)ColorPickerView的繪制流程不熟悉的話 ，請(qǐng)參看該系列的第二篇文章【Android自定義View】仿Photoshop取色器ColorPicker(二)
初始顏色傳入
在講顏色改變監(jiān)聽之前，先來(lái)講講初始顏色傳入時(shí)，代碼的變化吧!
- 1 先把RGB顏色轉(zhuǎn)化成HSV三個(gè)值
- 2 刷新頁(yè)面
invalidate
說(shuō)明：調(diào)用invalidate后，View會(huì)觸發(fā)onDraw()方法，因此兩個(gè)調(diào)色板會(huì)根據(jù)現(xiàn)在的HSV值繪制當(dāng)前顯示的色板以及指示器的位置。
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();
}
顏色改變監(jiān)聽事件
在選擇顏色過(guò)程中，會(huì)觸發(fā)兩種監(jiān)聽事件：軌跡球拖拽事件(onTrackballEvent)、屏幕點(diǎn)擊事件(onTouchEvent)
軌跡球拖拽事件onTrackballEvent
觀察這邊的代碼，這里分為兩種情況處理：
- 當(dāng)前觸點(diǎn)在[飽和度灰度調(diào)色板]上
- 根據(jù)x、y坐標(biāo)獲得sat(飽和度)、val(灰度)值（并且做了邊界處理）
- 當(dāng)前觸點(diǎn)在[色相調(diào)色板]上
- 根據(jù)y軸坐標(biāo)獲得hue(色相)值 (并且做了邊界處理)
最后再將HSV值換算成RGB值，通過(guò)監(jiān)聽器回調(diào)給上一級(jí)(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);
}
屏幕點(diǎn)擊事件onTrackballEvent
- 1 監(jiān)聽了手指的DOWN、UP、MOVE的事件
- 2 具體處理邏輯在
moveTrackersIfNeeded()方法中- 2.1 先判斷觸點(diǎn)是否在調(diào)色板內(nèi)
- 2.2 然后根據(jù)調(diào)色板更新對(duì)應(yīng)的sat、val值或hue值
- 3 根據(jù)是否更新了顏色進(jìn)行監(jiān)聽回調(diào)
- 4 刷新頁(yè)面
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的初始顏色傳入+顏色改變監(jiān)聽。下一篇將講解ColorPickerDialog的主要代碼，敬請(qǐng)期待。
