环形进度条：绘制一个耀眼的圆形进度条，用个性化装点你的 Android 应用

2023-09-25 10:23:35

在 Android 开发中，自定义 View 是一个必不可少的高级技能。当系统提供的组件无法满足我们的需求时，就需要自己动手撸起袖子写代码了。环形进度条是一种非常常见的控件，它可以用来表示各种各样的进度信息，比如下载进度、上传进度、加载进度等等。

本篇文章将介绍如何使用 Android 自带的 Canvas 类来实现一个炫酷的环形进度条，让你的 Android 应用更具个性和吸引力。

1. 实现环形进度条的步骤

1.1 创建一个自定义 View

首先，我们需要创建一个自定义 View 来绘制环形进度条。创建一个新的 Android 项目，并在 src 目录下创建一个新的类，例如 MyProgressView.java：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class MyProgressView extends View {

    private Paint paint;
    private RectF oval;

    // 进度条的进度，范围为 0 到 1
    private float progress;

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

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

    public MyProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLUE);

        oval = new RectF();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 计算环形进度条的矩形区域
        int width = getWidth();
        int height = getHeight();
        int radius = Math.min(width, height) / 2;
        oval.set(width / 2 - radius, height / 2 - radius, width / 2 + radius, height / 2 + radius);

        // 绘制环形进度条
        canvas.drawArc(oval, -90, progress * 360, false, paint);
    }

    // 设置进度条的进度
    public void setProgress(float progress) {
        this.progress = progress;
        invalidate();
    }
}

1.2 在 XML 布局文件中使用自定义 View

在 XML 布局文件中，我们可以使用自定义 View 就像使用系统自带的控件一样。例如，以下代码在布局文件中添加了一个环形进度条：

<com.example.myapplication.MyProgressView
    android:layout_width="200dp"
    android:layout_height="200dp" />

1.3 在代码中使用自定义 View

在代码中，我们可以通过 findViewById() 方法来获取自定义 View 的实例。例如，以下代码获取了布局文件中环形进度条的实例并设置其进度：

MyProgressView progressView = findViewById(R.id.progress_view);
progressView.setProgress(0.5f);

2. 自定义属性

环形进度条有许多属性，我们可以通过自定义属性来控制这些属性。例如，我们可以通过自定义属性来设置环形进度条的颜色、宽度、进度等等。

要在自定义 View 中使用自定义属性，我们需要在 attrs.xml 文件中定义这些属性。例如，以下代码定义了三个自定义属性：

<resources>
    <declare-styleable name="MyProgressView">
        <attr name="progress_color" format="color" />
        <attr name="progress_width" format="dimension" />
        <attr name="progress" format="float" />
    </declare-styleable>
</resources>

然后，我们需要在自定义 View 的构造函数中读取这些自定义属性的值。例如，以下代码读取了三个自定义属性的值：

public MyProgressView(Context context, AttributeSet attrs) {
    super(context, attrs);

    // 读取自定义属性的值
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyProgressView);
    int progressColor = typedArray.getColor(R.styleable.MyProgressView_progress_color, Color.BLUE);
    float progressWidth = typedArray.getDimension(R.styleable.MyProgressView_progress_width, 10);
    float progress = typedArray.getFloat(R.styleable.MyProgressView_progress, 0.5f);

    // 设置属性的值
    paint.setColor(progressColor);
    paint.setStrokeWidth(progressWidth);
    this.progress = progress;

    typedArray.recycle();
}

现在，我们就可以在 XML 布局文件中使用这些自定义属性来控制环形进度条的外观和行为。例如，以下代码使用自定义属性来设置环形进度条的颜色、宽度和进度：

<com.example.myapplication.MyProgressView
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:progress_color="#FF0000"
    app:progress_width="20dp"
    app:progress="0.75" />