美文网首页自定义view相关自定义Android开发
Android自定义View之酷炫吊炸天的数字圆环

Android自定义View之酷炫吊炸天的数字圆环

作者: hellsam | 来源:发表于2015-12-21 18:13 被阅读3273次

    先看下最终的效果

    开始实现

    新建一个DoughnutView继承View

        public class DoughnutView extends View {
        
        }
    

    先重写onMeasure方法,为什么要重写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, 0, 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, 0, currentValue, false, paint);
      
    3. 画中间数值的白色背景(只是为了让数值显示更明显一些)

      //画中间数值的背景
      int fontSize = 50;
      initPaint();
      paint.setStyle(Paint.Style.FILL);
      paint.setColor(Color.WHITE);
      canvas.drawCircle(width / 2, height / 2, fontSize * 2, paint);}
      
    4. 画中间数值

      //画中间数值
      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渲染到某一个角度时颜色的方法=_=

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

      /**
       * 颜色渐变算法
       * 获取某个百分比下的渐变颜色值
       *
       * @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);
        }
    });
    

    全部测试代码下载地址:
    https://github.com/hellsam/DoughnutDemo_Android

    欢迎留言交流,如有描述不当或错误的地方还请留言告知。

    相关文章

      网友评论

      本文标题:Android自定义View之酷炫吊炸天的数字圆环

      本文链接:https://www.haomeiwen.com/subject/myvmhttx.html