Android自定义View实现圆形进度条

GAWY • 2024-10-10 08:46 • 编程

一、简介

进度条是常见的用户交互控件，其中圆形进度条因其独特的外观常被应用于较为注重界面美观性的场景中。因此，针对圆形进度条的自定义控件实现方式备受关注。本文将介绍如何在Android中使用自定义View实现圆形进度条，并提供完整的实现代码。

二、相关知识点

在开始讨论Android自定义View实现圆形进度条之前，我们需要了解相关的知识点。圆形进度条的需求可以通过自定义View来完成，自定义View需要了解以下几个方面的知识：

1. View的基本知识：


  - View测量 Measuring   :
       View的尺寸测量分为两个阶段：measure方法和layout方法，分别完成尺寸测量和位置布局工作。
  - View的绘制 Drawing    :
       绘制过程中需要重写onDraw方法，将所有的绘制代码写在onDraw方法中。

2. Paint的基本知识：


   - color：颜色
   - style：空心/实心
   - stroke：线条宽度
   - antiAlias：抗锯齿等

3. Canvas的基本知识：


    - drawCircle：绘制圆形
    - drawArc：绘制圆弧
    - drawText：绘制文字等

三、实现过程

下面我们将介绍如何使用自定义View实现圆形进度条。首先，定义一个类来继承View类并重写onDraw方法。


public class CircleProgressBarView extends View {

   private final static String TAG = "CircleProgressBarView";
   private Paint mPaint;
   private int mRadius = 100;
   private int mColor = Color.BLUE;
   private int mDegree = 270;

   public CircleProgressBarView(Context context) {
       super(context);
       init();
   }

   public CircleProgressBarView(Context context, AttributeSet attrs) {
       super(context, attrs);
       init();
   }

   public CircleProgressBarView(Context context, AttributeSet attrs, int defStyle) {
       super(context, attrs, defStyle);
       init();
   }

   @Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       mPaint.setColor(mColor);
       mPaint.setStyle(Paint.Style.STROKE);
       mPaint.setStrokeWidth(10f);
       canvas.drawCircle(canvas.getWidth()/2, canvas.getHeight()/2, mRadius, mPaint);
       RectF rectF = new RectF(canvas.getWidth()/2 - mRadius, canvas.getHeight()/2 - mRadius, canvas.getWidth()/2 + mRadius, canvas.getHeight()/2 + mRadius);
       canvas.drawArc(rectF, -90, mDegree, false, mPaint);
   }

   private void init(){
       mPaint = new Paint();
       mPaint.setAntiAlias(true);
   }
}

该自定义View的实现过程主要包括以下几个步骤：

1.在构造方法中调用init方法初始化Paint对象；

2.在onDraw方法中绘制圆和圆弧，具体实现步骤：


 mPaint.setColor(mColor);
 mPaint.setStyle(Paint.Style.STROKE);
 mPaint.setStrokeWidth(10f);
 canvas.drawCircle(canvas.getWidth()/2, canvas.getHeight()/2, mRadius, mPaint);

这段代码实现了圆的绘制，setColor设置颜色，setStyle设置画笔类型，setStrokeWidth设置笔画宽度，drawCircle绘制圆，并将其放在View的中心。


RectF rectF = new RectF(canvas.getWidth()/2 - mRadius, canvas.getHeight()/2 - mRadius, canvas.getWidth()/2 + mRadius, canvas.getHeight()/2 + mRadius);
canvas.drawArc(rectF, -90, mDegree, false, mPaint);

这段代码实现了圆弧的绘制，RectF类是一个矩形类，用于标示矩形左上角和右下角的x,y坐标。这里用于定义圆弧范围，-90表示从y轴负方向开始绘制，mDegree表示弧的度数，false表示绘制区域内不包含中心点上的点，最后调用drawArc方法绘制圆弧。

四、使用方法

在Activity的布局文件中加入该自定义控件：

在Activity的代码中进行调用：


 CircleProgressBarView mCircleProgressBarView = findViewById(R.id.circleProgressBar);
 mCircleProgressBarView.setDegree(180);

五、总结

本文主要介绍了如何使用自定义View实现圆形进度条，并提供了完整的实现代码。自定义控件的实现需要了解View、Paint、Canvas等相关知识，同时也需要掌握基本的绘制方法和参数设置方式。在使用自定义View时，需要根据实际情况调整参数和方法的使用，不断尝试和调试，才能得出满足需求的自定义控件。

原创文章，作者：GAWY，如若转载，请注明出处：https://www.506064.com/n/142040.html