服务器之家

服务器之家 > 正文

Android自定义View之酷炫数字圆环

时间:2021-05-07 15:42     来源/作者:hellsam

先看下最终的效果

Android自定义View之酷炫数字圆环

一、开始实现
新建一个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);
  }
});

以上就是本文的全部内容,希望对大家的学习有所帮助。

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
返回顶部