【Android自定义View】仿Photoshop取色器ColorPicker(二)

ColorPicker

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

github地址：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的绘制流程就都在这里了。
（PS：字数不多，画图画得手酸……）
下一篇讲解ColorPickerView初始颜色传入和颜色改变监听：【Android自定义View】仿Photoshop取色器ColorPicker(二)