ColorPicker

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

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

前言

上一篇已經(jīng)簡(jiǎn)單介紹了ColorPicker的項(xiàng)目結(jié)構(gòu)以及兩種顏色空間，接下來我們?cè)敿?xì)解析一下ColorPicker的核心自定義控件ColorPickerView。

ColorPickerView

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

介紹

變量名

變量名標(biāo)注的的大圖

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

構(gòu)造方法

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個(gè)構(gòu)造器最后都調(diào)用了第三個(gè)構(gòu)造器。而第三個(gè)構(gòu)造器里的主要內(nèi)容都在一個(gè)名為init()的方法。

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

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

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

    setFocusable(true);//設(shè)置可獲取焦點(diǎn)
    setFocusableInTouchMode(true);//設(shè)置在被觸摸時(shí)會(huì)獲取焦點(diǎn)
}

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);
    //當(dāng)根據(jù)寬度計(jì)算出來的高度大于可允許的最大高度時(shí) 或 當(dāng)前是橫屏
    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);
}

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

onLayout

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

onDraw

繪制ColorPickerView分為兩個(gè)部分：飽和度灰度調(diào)色板mSatValRect+色相調(diào)色板mHueRect。

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

開始了解具體繪制細(xì)節(jié)之前，希望讀者已經(jīng)了解過Shader(著色器)的相關(guān)知識(shí)。

繪制飽和度灰度調(diào)色板

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

/**
 * 繪制S、V選擇區(qū)域（矩形）
 *
 * @param canvas 畫布
 */
private void drawSatValPanel(Canvas canvas) {
    //描邊（先畫一個(gè)大矩形, 再在內(nèi)部畫一個(gè)小矩形，就可以顯示出描邊的效果）
    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);
}

/**
 * 創(chuàng)建SV著色器(明度線性著色器 + 飽和度線性著色器)
 *
 * @return 著色器
 */
private ComposeShader generateSVShader() {
    //明度線性著色器
    if (mValShader == null) {
        mValShader = new LinearGradient(mSatValRect.left, mSatValRect.top, mSatValRect.left, mSatValRect.bottom,
                0xffffffff, 0xff000000, TileMode.CLAMP);
    }
    //HSV轉(zhuǎn)化為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);
}

繪制色相調(diào)色板

1 同理繪制矩形調(diào)色板
2 同理繪制空心圓角矩形

/**
 * 繪制右側(cè)H選擇區(qū)域
 *
 * @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);
}

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