Android知识Android技术知识半栈工程师

环形图自定义View-AnnularChartView

2017-11-16  本文已影响0人  剑小河

跟支付包那个类似

效果图

效果图.jpg 动态效果.gif

使用

 <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);
    }

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

手残说明图.png

绘制过程中,第一个颜色的起点上是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

上一篇 下一篇

猜你喜欢

热点阅读