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

概述先看下最终的效果一、开始实现新建一个DoughnutView继承ViewpublicclassDoughnutViewextendsView{

先看下最终的效果

一、开始实现
新建一个DoughnutVIEw继承VIEw

  public class DoughnutVIEw extends VIEw {  }

先重写onMeasure方法。  

 /**   * 当布局为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背景色不然白色圆环看不出来。

 //画背景白色圆环 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,360,false,paint);

2、画彩色圆环

使用SweepGradIEnt来实现圆环渐变的效果，这里有个判断当设置的颜色数组只有一个颜色的时候，直接'setcolor'，有多个颜色才使用SweepGradIEnt实现渐变色。这样就能既支持渐变色又支持单色。

这里还有一点要注意，SweepGradIEnt默认是从3点钟位置开始渐变的，为了能让它从12点钟位置开始渐变所以将画布旋转了-90°。

 //画彩色圆环 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,currentValue,paint);

3、画中间数值的白色背景(只是为了让数值显示更明显一些)

 //画中间数值的背景 int FontSize = 50; initPaint(); paint.setStyle(Paint.Style.FILL); paint.setcolor(color.WHITE); canvas.drawCircle(wIDth / 2,FontSize * 2,paint);}

4、画中间数值

 //画中间数值 canvas.rotate(90,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) + "%",baseline,paint);

这里有两点比较坑：

1、数值的颜色

要实现的效果是让数值的颜色是跟彩色圆环终点的颜色是一样的。寻寻觅觅很久也没有找到获取SweepGradIEnt渲染到某一个角度时颜色的方法=_=

最终花了差不多半天时间写了个颜色渐变算法，代码如下：

 /** * 颜色渐变算法 * 获取某个百分比下的渐变颜色值 * * @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来定位的。具体可以看下下面两篇文章的分析：文章一、文章二。数字跟文字字母的居中方式可能还略有不同。

二、动画效果的实现
先上代码：

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来实现动画效果。还可以设置不同的插值器来实现不同的动画效果：

 valueAnimator.setInterpolator(new AccelerateInterpolator());//加速  valueAnimator.setInterpolator(new DecelerateInterpolator());//减速  valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());//加速减速  valueAnimator.setInterpolator(new linearInterpolator());//云速

常用插值器介绍可以看这篇文章。

当然也可以自己实现一个简单的插值器：

valueAnimator.setInterpolator(new Interpolator() {  @OverrIDe  public float getInterpolation(float v) {    return 1-(1-v)*(1-v)*(1-v);  }});

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

总结

以上是内存溢出为你收集整理的Android自定义View之酷炫数字圆环全部内容，希望文章能够帮你解决Android自定义View之酷炫数字圆环所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。