ColorPicker
一款基于HSV顏色空間的仿Photoshop取色器的Android版顏色拾取器。
github地址：https://github.com/relish-wang/ColorPicker
前言
上一篇已經簡單介紹了ColorPicker的核心自定義控件ColorPickerView的監聽事件相關代碼。接下來我們詳細解析一下ColorPickerDialog的相關代碼
注：
- 1 如果你對HSV顏色空間和RGB顏色空間不夠熟悉的話，請參看該系列的第一篇文章——仿Photoshop取色器ColorPicker(一)
- 2 如果你對ColorPickerView的繪制流程不夠熟悉的話 ，請參看該系列的第二篇文章仿Photoshop取色器ColorPicker(二)
- 3 如果你對ColorPickerView的顏色改變監聽不夠熟悉的話，請參看該系列第三篇文章仿Photoshop取色器ColorPicker(三)
初始化
這是ColorPickerDialog唯一的構造方法，里面的主要內容都在setUp()方法里。
稍微梳理一下代碼：
- 1 文字輸入監聽：為顯示當前選擇的顏色的16進制碼的EditText設置文字輸入監聽器
- 2 顏色改變監聽：為ColorPickerView設置顏色改變監聽
- 3 設置初始顏色：為ColorPickerDialog和ColorPickerView設置初始顏色
- 4 取消/完成顏色拾取：為取消/確認按鈕設置監聽
private ColorPickerDialog(Context context, int initialColor) {
super(context);
setUp(initialColor);
}
private void setUp(int color) {
// ...
// 省略丑陋的findViewById們
// ...
mEtHex.setOnEditorActionListener(this);
// ...
// 省略丑陋的findViewById們
// ...
mColorPicker.setOnColorChangedListener(this);
mOldColor.setBackgroundColor(color); // 顏色預覽色板上顯示舊顏色
mColorPicker.setColor(color, true); // 為ColorPickerView設置初始顏色
mBtnCancel.setOnClickListener(this); // 取消
mBtnConfirm.setOnClickListener(this); // 確認選擇顏色
}
文字輸入監聽
當點擊軟鍵盤上的【完成】按鈕時觸發監聽
- 1 當輸入內容的長度在0到7之間(不包含邊界)觸發顏色變化
- 當顏色轉化發生異常時，將內容顯示成紅色以提醒用戶輸入錯誤，且不進行顏色變化
- 2 當輸入內容的長度不在這個區間，則將內容顯示成紅色以提醒用戶輸入錯誤，且不進行顏色變化
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
if (actionId == EditorInfo.IME_ACTION_DONE) {
InputMethodManager imm = (InputMethodManager) v.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(v.getWindowToken(), 0);
String hexVal = mEtHex.getText().toString();
if (hexVal.length() > 0 || hexVal.length() < 7) {
try {
int c = Utils.convertToColorInt(hexVal);
mColorPicker.setColor(c, true);
mEtHex.setTextColor(mHexDefaultTextColor);
} catch (IllegalArgumentException e) {
mEtHex.setTextColor(Color.RED);
}
} else {
mEtHex.setTextColor(Color.RED);
}
return true;
}
return false;
}
顏色轉化
排除異常情況，正常情況下執行功能的主要是一下三行代碼：
int c = Utils.convertToColorInt(hexVal);
mColorPicker.setColor(c, true);
mEtHex.setTextColor(mHexDefaultTextColor);
讓我們查看一下Utils.convertToColorInt()的實現代碼：
/**
* ARGB(含RGB)顏色 轉 16進制顏色
*
* @param argb ARGB(含RGB)顏色
* @return 16進制顏色
* @throws NumberFormatException 當{@param argb}不是一個正確的顏色格式的字符串時
*/
static int convertToColorInt(@NonNull String argb) throws IllegalArgumentException {
if (argb.matches("[0-9a-fA-F]{1,6}")) {
switch (argb.length()) {
case 1:
return Color.parseColor("#00000" + argb);
case 2:
return Color.parseColor("#0000" + argb);
case 3:
char r = argb.charAt(0), g = argb.charAt(1), b = argb.charAt(2);
//noinspection StringBufferReplaceableByString
return Color.parseColor(new StringBuilder("#")
.append(r).append(r)
.append(g).append(g)
.append(b).append(b)
.toString());
case 4:
return Color.parseColor("#00" + argb);
case 5:
return Color.parseColor("#0" + argb);
case 6:
return Color.parseColor("#" + argb);
}
}
throw new IllegalArgumentException(argb + " is not a valid color.");
}
這里的邏輯我主要參考了Photoshop里顏色選擇器對手動輸入顏色進行的操作。
- 1位: #00000x
- 2位: #0000xx
- 3位: #aabbcc
- 4位: #00xxxx
- 5位: #0xxxxx
- 6位: #xxxxxx
略微觀察可以發現，除了3位的時候要特殊處理，其他的情況下都是在前面加足夠數量的0，以湊齊6位顏色編碼。
關于異常處理Tips：在這里，只要是不符合正則表達式的顏色字符串，都會直接向外拋出異常，而不是進行捕捉。回到前一段關于顏色監聽的代碼可以發現，在監聽中我們捕獲了異常，并用輸入框顏色的改變以反饋用戶。因此對于異常的捕捉與拋也是有講究的。
顏色改變監聽
這里的邏輯就比較顯而易見了
- 用于顯示當前選擇的顏色的色塊更新顏色
- 如果啟用了顏色編碼顯示，則更新輸入框中的顏色
注：這里可能會有疑問。我在輸入框中手動輸入了顏色編碼，從而ColorPickerView更新了顏色，觸發了onColorChanged()，反過來又更新輸入框里的顏色編碼。這這這...這難道不就循環了嗎？這也是我之前考慮到的一個問題，因此并沒有給顯示顏色編碼的輸入框設置TextWatcher，而是OnEditorActionListener，且只有在用戶輸入完成點輸入法右下角的[完成/Done]按鈕才會觸發。
@Override
public void onColorChanged(int color) {
mNewColor.setBackgroundColor(color);
if (mHexValueEnabled) updateHexValue(color);
}
private void updateHexValue(int color) {
mEtHex.setText(Utils.convertToRGB(color).toUpperCase(Locale.getDefault()));
mEtHex.setTextColor(mHexDefaultTextColor);
}
創建Dialog實例
ColorPickerDialog的代碼量并沒有ColorPickerView那么多，其實講完初始化就已經講完了它的核心功能的代碼了，接下來直接講解使用。
回到本文最初介紹ColorPicker初始化的地方，可以看到ColorPickerDialog的唯一的一個構造方法是private的，因為我把它做成了Builder模式，這樣使用起來更靈活。
new ColorPickerDialog.Builder(MainActivity.this, mColor)//上下文, 初始化顏色
.setHexValueEnabled(mHexValueEnable)//是否顯示顏色值(boolean)
.setOnColorPickedListener(mListener)//設置顏色拾取監聽器
.build()
.show();//展示
顏色拾取監聽器OnColorPickedListener:
@Override
public void onColorPicked(int color) {
mColor = color;
mViewColor.setBackgroundColor(mColor);
}
寫在最后
好了經過四篇文章的學習，我們已經將ColorPicker中最核心的代碼學習完了，相信你從頭看到這里對Android自定義View的理解又更深了一層，甚至學到了顏色相關的一些其他知識，比如HSV顏色空間、HSV與RGB顏色轉化。
最后，歡迎大家給我提供寶貴的意見和建議，進一步優化ColorPicker。
GitHub地址: [https://github.com/relish-wang/ColorPicker](https://github.com/relish-wang/ColorPicker)