【Android自定义View】仿Photoshop取色器ColorPicker(四)完结篇

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/R3lish/article/details/77526936

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(三)

Dialog示意图

初始化

这是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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页