Android 动态绘制圆形进度条

效果图

实现思路

• 在画布上直接绘制View，需要了解一下几点
  
  • 1.需要画一个底层小圆和上层大圆
  • 2.圆圈上有不同进度的颜色
  • 3.颜色的变化规律是先慢慢变多再慢慢减少

　一、画圆

• 需要使用Canvas的该方法

   public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
              @NonNull Paint paint) {
          drawArc(oval.left, oval.top, oval.right, oval.bottom, startAngle, sweepAngle, useCenter,
                  paint);
      }
  

• 如下画出了默认的背景圆圈：

  // 设置画笔相关属性
  mPaint.setAntiAlias(true);  //抗锯齿
  mPaint.setColor(Color.rgb(0x3a, 0x58, 0x5f));
  canvas.drawColor(Color.TRANSPARENT); //设置背景透明
  mPaint.setStrokeWidth(mCircleLineStrokeWidthBottom);
  mPaint.setStyle(Paint.Style.STROKE);
  
   // 位置
   mRectF.left = mCircleLineStrokeWidth / 2; // 左上角x
   mRectF.top = mCircleLineStrokeWidth / 2; // 左上角y
   mRectF.right = width - mCircleLineStrokeWidth / 2; // 左下角x
   mRectF.bottom = height - mCircleLineStrokeWidth / 2; // 右下角y
  
   // 绘制圆圈，进度条背景
   canvas.drawArc(mRectF, -90, 360, false, mPaint); //顺时针为正，起始点-90是视图上最高的点
  

二、画进度圆弧

• 其实实现很简单，换另外一种颜色同样在画布上画出即可，支持此时画的不是360°，而是通过进度计算出来的一个圆弧。

  //绘制上面可变的进度条
  mPaint.setColor(Color.rgb(0x2f, 0xc2, 0xe6));
  mPaint.setStrokeWidth(mCircleLineStrokeWidthAbove);
  
  if (isOddNumber) { //奇数轮时
      canvas.drawArc(mRectFAbove, -90, ((float) mProgress / mMaxProgress) * 360, false, mPaint);
  } else {          //偶数轮时，反方向绘制
      canvas.draw