自定义SeekBar,一步到位

原创于 2021-08-16 17:28:53 发布 · 190 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了如何在Android中自定义SeekBar的样式，包括设置滑块的形状、颜色以及滑轨的滑过和未滑过部分的颜色。通过修改`@drawable/mo_tu_seek_bar_sliding_bar`和`@drawable/mo_tu_seek_bar_bg`两个XML资源文件，实现了圆形滑块和分段颜色的滑轨效果。示例代码展示了具体的XML布局和Drawable资源定义。

布局

<SeekBar
    android:thumb="@drawable/mo_tu_seek_bar_sliding_bar"
    android:progressDrawable="@drawable/mo_tu_seek_bar_bg"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"/>

drawable ----mo_tu_seek_bar_sliding_bar

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <!--设置滑块大小和颜色-->
    <size
        android:width="12.5dp"
        android:height="12.5dp"/>
    <solid android:color="@color/white" />
</shape>

drawable ---mo_tu_seek_bar_bg

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--设置滑轨颜色：滑过部分和未滑过部分-->

    <!--未滑过部分滑轨颜色-->
    <item
        android:id="@android:id/background"
        android:height="3dp"
        android:gravity="center">
        <shape>

            <solid android:color="#999"/>
        </shape>
    </item>

    <!--滑过部分滑轨颜色-->
    <item
        android:id="@android:id/progress"
        android:height="3dp"
        android:gravity="center">

        <clip>
            <shape>

                <solid android:color="@color/white"/>
            </shape>
        </clip>
    </item>
</layer-list>

效果图