环形图自定义View-AnnularChartView

跟支付包那个类似

效果图

使用

 <com.riverlet.ringview.AnnularChartView
        android:id="@+id/annularChartView"
        android:layout_width="200dp"
        android:layout_height="200dp" />
----------------------------------------------------------------------------
 AnnularChartView annularChartView = findViewById(R.id.annularChartView);
 annularChartView.setData(new float[]{100f,100f,100f,100f,100f});
复制代码

其他设置

setColors(int[] colors);//设置圆环的颜色数组
setAnimator(ObjectAnimator animator);//设置动画效果
复制代码

实现思路

其实就是钓鱼View的canvas.drawArc()方法绘制圆环

 public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint) {
        super.drawArc(oval, startAngle, sweepAngle, useCenter, paint);
    }
复制代码

• 第1个参数，RectF oval，绘制圆环的范围
• 第2个参数，float startAngle，绘制圆环开始的角度（注意：12点钟开始的角度是270度）
• 第3个参数，loat sweepAngle，圆弧扫过的角度
• 第4个参数，boolean useCenter，圆弧在绘画的时候，是否经过圆形（Paint.Style.STROKE的时候看不出效果）
• 第5个参数，Paint paint，绘制圆弧的画笔

需要根据数据的数组计算出两个数组，

• 一个是包含不同颜色的角度大小数组
• 一个圆环颜色的Paint数组

绘制过程中，第一个颜色的起点上是270度（12点钟是起点），第二个的起点是270的起点加上第一个颜色的角度大小，第二个的起点是270的起点加上第一个颜色和第二个颜色的角度大小，以此类推，循环使用Paint

      for (int i = 0; i < nums; i++) {
                if (i > 0) {
                    lastAngle = (int) (lastAngle + angles[i - 1] * progress);
                }
                paints[i].setStrokeWidth(ringWidth);
                if (angles[i] > 0) {
                    canvas.drawArc(oval, 270 + lastAngle, (angles[i] + 1) * progress, false, paints[i]);
                }
      }
复制代码

动画由属性动画改编progress属性实现，在progress的set方法调用invalidate()重绘

代码地址：AnnularChartView