仿网易云音乐之皮肤自选颜色
2017-04-20 本文已影响0人
依风听雨锋
效果图
效果图
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);
测量
我这里是直接把最小高度给设定了
@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模型颜色调节的变化，很简单，这里就不再说了
效果图
