重学 Android 自定义 View 系列(三)：自定义步数进度条

在 Android 开发中，View 是界面交互的基础，而自定义 View 则使得开发者能够根据需求打造独特的视觉效果和交互方式。本系列文章旨在深入浅出地介绍 Android 中自定义 View 的开发技巧和最佳实践，第三篇文章将重点介绍如何实现一个 步数进度条。

文章目录

背景与需求分析
设计思路与实现方案
自定义步数进度条的实现步骤
- 3.1. 继承 View 类
- 3.2. 绘制进度条
- 3.3. 自定义属性
- 3.4. 支持动态更新进度
- 3.5. 完善交互逻辑
具体代码实现
- 4.1. StepProgressBar 类
- 4.2. 自定义 XML 属性
使用场景与案例分析
- 5.1. 健身应用中的步数记录
- 5.2. 任务完成进度可视化
- 5.3. 游戏中的成就解锁进度
优化与扩展
- 6.1. 性能优化
- 6.2. 增加动画效果
- 6.3. 可配置性增强
总结与展望

1. 背景与需求分析

步数进度条（Step Progress Bar）是一种常见的进度条形式，主要用于展示任务或过程的多个阶段，用户可以直观地看到当前进度和任务的完成状态。例如，在健身应用中，用户的步数通常是以每日目标进度条的形式展现出来，帮助用户了解自己离目标还差多少步。

背景

Android 系统提供了丰富的视图组件，但它并不直接提供步数进度条这种自定义控件。因此，开发者需要自定义 View 来满足这种需求。通常，步数进度条的功能包括以下几个方面：

显示总的目标步数（例如 10000 步）。
显示当前已完成的步数，且该部分可以动态更新。
可以根据进度设置不同的样式，如颜色的渐变、分段显示等。

需求分析

动态更新：步数进度条的核心是动态更新进度，用户的步数实时变化，进度条需要实时反映。
可自定义样式：开发者可以根据需求调整进度条的外观样式，如颜色、背景、刻度等。
交互性：步数进度条的设计需要保证用户能够直观感知进度的变化，同时还要保持一定的交互性，如支持点击、拖动等操作。

2. 设计思路与实现方案

2.1. 基本设计

步数进度条的设计可以分为几个关键部分：

进度条的外观：进度条的整体框架，包括背景、已完成部分、未完成部分等。
分段显示：为了展示步数的进展情况，可以将进度条分为多个小段，每个段代表一个具体的步数目标。
动态更新：随着步数的变化，进度条的显示内容需要实时更新。
交互设计：可以为进度条添加点击、拖动等交互功能，增强用户体验。

2.2. 自定义控件的实现方式

继承 View 类：我们将通过继承 View 类来创建步数进度条。通过重写 onDraw 方法来实现绘制功能。
支持自定义属性：为了更方便地配置步数进度条的样式，可以通过 XML 中的自定义属性来设置颜色、进度、背景等。
自定义进度更新：使用 invalidate() 方法来通知控件重新绘制，从而实现进度条的动态更新。

3. 自定义步数进度条的实现步骤

3.1. 继承 `View` 类

首先，我们需要创建一个自定义的步数进度条类，继承自 View 类。继承 View 可以让我们重写绘制方法 onDraw，实现自定义绘制逻辑。

javaCopy Code
public class StepProgressBar extends View {

    private int totalSteps = 10000; // 总步数目标
    private int currentSteps = 0;  // 当前已完成的步数
    private Paint paint; // 用于绘制进度条的画笔
    private int progressColor = Color.GREEN; // 进度条颜色
    private int backgroundColor = Color.GRAY; // 背景颜色

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

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

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(20);
    }

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

        // 绘制背景
        paint.setColor(backgroundColor);
        canvas.drawRect(0, 0, getWidth(), getHeight(), paint);

        // 绘制已完成的进度
        float progressWidth = getWidth() * ((float) currentSteps / totalSteps);
        paint.setColor(progressColor);
        canvas.drawRect(0, 0, progressWidth, getHeight(), paint);
    }

    // 更新步数
    public void setCurrentSteps(int steps) {
        this.currentSteps = steps;
        invalidate(); // 刷新视图
    }

    // 设置总步数目标
    public void setTotalSteps(int totalSteps) {
        this.totalSteps = totalSteps;
        invalidate();
    }
}

3.2. 绘制进度条

在 onDraw 方法中，我们使用 Canvas 对象来绘制进度条的背景和已完成部分。通过控制已完成部分的宽度，我们可以动态更新进度。

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

    // 绘制背景
    paint.setColor(backgroundColor);
    canvas.drawRect(0, 0, getWidth(), getHeight(), paint);

    // 绘制已完成的进度
    float progressWidth = getWidth() * ((float) currentSteps / totalSteps);
    paint.setColor(progressColor);
    canvas.drawRect(0, 0, progressWidth, getHeight(), paint);
}

3.3. 自定义属性

为了使步数进度条更具可定制性，我们可以在 XML 中定义自定义属性。这些属性可以控制进度条的颜色、宽度、目标步数等。

在 res/values/attrs.xml 中添加自定义属性：

xmlCopy Code
<declare-styleable name="StepProgressBar">
    <attr name="totalSteps" format="dimension"/>
    <attr name="currentSteps" format="dimension"/>
    <attr name="progressColor" format="color"/>
    <attr name="backgroundColor" format="color"/>
</declare-styleable>

在 StepProgressBar 类的构造方法中解析这些属性：

javaCopy Code
public StepProgressBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs,
            R.styleable.StepProgressBar, 0, 0);
    try {
        totalSteps = typedArray.getInt(R.styleable.StepProgressBar_totalSteps, 10000);
        currentSteps = typedArray.getInt(R.styleable.StepProgressBar_currentSteps, 0);
        progressColor = typedArray.getColor(R.styleable.StepProgressBar_progressColor, Color.GREEN);
        backgroundColor = typedArray.getColor(R.styleable.StepProgressBar_backgroundColor, Color.GRAY);
    } finally {
        typedArray.recycle();
    }
    init();
}

3.4. 支持动态更新进度

动态更新进度是步数进度条的核心功能。为了实现这一功能，我们需要提供一个方法来更新当前步数并重新绘制视图。

javaCopy Code
public void setCurrentSteps(int steps) {
    this.currentSteps = steps;
    invalidate(); // 刷新视图
}

通过调用 invalidate() 方法，Android 会自动调用 onDraw 方法，从而重新绘制视图，反映最新的步数进度。

3.5. 完善交互逻辑

为了提升用户体验，我们可以让进度条支持交互。例如，用户可以点击进度条来调整步数。

javaCopy Code
@Override
public boolean onTouchEvent(MotionEvent event)