ColorPicker

一款仿Photoshop取色器的Android版取色器。

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

前言

上一篇已經簡單介紹了ColorPicker的項目結構以及兩種顏色空間，接下來我們詳細解析一下ColorPicker的核心自定義控件ColorPickerView。

ColorPickerView

在閱讀代碼之前，我們先看一下ColorPicker的布局以及一些標注的數值在代碼里的變量名稱。

介紹

變量名

變量名標注的的大圖

閱讀一個自定義View的代碼，只需記住四步走：構造方法、onMeasure、onLayout、onDraw

構造方法

public ColorPickerView(Context context) {
    this(context, null);
}

public ColorPickerView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public ColorPickerView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init();
}

可見，前2個構造器最后都調用了第三個構造器。而第三個構造器里的主要內容都在一個名為init()的方法。

private void init() {
    mDensity = getContext().getResources().getDisplayMetrics().density;//獲取屏幕密度
    mSVTrackerRadius *= mDensity;//灰度飽和度指示器的半徑
    mRectOffset *= mDensity;//H、SV矩形與父布局的邊距
    mHuePanelWidth *= mDensity;//H矩形的寬度
    mPanelSpacing *= mDensity;//H、SV矩形間的間距
    mPreferredHeight *= mDensity;//當mode為MeasureSpec.UNSPECIFIED時的首選高度
    mPreferredWidth *= mDensity;//當mode為MeasureSpec.UNSPECIFIED時的首選寬度

    mDrawingOffset = calculateRequiredOffset();//計算所需位移

    initPaintTools();//初始化畫筆、畫布

    setFocusable(true);//設置可獲取焦點
    setFocusableInTouchMode(true);//設置在被觸摸時會獲取焦點
}

init方法里有很多變量，它們的含義如下圖所示：

變量名

onMeasure

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int widthAllowed = MeasureSpec.getSize(widthMeasureSpec);
    int heightAllowed = MeasureSpec.getSize(heightMeasureSpec);

    widthAllowed = isUnspecified(widthMode) ? (int) mPreferredWidth : widthAllowed;
    heightAllowed = isUnspecified(heightMode) ? (int) mPreferredHeight : heightAllowed;

    int width = widthAllowed;
    int height = (int) (widthAllowed - mPanelSpacing - mHuePanelWidth);
    //當根據寬度計算出來的高度大于可允許的最大高度時 或 當前是橫屏
    if (height > heightAllowed || "landscape".equals(getTag())) {
        height = heightAllowed;
        width = (int) (height + mPanelSpacing + mHuePanelWidth);
    }
    setMeasuredDimension(width, height);
}

private static boolean isUnspecified(int mode) {
    return !(mode == MeasureSpec.EXACTLY || mode == MeasureSpec.AT_MOST);
}

測量模式(MeasureSpecMode)分為EXACTLY、AT_MOST、UNSPECIFIED三種類型。前兩種類型可以通過MeasureSpec.getSize(int measureSpec)獲得具體的值；當測量模式為UNSPECIFIED時，需要我們自己確定自定義View的高寬。這里我設定了一些默認值，使ColorPicker看起來更舒服。

onLayout

這里使用了父類的onLayout方法。

onDraw

繪制ColorPickerView分為兩個部分：飽和度灰度調色板mSatValRect+色相調色板mHueRect。

@Override
protected void onDraw(Canvas canvas) {
    if (mDrawingRect.width() <= 0 || mDrawingRect.height() <= 0) return;
    drawSatValPanel(canvas);//繪制SV選擇區域
    drawHuePanel(canvas);//繪制右側H選擇區域
}

開始了解具體繪制細節之前，希望讀者已經了解過Shader(著色器)的相關知識。

繪制飽和度灰度調色板

1 先畫一個大矩形，再在上面畫我們的飽和度灰度調色板，這樣看起來有一個描邊的效果。
2 繪制飽和度灰度指示器。根據當前選擇的顏色定位到具體的坐標，在這個坐標上做畫。先畫一個半徑為mSVTrackerRadius、邊線粗細為mDensity的空心大圓，再在上面畫一個半徑為mSVTrackerRadius-mDensity、邊線粗細為mDensity的空心小圓。

/**
 * 繪制S、V選擇區域（矩形）
 *
 * @param canvas 畫布
 */
private void drawSatValPanel(Canvas canvas) {
    //描邊（先畫一個大矩形, 再在內部畫一個小矩形，就可以顯示出描邊的效果）
    mBorderPaint.setColor(mBorderColor);
    canvas.drawRect(
            mDrawingRect.left,
            mDrawingRect.top,
            mSatValRect.right + BORDER_WIDTH,
            mSatValRect.bottom + BORDER_WIDTH,
            mBorderPaint);

    //組合著色器 = 明度線性著色器 + 飽和度線性著色器
    ComposeShader mShader = generateSVShader();
    mSatValPaint.setShader(mShader);
    canvas.drawRect(mSatValRect, mSatValPaint);

    //初始化選擇器的位置
    Point p = satValToPoint(mSat, mVal);
    //繪制顯示SV值的選擇器
    mSatValTrackerPaint.setColor(0xff000000);
    canvas.drawCircle(p.x, p.y, mSVTrackerRadius - 1f * mDensity, mSatValTrackerPaint);
    //繪制外圓
    mSatValTrackerPaint.setColor(0xffdddddd);
    canvas.drawCircle(p.x, p.y, mSVTrackerRadius, mSatValTrackerPaint);
}

/**
 * 創建SV著色器(明度線性著色器 + 飽和度線性著色器)
 *
 * @return 著色器
 */
private ComposeShader generateSVShader() {
    //明度線性著色器
    if (mValShader == null) {
        mValShader = new LinearGradient(mSatValRect.left, mSatValRect.top, mSatValRect.left, mSatValRect.bottom,
                0xffffffff, 0xff000000, TileMode.CLAMP);
    }
    //HSV轉化為RGB
    int rgb = Color.HSVToColor(new float[]{mHue, 1f, 1f});
    //飽和線性著色器
    Shader satShader = new LinearGradient(mSatValRect.left, mSatValRect.top, mSatValRect.right, mSatValRect.top,
            0xffffffff, rgb, TileMode.CLAMP);
    //組合著色器 = 明度線性著色器 + 飽和度線性著色器
    return new ComposeShader(mValShader, satShader, PorterDuff.Mode.MULTIPLY);
}

繪制色相調色板

1 同理繪制矩形調色板
2 同理繪制空心圓角矩形

/**
 * 繪制右側H選擇區域
 *
 * @param canvas 畫布
 */
private void drawHuePanel(Canvas canvas) {
    final RectF rect = mHueRect;

    mBorderPaint.setColor(mBorderColor);
    canvas.drawRect(rect.left - BORDER_WIDTH,
            rect.top - BORDER_WIDTH,
            rect.right + BORDER_WIDTH,
            rect.bottom + BORDER_WIDTH,
            mBorderPaint);
    //初始化H線性著色器
    if (mHueShader == null) {
        int[] hue = new int[361];
        int count = 0;
        for (int i = hue.length - 1; i >= 0; i--, count++) {
            hue[count] = Color.HSVToColor(new float[]{i, 1f, 1f});
        }
        mHueShader = new LinearGradient(
                rect.left,
                rect.top,
                rect.left,
                rect.bottom,
                hue,
                null,
                TileMode.CLAMP);
        mHuePaint.setShader(mHueShader);
    }

    canvas.drawRect(rect, mHuePaint);

     float halfHTrackerHeight= mHTrackerHeight / 2;
    //初始化H選擇器選擇條位置
    Point p = hueToPoint(mHue);

    RectF r = new RectF();
    r.left = rect.left - mRectOffset;
    r.right = rect.right + mRectOffset;
    r.top = p.y - halfHTrackerHeight;
    r.bottom = p.y + halfHTrackerHeight;

    //繪制選擇條
    canvas.drawRoundRect(r, 2, 2, mHueTrackerPaint);
}

這樣一來，整個ColorPickerView的繪制流程就都在這里了。
下一篇主要講解ColorPickerView的初始化顏色傳入和顏色改變監聽回調：【Android自定義View】仿Photoshop取色器ColorPicker(三)