Android 拖动圆形进度条

原创

mob64ca12edad02 2024-09-08 06:32:02 ©著作权

文章标签 Android 圆形进度条 UI 文章分类 Android 移动开发

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

Android 拖动圆形进度条的实现

在 Android 开发中，圆形进度条是一种常用的 UI 组件，尤其是在需要用户输入进度或选择数值的场合。本文将通过实现一个可拖动的圆形进度条，带您了解如何在 Android 应用中实现这一功能，并附带必要的代码示例。

一、项目创建

首先，我们需要创建一个新的 Android 项目。可以使用 Android Studio 进行创建，选择基本活动模板。

二、UI 设计

在 activity_main.xml 文件中，我们需要定义一个用于显示圆形进度条的自定义视图。

<RelativeLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.customview.CircleSeekBar
        android:id="@+id/circleSeekBar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true" />
</RelativeLayout>

三、自定义圆形进度条

接下来，我们需要创建一个自定义视图 CircleSeekBar，它将继承自 View 类。

package com.example.customview;

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

public class CircleSeekBar extends View {
    private Paint paint;
    private int progress = 0;
    private int maxProgress = 100;

    public CircleSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(20);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 80, paint);
        float angle = (float) progress / maxProgress * 360;
        canvas.drawArc(20, 20, getWidth() - 20, getHeight() - 20, -90, angle, false, paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_MOVE) {
            double radians = Math.atan2(event.getY() - getHeight() / 2, event.getX() - getWidth() / 2);
            progress = (int) (Math.toDegrees(radians) + 360) % 360 * maxProgress / 360;
            invalidate();
            return true;
        }
        return super.onTouchEvent(event);
    }
}

四、功能实现分析

在上述代码中，我们实现了以下几点：

自定义视图：CircleSeekBar 继承于 View，并重写了 onDraw() 方法来绘制圆形进度条和当前进度。
进度更新：在 onTouchEvent() 方法中检测用户的触摸事件，计算进度，并调用 invalidate() 方法重新绘制视图。

五、活跃的进度更新

为了有效地更新进度，我们在 onTouchEvent() 方法中，根据触摸坐标计算出进度。这是通过计算触摸点与圆心的角度差来实现的。

double radians = Math.atan2(event.getY() - getHeight() / 2, event.getX() - getWidth() / 2);
progress = (int) (Math.toDegrees(radians) + 360) % 360 * maxProgress / 360;

通过这样的计算，确保用户在滑动的过程中，进度条能够实时更新。

六、示意图

我们可以用关系图来表示 CircleSeekBar 的架构关系，帮助理解。

erDiagram
    CircleSeekBar {
        +int progress
        +int maxProgress
    }
    CircleSeekBar ||--o{ Paint: uses
    CircleSeekBar ||--o{ Canvas: draws