Android 自定义 SeekBar - 进度不跟随拇指

Question

我想创建一个自定义的 SeekBar，但是我遇到了这个问题，即在某些地方（大约 0-10 和 90-100 的进度值）进度没有跟随 SeekBar 的拇指。我相信这是因为我将 设置thumbOffset为 0，以便拇指留在进度条内。我想做一个 iPhone 风格的 SeekBar。

进度0处的 SeekBar （可以）：

进度5处的 SeekBar （不正常）：

进度50处的 SeekBar （可以）：

进度90处的 SeekBar （不正常）：

进度为100 时的SeekBar （可以）：

thumbOffset在根据拇指位置绘制进度时，似乎没有考虑 。我尝试将其更改为thumbOffset拇指宽度的一半，并使用不同的填充进行了各种组合，但没有解决问题。我还尝试了在 SO 上找到的所有其他解决方案。

这是我正在使用的 XML：

SeekBar 定义：

<SeekBar
    android:id="@+id/scan_seekbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:max="100"
    android:progress="5"
    android:progressDrawable="@drawable/bg_seekbar"
    android:splitTrack="false"
    android:thumbOffset="0dp"
    android:thumb="@drawable/seekbar_thumb" />

可绘制bg_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">
            <size android:height="48dp"/>
            <corners android:radius="25dp"/>
            <stroke android:color="@color/semiLightBlue" android:width="1dp"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="25dp"/>
                <size android:height="48dp"/>
                <stroke android:color="@color/colorAccent" android:width="1dp"/>
                <solid android:color="@color/colorAccent"/>
            </shape>
        </clip>
    </item>
</layer-list>

SeekBar 拇指seekbar_thumb.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent"/>
            <corners android:radius="25dp"/>

            <padding android:bottom="8dp" android:top="8dp" android:left="16dp" android:right="16dp" />
        </shape>
    </item>


    <item android:drawable="@drawable/ic_swipe_white" android:gravity="center" android:height="32dp" android:width="44dp"/>
</layer-list>

有没有其他人遇到过这个问题？

Answer 1

您的实现依赖于ClipDrawable来绘制进度条。进度可绘制跨越进度条的整个长度，但被ClipDrawable缩短或剪裁。这会在进度条的左侧留下圆角，但在右侧变成方形。随着进度条的增长、赶上并超过拇指，您会看到方形的一面。

可能有几种方法可以解决这个问题，但让我们采用基于 XML 的方法。让我们更换ClipDrawable与ScaleDrawable如下：

bg_seekbar.xml

<layer-list>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <size android:height="48dp" />
            <corners android:radius="25dp" />
            <stroke
                android:width="1dp"
                android:color="@color/semiLightBlue" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:scaleWidth="100%"
            android:useIntrinsicSizeAsMinimum="true">
            <shape android:shape="rectangle">
                <corners android:radius="25dp" />
                <size
                    android:width="50dp"
                    android:height="48dp" />
                <stroke
                    android:width="1dp"
                    android:color="@color/colorAccent" />
                <solid android:color="@color/colorAccent" />
            </shape>
        </scale>
    </item>
</layer-list>

该scaleWidth属性告诉我们，当级别为最大时，drawable 将被缩放到 100%。useIntrinsicSizeAsMinimum顺便说一下，似乎没有记录的属性指定可绘制的最小尺寸将是其固有宽度，即 50dp x 48dp。这并不完全正确，因为当级别为零时可绘制对象的宽度和高度将为零，但当级别为 1 或更高时会弹出到固有大小。

以下是进行此更改后进度条的情况。我已经使用默认拇指来说明正在发生的事情：

如您所见，一旦拇指开始移动，进度条就会跳到其最小尺寸并从那里开始增长。

所以，让我们重新介绍一下原来的拇指。这个拇指将在开始时覆盖进度条并隐藏跳转到最小尺寸。我们只是想覆盖那个区域，这样白色就不会显示出来。