随时掌握进度，用 Android 构建一个精确且互动的拖拽进度条

2023-08-24 22:56:19

打造一个坐标尺拖拽进度条

作为 Android 开发人员，我们经常需要创建自定义的进度条。带有坐标尺的拖拽进度条不仅让用户更直观地查看进度，而且通过拖拽操作提升了交互性，更显自然。

准备工作

创建一个新 Android 项目。
在布局文件中添加自定义视图：

<com.example.myapp.DragSeekBar
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/seekBar"/>

在自定义视图中绘制坐标尺和进度条：

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

    // 绘制坐标尺
    Paint paint = new Paint();
    paint.setColor(Color.GRAY);
    paint.setStrokeWidth(2);
    for (int i = 0; i <= 10; i++) {
        canvas.drawLine(i * 50 + 50, 0, i * 50 + 50, 50, paint);
    }

    // 绘制进度条
    paint.setColor(Color.BLUE);
    canvas.drawRect(50, 0, 50 + progress * 5, 50, paint);

    // 绘制进度条圆角矩形
    paint.setColor(Color.WHITE);
    canvas.drawRoundRect(50 + progress * 5 - 10, 0, 50 + progress * 5 + 10, 50, 10, 10, paint);

    // 绘制进度条图片
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
    canvas.drawBitmap(bitmap, 50 + progress * 5 - bitmap.getWidth() / 2, 0, paint);
}

在自定义视图中添加手势控制：

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            startX = event.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            float deltaX = event.getX() - startX;
            progress = (int) (deltaX / 50);
            if (progress < 0) {
                progress = 0;
            }
            if (progress > 10) {
                progress = 10;
            }
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            break;
    }

    return true;
}

在活动中使用自定义视图：

SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        // 处理进度改变事件
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // 处理开始拖拽事件
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        // 处理停止拖拽事件
    }
});