Seekbar背景图与Progress bar重复显示问题求解

嘿，我之前也碰到过一模一样的糟心事！这种重复显示的情况大概率是Drawable的平铺模式配置不对，或者是SeekBar的Style、布局属性有冲突，咱们一步步来搞定它：

1. 检查Drawable的平铺模式（最常见原因） #

不管是背景图还是进度条的Drawable，默认可能会开启重复平铺模式，导致图片被多次渲染。你需要给对应的Drawable文件添加tileMode限制：

比如自定义背景Drawable（bg_seekbar.xml）：

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/your_bg_image"
    android:tileMode="clamp"  <!-- 禁止平铺，拉伸边缘适配 -->
    android:gravity="fill_horizontal" />

进度条的Drawable（progress_seekbar.xml）同理：

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/your_progress_image"
    android:tileMode="clamp"
    android:gravity="fill_horizontal" />

如果你的进度条用的是layer-list组合Drawable，要确保每个子项都设置好：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <bitmap 
            android:src="@drawable/bg_bar" 
            android:tileMode="clamp" 
            android:gravity="fill_horizontal"/>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <bitmap 
                android:src="@drawable/progress_bar" 
                android:tileMode="clamp" 
                android:gravity="fill_horizontal"/>
        </clip>
    </item>
</layer-list>

2. 排查Style与布局的重复配置 #

别同时在布局XML和Style里重复设置android:background或android:progressDrawable，否则容易导致Drawable叠加渲染。举个正确的Style例子：

<style name="CustomSeekBarStyle" parent="Widget.AppCompat.SeekBar">
    <item name="android:background">@drawable/bg_seekbar</item>
    <item name="android:progressDrawable">@drawable/progress_seekbar</item>
    <!-- 其他属性如高度、滑块可单独设置 -->
</style>

然后在布局里直接引用这个Style即可，别再额外写背景或进度条属性：

<SeekBar
    android:id="@+id/custom_seekbar"
    style="@style/CustomSeekBarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

3. 去掉多余的缩放属性 #

如果你的SeekBar设置了android:scaleX或android:scaleY这类缩放属性，也可能导致Drawable重复显示。要调整宽度直接用android:layout_width设置为match_parent或固定值，配合Drawable的gravity来适配即可。

4. 清理Android Studio缓存（玄学但有用） #

有时候IDE缓存会导致资源渲染异常，点击File -> Invalidate Caches... -> Invalidate and Restart，清理后重新编译运行试试。

按上面的步骤排查下来，基本就能解决重复显示的问题啦！

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