Android圆角SeekBar

简介

SeekBar是Android中常用的用户交互控件之一，它可以用来表示一个数值范围，并允许用户通过滑动来选择一个具体的数值。然而，在默认情况下，SeekBar的外观比较简单，只是一个滑块和一个横线组成的。如果我们想要为SeekBar添加一些样式，例如加上圆角边框，那么就需要对SeekBar进行自定义。

本文将介绍如何在Android中实现一个圆角SeekBar，并给出相应的代码示例。

实现步骤

步骤一：创建自定义SeekBar

首先，我们需要创建一个自定义的SeekBar，继承自原生的SeekBar。我们可以通过重写onDraw方法来自定义SeekBar的外观。

public class RoundedSeekBar extends SeekBar {

    private Paint paint;
    private RectF rectF;

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

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

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

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLUE);

        rectF = new RectF();
    }

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

        rectF.set(getThumb().getBounds());
        canvas.drawRoundRect(rectF, 10, 10, paint);
    }
}

在上面的代码中，我们首先创建了一个Paint对象，用于绘制SeekBar的背景。然后，我们创建了一个RectF对象，用于保存SeekBar的边界矩形。在onDraw方法中，我们调用getThumb().getBounds()方法来获取SeekBar的滑块边界位置，然后使用drawRoundRect方法来绘制一个圆角矩形作为SeekBar的背景。

步骤二：在布局文件中使用自定义SeekBar

接下来，我们需要在布局文件中使用我们自定义的SeekBar。例如，我们可以将自定义SeekBar添加到一个LinearLayout中：

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

    <com.example.roundedseekbar.RoundedSeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"
        custom:progressTint="@color/colorAccent"
        custom:thumb="@drawable/thumb"
        custom:thumbTint="@color/colorAccent" />

    <!-- 其他布局元素 -->

</LinearLayout>

在上面的代码中，我们首先声明了一个自定义命名空间custom，用于引用我们自定义SeekBar的属性。然后，我们在布局文件中使用RoundedSeekBar来替代原生的SeekBar，并为它设置了一些自定义属性，例如progressTint、thumb和thumbTint。

步骤三：使用自定义SeekBar

最后，我们需要在代码中使用我们的自定义SeekBar。例如，我们可以监听SeekBar的数值变化，并在变化时更新相关的UI元素：

RoundedSeekBar seekBar = findViewById(R.id.seekBar);
final TextView textView = findViewById(R.id.textView);

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        textView.setText(String.valueOf(progress));
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // 用户开始滑动SeekBar时的回调方法
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        // 用户停止滑动SeekBar时的回调方法
    }
});

在上面的代码中，我们首先通过findViewById方法获取到我们的自定义SeekBar和一个TextView。然后，我们使用setOnSeekBarChangeListener方法为SeekBar设置一个监听器，监听SeekBar的数值变化。在onProgressChanged方法中，我们更新TextView的文本为SeekBar的当前数值。

总结

通过上述步骤，我们可以很容易地在Android中实现一个圆角SeekBar