📜  带有Seekbar的Android中的圆形填充式装载机(1)

📅  最后修改于: 2023-12-03 15:25:26.904000             🧑  作者: Mango

带有SeekBar的Android中的圆形填充式装载机

本文介绍如何在Android应用程序中实现带有SeekBar的圆形填充式装载机。SeekBar允许用户滑动进度条以更改进度,该圆形填充式装载机可以用于表示应用程序中某个任务的进度。

实现步骤
  1. 创建一个自定义视图类,继承自View类,并命名为CircleProgressBar。
public class CircleProgressBar extends View {
  // 构造方法
  // ...

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
      // 实现测量圆形进度条的宽度和高度
      //...
  }

  @Override
  protected void onDraw(Canvas canvas) {
      // 实现绘制圆形进度条的过程
      //...
  }

  // 添加进度条更新方法
  public void setProgress(int progress){
      // 更新进度
      invalidate();
  }
}
  1. 在CircleProgressBar类中添加SeekBar,并在其 OnSeekBarChangeListener监听中更新进度值。
public class CircleProgressBar extends View {
    private SeekBar mSeekBar;
    private int mProgress = 0; // 默认进度为0

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

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

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

    private void init() {
        mSeekBar = new SeekBar(getContext());
        mSeekBar.setProgress(mProgress);
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                // 更新进度值
                mProgress = progress;
                invalidate(); // 重绘圆形进度条
            }

            //...
        });
    }

    //...
}
  1. 实现绘制圆形进度条的过程。在绘制之前,需要初始化画笔对象。
private Paint mPaint;

private void initPaint() {
    mPaint = new Paint();
    mPaint.setAntiAlias(true); // 开启抗锯齿
    mPaint.setStyle(Paint.Style.STROKE); // 设置绘制的圆为不填充
    mPaint.setStrokeWidth(10); // 设置圆的宽度
    mPaint.setColor(Color.DKGRAY); // 设置圆的颜色为灰色
}

@Override
protected void onDraw(Canvas canvas) {
    initPaint();
    // 画圆
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 3, mPaint);

    // 画弧线
    mPaint.setColor(Color.GREEN); // 设置圆的颜色为绿色
    RectF oval = new RectF(getWidth() / 2 - getWidth() / 3, getHeight() / 2 - getWidth() / 3, getWidth() / 2 + getWidth() / 3, getHeight() / 2 + getWidth() / 3);
    canvas.drawArc(oval, -90, ((float) mProgress / mSeekBar.getMax()) * 360, false, mPaint);

    // 画文本
    mPaint.setColor(Color.BLACK); // 设置文本颜色为黑色
    mPaint.setStyle(Paint.Style.FILL); // 设置文本实心
    mPaint.setTextSize(40); // 设置文本大小
    String text = mProgress + "%"; // 进度文本
    float textWidth = mPaint.measureText(text); // 测量文本的宽度
    canvas.drawText(text, getWidth() / 2 - textWidth / 2, getHeight() / 2 + textWidth / 2, mPaint);
}
  1. 在Activity中添加CircleProgressBar及SeekBar,并在SeekBar监听中更新进度。
public class MainActivity extends AppCompatActivity {
    private CircleProgressBar mCircleProgressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 找到CircleProgressBar控件
        mCircleProgressBar = findViewById(R.id.circle_progress_bar);
        // 设置进度条的最大值为100
        mCircleProgressBar.setMax(100);

        // 找到SeekBar控件
        final SeekBar seekBar = findViewById(R.id.seek_bar);
        // seekBar设置最大值为100
        seekBar.setMax(100);
        // 设置SeekBar监听事件
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                // 更新进度条
                mCircleProgressBar.setProgress(progress);
            }
            //...
        });
    }
}
效果展示

CircleProgressBar

结论

本文介绍了如何在Android应用程序中实现带有SeekBar的圆形填充式装载机。通过添加SeekBar和更新进度值,以及通过绘制圆和弧线、添加进度文本以实现圆形填充式装载机的效果。