自定义SeekBar

最新推荐文章于 2025-07-11 10:32:29 发布

原创最新推荐文章于 2025-07-11 10:32:29 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#SeekBar #android

安卓开发专栏收录该内容

292 篇文章

订阅专栏

博客主要围绕Android中SeekBar的自定义展开，包括自定义背景、滑块和整个布局。同时分享了填坑经验，如SeekBar自带padding导致滑块无法完全显示，可设置thumbOffset；SeekBar自带光圈问题，可设置android:duplicateParentState=\false\并对父布局做相应设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的目标：

1.自定义SeekBar背景

android:progressDrawable="@drawable/seekbar_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">
        <shape>
            <size android:height="1dp" />
            <corners android:radius="0.5dp" />
            <gradient
                android:endColor="@color/standard_black_fourth_level_color_c6"
                android:startColor="@color/standard_black_fourth_level_color_c6" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <size android:height="3dp" />
                <corners android:radius="1.5dp" />
                <gradient
                    android:endColor="@color/standard_red_main_color_c1"
                    android:startColor="@color/standard_red_main_color_c1" />
            </shape>
        </clip>
    </item>

</layer-list>

2.自定义滑块

android:thumb="@drawable/seekbar_thumb"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/seekbar_round_bg" android:state_pressed="true"/>
    <item android:drawable="@drawable/seekbar_round_bg" android:state_focused="true"/>
    <item android:drawable="@drawable/seekbar_round_bg"></item>

</selector>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/standard_red_main_color_c1" />
    <size android:width="15dp" android:height="15dp" />
</shape>

3.整个SeekBar布局

<SeekBar
        android:id="@+id/read_setting_sb_brightness"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:max="100"
        android:maxHeight="3dp"
        android:minHeight="3dp"
        android:duplicateParentState="false"
        android:splitTrack="false"
        android:progressDrawable="@drawable/seekbar_bg"
        android:thumb="@drawable/seekbar_thumb"
        android:thumbOffset="10dp"/>

4.填坑

4.1SeekBar自带有一定的padingLef和padingRight。如果你把这两个值设置为0了，那么将导致滑块无法完全显示。

此时，我们可以不设置padingLef和padingRight，将thumbOffset设置一定的值即可。

4.2 SeekBar自带光圈

设置SeekBar滑动事件后，点击附近其他的布局，居然会导致SeekBar显示光圈，服！

设置android:duplicateParentState="false"，
然后将父布局设置：
android:focusable="true" android:focusableInTouchMode="true"