android 左方向的扇形统计进度

原创

mob64ca12f8da8d 2024-10-27 04:22:21 ©著作权

文章标签 自定义视图 Android Math 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f8da8d的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android 左方向的扇形统计进度

在现代应用中，进度的可视化展示是用户体验的重要组成部分，引导用户理解当前状态。本文将探讨如何在Android应用中实现一个左方向的扇形进度图。

1. 项目准备

在开始之前，确保您已经创建了一个新的Android项目，并在您的 build.gradle 文件中添加了必要的依赖库。我们将使用一个简单的自定义视图来实现扇形进度图。

dependencies {
    implementation 'androidx.appcompat:appcompat:1.3.1'
}

2. 自定义视图

我们首先需要创建一个自定义视图，继承自 View。在自定义视图中，我们将重写 onDraw 方法来绘制扇形。

public class ProgressArcView extends View {
    private Paint paint;
    private float progress;

    public ProgressArcView(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLUE); // 扇形颜色
        progress = 0; // 初始进度
    }

    public void setProgress(float progress) {
        this.progress = Math.max(0, Math.min(100, progress));
        invalidate(); // 重新绘制
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        float centerX = width / 2f;
        float centerY = height / 2f;

        // 计算扇形的角度
        float sweepAngle = (progress / 100) * 180; // 左半边180度

        // 绘制扇形
        canvas.drawArc(new RectF(0, 0, width, height), 90, -sweepAngle, true, paint);
    }
}

3. 使用自定义视图

在我们的布局XML文件中使用自定义视图。我们需要在适当位置添加 ProgressArcView。

<LinearLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <your.package.name.ProgressArcView
        android:id="@+id/progressArcView"
        android:layout_width="200dp"
        android:layout_height="200dp" />
</LinearLayout>

4. 更新进度

接下来，在 Activity 中更新进度的实现。我们可以创建一个简单的定时器，以模拟进度的变化。

public class MainActivity extends AppCompatActivity {
    private ProgressArcView progressArcView;
    private Handler handler;
    private int progress = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        progressArcView = findViewById(R.id.progressArcView);
        handler = new Handler();
        updateProgress();
    }

    private void updateProgress() {
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                if (progress <= 100) {
                    progressArcView.setProgress(progress);
                    progress++;
                    updateProgress(); // 递归调用
                }
            }
        }, 100); // 每100毫秒更新一次
    }
}

5. 状态图

在应用中，使用状态图帮助我们更好地理解组件的状态变化。以下是一个示例，展示了进度条的不同状态：

stateDiagram
    [*] --> InProgress
    InProgress --> Completed : progress >= 100
    InProgress --> Failed : errorOccurs
    Completed --> [*]
    Failed --> [*]