自定义SeekBar的拇指显示了不必要的背景

Question

我一直在尝试制作一个自定义的 SeekBar，它应该有圆角。甚至 SeekBar 的进度条两侧也应有圆角。我不需要滑块，就像这样：

为了实现这个效果，我创建了一个 layer-list xml 文件，命名为 custom_seekbar.xml，内容如下：

<?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 android:shape="rectangle">
            <corners android:radius="20dp" />
            <solid android:color="#F0E9DC" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="20dp" />
                <solid android:color="#F0E9DC" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="20dp" />
                <solid android:color="#E38F71" />
            </shape>
        </clip>
    </item>

</layer-list>  

为了应对四周移动的角落，我考虑使用一个高度与 SeekBar 相等的圆形拇指。这是 thumb.xml：

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

    <size android:height="16dp"
        android:width="16dp"/>

    <corners android:radius="20dp"/>

    <solid android:color="#E38F71"/>

</shape>  

我在我的活动中像这样显示 SeekBar：

<SeekBar
        android:layout_width="250dp"
        android:layout_height="16dp"
        android:layout_centerInParent="true"
        android:progressDrawable="@drawable/custom_seekbar"
        android:thumb="@drawable/thumb" />  

唯一的问题是拇指。它没有按预期显示。它有一个不必要的背景，就像这样：。如果我设置透明的拇指，进度条就不再是圆形了。我甚至尝试使用椭圆形作为拇指。请问有人能告诉我出了什么问题吗？或者是否还有其他方法可以达到所需的结果？真的非常感谢任何帮助。

- Anjani

---

创建一个自定义的Drawable类，并通过调用setProgressDrawable来使用它，就像这个答案中所示。 - pskink

"我尝试了很多事情，但是没有得到我想要的。" 你试过自定义Drawable吗？ - pskink

@user3676184 我尝试了layer-list，但仍然没有改变。但是这个背景颜色从哪里来我就不理解了！它在后台存在，但在自定义seekbar文件中没有任何参考。 - Anjani

好的，继续与XML作斗争吧...而不是写十行代码... - pskink

好的...从你的旧代码中删除 <corners android:radius="20dp"/> 并检查。 - Pavya

Answer 1

添加 android:splitTrack="false" 将解决您的问题。我还会使用android:shape="oval"，而不是带有圆角的rectangle来制作您的thumb.xml。

- Blackbelt

---

我使用了“椭圆形”图形，但出现了同样的问题。所以我尝试了一个带有圆角的矩形，但仍然没有改变。最终我就这样发布了它。 - Anjani

请尝试在您的 SeekBar 中添加 android:splitTrack="false"。 - Blackbelt

太棒了！只需要一行代码就解决了我的问题！非常感谢你，你节省了我好几个小时的时间！请编辑您的答案，以便我可以接受它。 - Anjani

这个效果非常好！不过你在 API 21 以下的设备上找到解决方案了吗？ - andreimarinescu

它可以工作了！@andreimarinescu，我在API 21之前的设备上尝试了我的应用程序，没有任何问题。上述情况仅发生在API 21之后的设备上。 - Wooseong Kim