如何修改Android Material RangeSlider的轨道圆角

已查阅资料 #

• Android Developers RangeSlider官方参考文档
• Material Components离散滑块官方文档
• Material Components GitHub仓库中关于轨道圆角的现有问题
• Stack Overflow上Material 2版本轨道半径修改的相关问题

实现方法 #

方法一：自定义轨道Drawable #

Material RangeSlider的轨道可以通过自定义Drawable替换，直接在Drawable中设置圆角：

1. 创建激活轨道的shape文件（示例：slider_active_track.xml）：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorPrimary" />
    <corners android:radius="16dp" /> <!-- 自定义圆角大小 -->
    <size android:height="4dp" />
</shape>

2. 创建非激活轨道的shape文件（示例：slider_inactive_track.xml）：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/grey" />
    <corners android:radius="16dp" />
    <size android:height="4dp" />
</shape>

3. 创建LayerDrawable组合两者（示例：slider_track.xml）：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/slider_inactive_track" />
    <item android:drawable="@drawable/slider_active_track"
        android:id="@android:id/progress" />
</layer-list>

4. 在布局中给RangeSlider设置轨道：

<com.google.android.material.slider.RangeSlider
    ...
    app:track="@drawable/slider_track" />

方法二：自定义RangeSlider子类重绘轨道 #

如果自定义Drawable无法满足需求，可直接重写RangeSlider的绘制逻辑：

class RoundedRangeSlider @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : RangeSlider(context, attrs, defStyleAttr) {

    private val trackRadius = resources.getDimension(R.dimen.slider_track_radius)
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onDraw(canvas: Canvas) {
        // 先绘制自定义圆角轨道，再绘制滑块等元素
        drawRoundedTrack(canvas)
        super.onDraw(canvas)
    }

    private fun drawRoundedTrack(canvas: Canvas) {
        // 获取轨道基础位置和尺寸
        val trackLeft = paddingLeft.toFloat()
        val trackRight = width - paddingRight.toFloat()
        val trackTop = (height / 2f) - (trackHeight / 2f)
        val trackBottom = (height / 2f) + (trackHeight / 2f)

        // 绘制非激活轨道
        paint.color = ContextCompat.getColor(context, R.color.grey)
        canvas.drawRoundRect(trackLeft, trackTop, trackRight, trackBottom, trackRadius, trackRadius, paint)

        // 根据滑块位置计算激活轨道范围
        val leftThumbPos = thumbPositions[0]
        val rightThumbPos = thumbPositions[1]
        val activeLeft = trackLeft + (trackRight - trackLeft) * leftThumbPos
        val activeRight = trackLeft + (trackRight - trackLeft) * rightThumbPos

        // 绘制激活轨道
        paint.color = ContextCompat.getColor(context, R.color.colorPrimary)
        canvas.drawRoundRect(activeLeft, trackTop, activeRight, trackBottom, trackRadius, trackRadius, paint)
    }
}

之后在布局中直接使用这个自定义控件即可。

替代方案：使用第三方滑块库 #

如果上述方法过于繁琐，可选择支持自定义轨道圆角的第三方滑块开源库，这类组件通常提供更灵活的自定义选项，无需自行重绘或编写复杂Drawable。

内容的提问来源于stack exchange，提问作者xxfogs