ColorPicker

一款基于HSV顏色空間的仿Photoshop取色器的Android版顏色拾取器。

github地址：https://github.com/relish-wang/ColorPicker

前言

上一篇已經(jīng)簡單介紹了ColorPicker的核心自定義控件ColorPickerView的監(jiān)聽事件相關(guān)代碼。接下來我們詳細(xì)解析一下ColorPickerDialog的相關(guān)代碼

注：

• 1 如果你對HSV顏色空間和RGB顏色空間不夠熟悉的話典徊，請參看該系列的第一篇文章——仿Photoshop取色器ColorPicker(一)
• 2 如果你對ColorPickerView的繪制流程不夠熟悉的話 笆豁，請參看該系列的第二篇文章仿Photoshop取色器ColorPicker(二)
• 3 如果你對ColorPickerView的顏色改變監(jiān)聽不夠熟悉的話嚎尤，請參看該系列第三篇文章仿Photoshop取色器ColorPicker(三)

Dialog示意圖

初始化

這是ColorPickerDialog唯一的構(gòu)造方法茵瘾，里面的主要內(nèi)容都在setUp()方法里。

稍微梳理一下代碼：

• 1 文字輸入監(jiān)聽：為顯示當(dāng)前選擇的顏色的16進(jìn)制碼的EditText設(shè)置文字輸入監(jiān)聽器
• 2 顏色改變監(jiān)聽：為ColorPickerView設(shè)置顏色改變監(jiān)聽
• 3 設(shè)置初始顏色：為ColorPickerDialog和ColorPickerView設(shè)置初始顏色
• 4 取消/完成顏色拾壬■辍：為取消/確認(rèn)按鈕設(shè)置監(jiān)聽

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); // 顏色預(yù)覽色板上顯示舊顏色
    mColorPicker.setColor(color, true); // 為ColorPickerView設(shè)置初始顏色
    
    mBtnCancel.setOnClickListener(this); // 取消
    mBtnConfirm.setOnClickListener(this); // 確認(rèn)選擇顏色
}

文字輸入監(jiān)聽

當(dāng)點(diǎn)擊軟鍵盤上的【完成】按鈕時觸發(fā)監(jiān)聽

• 1 當(dāng)輸入內(nèi)容的長度在0到7之間(不包含邊界)觸發(fā)顏色變化
  • 當(dāng)顏色轉(zhuǎn)化發(fā)生異常時，將內(nèi)容顯示成紅色以提醒用戶輸入錯誤签舞，且不進(jìn)行顏色變化
• 2 當(dāng)輸入內(nèi)容的長度不在這個區(qū)間秕脓，則將內(nèi)容顯示成紅色以提醒用戶輸入錯誤驹闰，且不進(jìn)行顏色變化

@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;
}

顏色轉(zhuǎn)化

排除異常情況，正常情況下執(zhí)行功能的主要是一下三行代碼：

int c = Utils.convertToColorInt(hexVal);
mColorPicker.setColor(c, true);
mEtHex.setTextColor(mHexDefaultTextColor);

讓我們查看一下Utils.convertToColorInt()的實現(xiàn)代碼：

/**
 * ARGB(含RGB)顏色 轉(zhuǎn) 16進(jìn)制顏色
 *
 * @param argb ARGB(含RGB)顏色
 * @return 16進(jìn)制顏色
 * @throws NumberFormatException 當(dāng){@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里顏色選擇器對手動輸入顏色進(jìn)行的操作撒会。

• 1位: #00000x
• 2位: #0000xx
• 3位: #aabbcc
• 4位: #00xxxx
• 5位: #0xxxxx
• 6位: #xxxxxx

略微觀察可以發(fā)現(xiàn)嘹朗，除了3位的時候要特殊處理，其他的情況下都是在前面加足夠數(shù)量的0诵肛，以湊齊6位顏色編碼屹培。

關(guān)于異常處理Tips：在這里，只要是不符合正則表達(dá)式的顏色字符串怔檩，都會直接向外拋出異常褪秀，而不是進(jìn)行捕捉⊙ρ担回到前一段關(guān)于顏色監(jiān)聽的代碼可以發(fā)現(xiàn)媒吗，在監(jiān)聽中我們捕獲了異常，并用輸入框顏色的改變以反饋用戶乙埃。因此對于異常的捕捉與拋也是有講究的闸英。

顏色改變監(jiān)聽

這里的邏輯就比較顯而易見了

• 用于顯示當(dāng)前選擇的顏色的色塊更新顏色
• 如果啟用了顏色編碼顯示，則更新輸入框中的顏色

注：這里可能會有疑問介袜。我在輸入框中手動輸入了顏色編碼甫何，從而ColorPickerView更新了顏色，觸發(fā)了onColorChanged()遇伞，反過來又更新輸入框里的顏色編碼辙喂。這這這...這難道不就循環(huán)了嗎？這也是我之前考慮到的一個問題鸠珠，因此并沒有給顯示顏色編碼的輸入框設(shè)置TextWatcher巍耗，而是OnEditorActionListener，且只有在用戶輸入完成點(diǎn)輸入法右下角的[完成/Done]按鈕才會觸發(fā)渐排。

@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);
}

創(chuàng)建Dialog實例

ColorPickerDialog的代碼量并沒有ColorPickerView那么多炬太，其實講完初始化就已經(jīng)講完了它的核心功能的代碼了，接下來直接講解使用飞盆。

回到本文最初介紹ColorPicker初始化的地方娄琉，可以看到ColorPickerDialog的唯一的一個構(gòu)造方法是private的，因為我把它做成了Builder模式吓歇，這樣使用起來更靈活孽水。

new ColorPickerDialog.Builder(MainActivity.this, mColor)//上下文, 初始化顏色
    .setHexValueEnabled(mHexValueEnable)//是否顯示顏色值(boolean)
    .setOnColorPickedListener(mListener)//設(shè)置顏色拾取監(jiān)聽器
    .build()
    .show();//展示

顏色拾取監(jiān)聽器OnColorPickedListener:

@Override
public void onColorPicked(int color) {
    mColor = color;
    mViewColor.setBackgroundColor(mColor);
}

寫在最后

好了經(jīng)過四篇文章的學(xué)習(xí)，我們已經(jīng)將ColorPicker中最核心的代碼學(xué)習(xí)完了城看，相信你從頭看到這里對Android自定義View的理解又更深了一層女气，甚至學(xué)到了顏色相關(guān)的一些其他知識，比如HSV顏色空間测柠、HSV與RGB顏色轉(zhuǎn)化炼鞠。
最后缘滥，歡迎大家給我提供寶貴的意見和建議，進(jìn)一步優(yōu)化ColorPicker谒主。
GitHub地址: [https://github.com/relish-wang/ColorPicker](https://github.com/relish-wang/ColorPicker)