先看下最终的效果
一、开始实现
新建一个doughnutview继承view
|
1
2
3
|
public class doughnutview extends view {} |
先重写onmeasure方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/** * 当布局为wrap_content时设置默认长宽 * * @param widthmeasurespec * @param heightmeasurespec */ @override protected void onmeasure(int widthmeasurespec, int heightmeasurespec) { setmeasureddimension(measure(widthmeasurespec), measure(heightmeasurespec)); } private int measure(int origin) { int result = default_min_width; int specmode = measurespec.getmode(origin); int specsize = measurespec.getsize(origin); if (specmode == measurespec.exactly) { result = specsize; } else { if (specmode == measurespec.at_most) { result = math.min(result, specsize); } } return result; } |
下面就是最重要的重写ondraw方法，大致流程如下
1、画白色圆环(背景)，记得改下activity背景色不然白色圆环看不出来。
|
1
2
3
4
5
6
7
8
9
|
//画背景白色圆环initpaint();float doughnutwidth = math.min(width, height) / 2 * 0.15f;paint.setstrokewidth(doughnutwidth);paint.setstyle(paint.style.stroke);paint.setcolor(color.white);paint.setantialias(true);rectf rectf = new rectf((width > height ? math.abs(width - height) / 2 : 0) + doughnutwidth / 2, (height > width ? math.abs(height - width) / 2 : 0) + doughnutwidth / 2, width - (width > height ? math.abs(width - height) / 2 : 0) - doughnutwidth / 2, height - (height > width ? math.abs(height - width) / 2 : 0) - doughnutwidth / 2);canvas.drawarc(rectf, 0, 360, false, paint); |
2、画彩色圆环
使用sweepgradient来实现圆环渐变的效果，这里有个判断当设置的颜色数组只有一个颜色的时候，直接'setcolor'，有多个颜色才使用sweepgradient实现渐变色。这样就能既支持渐变色又支持单色。
这里还有一点要注意，sweepgradient默认是从3点钟位置开始渐变的，为了能让它从12点钟位置开始渐变所以将画布旋转了-90°。
|
1
2
3
4
5
6
7
8
9
10
11
|
//画彩色圆环initpaint();canvas.rotate(-90, width / 2, height / 2);paint.setstrokewidth(doughnutwidth);paint.setstyle(paint.style.stroke);if (doughnutcolors.length > 1) { paint.setshader(new sweepgradient(width / 2, height / 2, doughnutcolors, null));} else { paint.setcolor(doughnutcolors[0]);}canvas.drawarc(rectf, 0, currentvalue, false, paint); |
3、画中间数值的白色背景(只是为了让数值显示更明显一些)
|
1
2
3
4
5
6
|
//画中间数值的背景int fontsize = 50;initpaint();paint.setstyle(paint.style.fill);paint.setcolor(color.white);canvas.drawcircle(width / 2, height / 2, fontsize * 2, paint);} |
4、画中间数值
|
1
2
3
4
5
6
7
8
|
//画中间数值canvas.rotate(90, width / 2, height / 2);initpaint();paint.setcolor(colorutils.getcurrentcolor(currentvalue / 360f, doughnutcolors));paint.settextsize(fontsize);paint.settextalign(paint.align.center);float baseline = height / 2 - (paint.getfontmetrics().descent + paint.getfontmetrics().ascent) / 2;canvas.drawtext((int) (currentvalue / 360f * 100) + "%", width / 2, baseline, paint); |
这里有两点比较坑：
1、数值的颜色
要实现的效果是让数值的颜色是跟彩色圆环终点的颜色是一样的。寻寻觅觅很久也没有找到获取sweepgradient渲染到某一个角度时颜色的方法=_=
最终花了差不多半天时间写了个颜色渐变算法，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
/*** 颜色渐变算法* 获取某个百分比下的渐变颜色值** @param percent* @param colors* @return*/public static int getcurrentcolor(float percent, int[] colors) { float[][] f = new float[colors.length][3]; for (int i = 0; i < colors.length; i++) { f[i][0] = (colors[i] & 0xff0000) >> 16; f[i][1] = (colors[i] & 0x00ff00) >> 8; f[i][2] = (colors[i] & 0x0000ff); } float[] result = new float[3]; for (int i = 0; i < 3; i++) { for (int j = 0; j < f.length; j++) { if (f.length == 1 || percent == j / (f.length - 1f)) { result = f[j]; } else { if (percent > j / (f.length - 1f) && percent < (j + 1f) / (f.length - 1)) { result[i] = f[j][i] - (f[j][i] - f[j + 1][i]) * (percent - j / (f.length - 1f)) * (f.length - 1f); } } } } return color.rgb((int) result[0], (int) result[1], (int) result[2]);} |
2、数值居中对齐问题
drawtext是根据baseline来定位的。具体可以看下下面两篇文章的分析：文章一、文章二。数字跟文字字母的居中方式可能还略有不同。
二、动画效果的实现
先上代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
public void setvalue(float value) {valueanimator valueanimator = valueanimator.offloat(currentvalue, value);valueanimator.setduration(300);valueanimator.setinterpolator(new interpolator() { @override public float getinterpolation(float v) { return 1-(1-v)*(1-v)*(1-v); }});valueanimator.addupdatelistener(new valueanimator.animatorupdatelistener() { @override public void onanimationupdate(valueanimator valueanimator) { currentvalue = (float) valueanimator.getanimatedvalue(); invalidate(); }});valueanimator.start();} |
使用valueanimator来实现动画效果。还可以设置不同的插值器来实现不同的动画效果：
|
1
2
3
4
|
valueanimator.setinterpolator(new accelerateinterpolator());//加速 valueanimator.setinterpolator(new decelerateinterpolator());//减速 valueanimator.setinterpolator(new acceleratedecelerateinterpolator());//加速减速 valueanimator.setinterpolator(new linearinterpolator());//云速 |
常用插值器介绍可以看这篇文章。
当然也可以自己实现一个简单的插值器：
|
1
2
3
4
5
6
|
valueanimator.setinterpolator(new interpolator() { @override public float getinterpolation(float v) { return 1-(1-v)*(1-v)*(1-v); }}); |
以上就是本文的全部内容，希望对大家的学习有所帮助。
