Android绘制圆形百分比加载圈效果

先看一组加载效果图，有点粉粉的加载圈：

自定义这样的圆形加载圈还是比较简单的,主要是用到Canvans的绘制文本,绘制圆和绘制圆弧的api:

 public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) {
 ...
 }



 public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint) {
  ...
 }


 
 public void drawText(String text, float x, float y, Paint paint) {
  ...
 }

开始绘图前需要考虑的以下几点:

1.获取控件的宽和高,这个是决定圆的半径大小的,半径大小等于宽高的最小值的1/2,为什么是最小值呢?因为这样就不会受布局文件中宽高属性不一样的影响,当然我们自己在使用的时候肯定是宽高都是会写成一样的,这样就刚好是一个正方形,绘制出来的圆就刚好在该正方形区域内.做了这样的处理,其他人在用的时候就不用当心圆会不会超出控件范围的情况了.

2.确定圆心的坐标,有了半径和圆心坐标就可以确定一个圆了,布局中的控件区域其实都是一个矩形区域,如果想要绘制出来的圆刚好处于控件的矩形区域内并且和矩形的最短的那条边相切,那么圆心坐标的就是该矩形宽高的1/2,即刚好位于矩形区域的中心点.

3.绘制圆弧,注意这里的圆弧指的是进度圈,看上面的示例图是有2种样式,分别是实心的加载圈和空心加载圈,这个其实就是paint的样式决定,如果是实心圆,paint设置为Paint.Style.FILL(填充模式),同时drawArc的useCenter设置为true;如果是空心圆则paint设置为Paint.Style.STROKE(线性模式),同时drawArc的useCenter设置为false即可.值得一提的是绘制空心圆的时候还需要考虑圆弧的宽度,宽度有多大将决定进度圈的厚度.因此在定义空心圆的矩形区域的时候需要减去进度圈的厚度,否则画出来的进度圈会超出控件的区域.

4.绘制文本,需要定位起始点,文本的起始点比较特殊,它是以左下角为起始点的,起点x坐标=圆心x坐标-文本宽度1/2;起始点y坐标=圆心y坐标+文本高度1/2;至于文本的宽高获取可以通过paint的getTextBounds()方法获取,具体等下看代码.

ok,直接上代码,注释已经很详细了.

圆形加载圈

public class CircleProgressView extends View {
  private int width;//控件宽度
  private int height;//控件高
  private float radius;//半径
  private float pointX;//圆心x坐标
  private float pointY;//圆心y坐标
  private int circleBackgroundColor;//背景颜色
  private int circleBackgroundAlpha; //背景透明度
  private int circleRingColor;//进度颜色
  private int progressTextColor;//进度文本的颜色
  private int progressTextSize;//进度文本的字体大小
  private int circleRingWidth; //进度的宽度
  private Paint mPaint;
  private int progress;//进度值
  private boolean isRingStyle;//是否是空心的圆环进度样式

  public CircleProgressView(Context context) {
    this(context, null);
  }

  public CircleProgressView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    circleBackgroundColor = Color.WHITE;
    circleRingColor = Color.parseColor("#3A91FF");
    progressTextColor = Color.BLACK;
    circleBackgroundAlpha = 128;
    progressTextSize = 32;
    circleRingWidth = 10;
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setStyle(Paint.Style.FILL);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    width = getMeasuredWidth();
    height = getMeasuredHeight();
    radius = Math.min(width, height) / 2.0f;
    pointX = width / 2.0f;
    pointY = height / 2.0f;
  }

  @Override
  protected void onDraw(Canvas canvas) {
    drawBackground(canvas);
    drawCircleRing(canvas);
    drawProgressText(canvas);
  }

  
  private void drawBackground(Canvas canvas) {
    mPaint.setColor(circleBackgroundColor);
    mPaint.setAlpha(circleBackgroundAlpha);
    canvas.drawCircle(pointX, pointY, radius, mPaint);
  }

  
  private void drawCircleRing(Canvas canvas) {
    mPaint.setColor(circleRingColor);
    RectF oval = new RectF();
    if (isRingStyle) {
      mPaint.setStyle(Paint.Style.STROKE);
      mPaint.setStrokeWidth(circleRingWidth);
      mPaint.setStrokeCap(Paint.Cap.ROUND);
      //注意:定义圆环的矩形区域是需要考虑圆环的宽度
      oval.left = circleRingWidth / 2.0f;
      oval.top = height / 2.0f - radius + circleRingWidth / 2.0f;
      oval.right = 2 * radius - circleRingWidth / 2.0f;
      oval.bottom = height / 2.0f + radius - circleRingWidth / 2.0f;
      canvas.drawArc(oval, 0, 360 * progress / 100, false, mPaint);
    } else {
      mPaint.setStyle(Paint.Style.FILL);
      oval.left = 0;
      oval.top = height / 2.0f - radius;
      oval.right = 2 * radius;
      oval.bottom = height / 2.0f + radius;
      canvas.drawArc(oval, 0, 360 * progress / 100, true, mPaint);
    }

  }

  
  private void drawProgressText(Canvas canvas) {
    mPaint.setColor(progressTextColor);
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setTextSize(progressTextSize);
    Rect textBound = new Rect();
    String text = progress + "%";
    //获取文本的矩形区域到textBound中
    mPaint.getTextBounds(text, 0, text.length(), textBound);
    int textWidth = textBound.width();
    int textHeight = textBound.height();
    float x = pointX - textWidth / 2.0f;
    float y = pointY + textHeight / 2.0f;
    canvas.drawText(text, x, y, mPaint);
  }

  
  public void setValue(int progress) {
    this.progress = progress;
    invalidate();
  }

  
  public void setCircleRingStyle(boolean isRing) {
    this.isRingStyle = isRing;
  }

  
  public void setCircleBackgroundAlpha(int alpha) {
    this.circleBackgroundAlpha = alpha;
  }

  
  public void setProgressTextSize(int progressTextSize) {
    this.progressTextSize = progressTextSize;
  }

  
  public void setProgressTextColor(int progressTextColor) {
    this.progressTextColor = progressTextColor;
  }
}

测试类

public class MainActivity extends AppCompatActivity {
  private CircleProgressView mCircleProgressView;
  private int progress;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mCircleProgressView = (CircleProgressView) findViewById(R.id.progressView);
    mCircleProgressView.setCircleRingStyle(false);//实心圆
    HandlerThread thread = new HandlerThread("draw-thread");
    thread.start();
    Handler tHandler = new Handler(thread.getLooper()) {
      @Override
      public void handleMessage(Message msg) {
 runonUiThread(new Runnable() {
   @Override
   public void run() {
     mCircleProgressView.setValue(progress++);

   }
 });
 if (progress <100) {
   sendEmptyMessageDelayed(0, 100);
 }
      }
    };
    tHandler.sendEmptyMessage(0);
  }
}

XML使用方式

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。