效果图
效果图
HSV
首先，要说的是HSV，这是一种颜色模型，参考百度百科资料。
H参数表示色彩信息，即所处的光谱颜色的位置。该参数用一角度量来表示，红、绿、蓝分别相隔120度。互补色分别相差180度。纯度S为一比例值，范围从0到1，它表示成所选颜色的纯度和该颜色最大的纯度之间的比率。S=0时，只有灰度。V表示色彩的明亮程度，范围从0到1。有一点要注意：它和光强度之间并没有直接的联系。
这里的两个颜色调节的滑块，用的就是H色彩信息和V色彩的明亮度
开始开发
准备
显示效果的图片和滑块的图片是从网易云音乐提取出来的~
Hue开发
Hue的值是从0360，其他两个是01
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);
测量
我这里是直接把最小高度给设定了
@Overrideprotected 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;@Overridepublic 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上了,/zouyuanfeng/ColorPicker
最后的最后
右上角按钮是写的一个HSV模型颜色调节的变化，很简单，这里就不再说了
作者：依风听雨锋
链接：/p/8ba36619ab0a
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
