仿网易云音乐之皮肤自选颜色

效果图

效果图

HSV

首先，要说的是HSV，这是一种颜色模型，参考百度百科资料。

• H参数表示色彩信息，即所处的光谱颜色的位置。该参数用一角度量来表示，红、绿、蓝分别相隔120度。互补色分别相差180度。
• 纯度S为一比例值，范围从0到1，它表示成所选颜色的纯度和该颜色最大的纯度之间的比率。S=0时，只有灰度。
• V表示色彩的明亮程度，范围从0到1。有一点要注意：它和光强度之间并没有直接的联系。

这里的两个颜色调节的滑块，用的就是H色彩信息和V色彩的明亮度

开始开发

准备

显示效果的图片和滑块的图片是从网易云音乐提取出来的~

Hue开发

Hue的值是从0_{360，其他两个是0}1

    private int[] buildHueColorArray() {
        int[] hue = new int[361];
        for (int i = 0; i < hue.length; i++) {
            hue[i] = Color.HSVToColor(new float[]{i, 1f, 1f});
        }
        return hue;
    }

构建H色彩信息的颜色值，也就是第一个滑块的颜色值，然后采用线性渐变的方式设置颜色值

    if (mHueRectF == null)
            mHueRectF = new RectF(mSwipeRadius, mSwipeRadius - mColorHeight / 2 + marginTopAndBottom, mWidth - mSwipeRadius, mSwipeRadius + mColorHeight / 2 + marginTopAndBottom);
    linearGradient = new LinearGradient(mHueRectF.left, mHueRectF.top, mHueRectF.right, mHueRectF.top, buildHueColorArray(), null,
                    Shader.TileMode.CLAMP);
    //设置渲染器
    mHuePaint.setShader(linearGradient);
    canvas.drawRoundRect(mHueRectF, 15, 15, mHuePaint); //绘制颜色条，就是一个用线性渐变渲染的圆角矩形~

Value开发

同样的明度的颜色条也是用HSV构建，只是H使用前一个颜色条选中的颜色固定，只是修改明度从0~1变化

    private int[] buildValueColorArray() {
        int[] value = new int[11];
        for (int i = 0; i < value.length; i++) {
            value[i] = Color.HSVToColor(new float[]{colorHSV[0], 1f, (float) i / 10});
        }
        return value;
    }

跟Hue一样，绘制好颜色条，只是y不一样，其他都一样，我这里设置的是比他多3 * mSwipeRadius，也就是一个半滑块的高度

        if (mValueRectF == null)
            mValueRectF = new RectF(mSwipeRadius, mSwipeRadius - mColorHeight / 2 + 3 * mSwipeRadius + marginTopAndBottom,
                    mWidth - mSwipeRadius, mSwipeRadius + mColorHeight / 2 + 3 * mSwipeRadius + marginTopAndBottom);
        final RectF rect = mValueRectF;
        //明度线性渲染器
        LinearGradient mValueShader = new LinearGradient(rect.left, rect.top, rect.right, rect.top,
                buildValueColorArray(), null, Shader.TileMode.CLAMP);
        mValuePaint.setShader(mValueShader);
        canvas.drawRoundRect(mValueRectF, 15, 15, mValuePaint);

滑块

滑块的图片是从网易云音乐中提取出来的

        mSwipeBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.swipe); //在初始化时加载图片
        mSwipeRadius = lastValueX = mSwipeBitmap.getWidth() / 2; //半径

然后就是分别绘制Hue和Value的滑块，代码基本类似，只是所在位置不一样

        //绘制Hue滑块
        if (mSwipeHueCx < mSwipeRadius) //判断边界
            mSwipeHueCx = mSwipeRadius;
        else if (mSwipeHueCx > mWidth - mSwipeRadius)
            mSwipeHueCx = mWidth - mSwipeRadius;
        canvas.drawBitmap(mSwipeBitmap, mSwipeHueCx - mSwipeRadius, marginTopAndBottom, mSwipePaint);

        //绘制Value滑块
        if (mSwipeValueCx < mSwipeRadius)  //判断边界
            mSwipeValueCx = mSwipeRadius;
        else if (mSwipeValueCx > mWidth - mSwipeRadius)
            mSwipeValueCx = mWidth - mSwipeRadius;
        canvas.drawBitmap(mSwipeBitmap, mSwipeValueCx - mSwipeRadius, 3 * mSwipeRadius + marginTopAndBottom, mSwipePaint);

测量

我这里是直接把最小高度给设定了

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int measureWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        setMeasuredDimension(measureWidth,
                measureHeight(heightMeasureSpec));
        mWidth = measureWidth;
    }


    private int measureHeight(int heightMeasureSpec) {
        int result = (int) (5 * mSwipeRadius + 2 * marginTopAndBottom);
        int specMode = MeasureSpec.getMode(heightMeasureSpec);
        int specSize = MeasureSpec.getSize(heightMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY && specSize < result) {
            throw new IllegalArgumentException("Height is too small to display completely , the height needs to be greater than " + px2dp(result) + "dp !");
        }
        return result;
    }

最后就是点击事件的监听

在ACTION_DOWN时，判断点击的区域，确定点击的是Hue还是Value区域，在ACTION_MOVE的时候判断event.getX()来重绘所点击滑块的位置，并计算滑块所在的颜色：

• Hue(值是0~360)是：360*点的x位置（减去左边距）/ 颜色条的宽度
• Value值是0~1：点的x位置（减去左边距）/ 颜色条的宽度
  最后就是重绘滑块位置，跟选中颜色的回调监听

    private int clickPanel = -1;
    private float lastValueX;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        if (x < mSwipeRadius || x > mWidth - mSwipeRadius)
            return super.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (event.getY() < (5 * mSwipeRadius + 2 * marginTopAndBottom) / 2) { //色相区域
                    clickPanel = 1;
                    updateHueDate(x);
                } else if (event.getY() < 5 * mSwipeRadius + 2 * marginTopAndBottom) {
                    clickPanel = 2;
                    mSwipeValueCx = lastValueX = x;
                    updateValueDate();
                    invalidate();
                } else return super.onTouchEvent(event);

                break;
            case MotionEvent.ACTION_MOVE:
                if (clickPanel == 1) {
                    updateHueDate(x);
                } else if (clickPanel == 2) {
                    mSwipeValueCx = lastValueX = x;
                    updateValueDate();
                    invalidate();
                } else return super.onTouchEvent(event);
                break;
            case MotionEvent.ACTION_UP:
                clickPanel = -1;
                break;

        }
        return true;

    }

    private void updateHueDate(float x) {
        mSwipeHueCx = x;
        colorHSV[0] = 360 * (x - mSwipeRadius) / (mWidth - mSwipeBitmap.getWidth());
        updateValueDate();
        invalidate();
    }

    private void updateValueDate() {
        colorHSV[2] = (lastValueX - mSwipeRadius) / (mWidth - mSwipeBitmap.getWidth());
        if (mOnSelectColorListener != null) {
            mOnSelectColorListener.onSelectColor(Color.HSVToColor(colorHSV));
        }
    }

代码

代码放在github上了,https://github.com/zouyuanfeng/ColorPicker

最后的最后

右上角按钮是写的一个HSV模型颜色调节的变化，很简单，这里就不再说了

效果图