Android：自定义 SeekBar 图层列表未按预期工作答案

【问题标题】：Android: Custom SeekBar layerlist not working as expectedAndroid：自定义 SeekBar 图层列表未按预期工作
【发布时间】：2013-02-17 20:58:29
【问题描述】：

我有一个自定义的 SeekBar：

<SeekBar 
   android:id="@+id/seekBar"
    android:layout_width="@dimen/seekbar_width"
    android:layout_height="wrap_content"
    android:paddingTop="15px"
    android:paddingBottom="15px"
    android:secondaryProgress="0"
    android:progress="0"
    style="@style/CustomSeekBar"/>

采用这种风格：

<style name="CustomSeekBar">
    <item name="android:layout_width">@dimen/seekbar_width</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:progressDrawable">@drawable/custom_seekbar_progress</item>
    <item name="android:thumb">@drawable/slider_bar_grip</item>
</style>

我已经尝试了两种类型的图层列表。首先有九个补丁图像：

<?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:drawable="@drawable/slider_bar_track"></item>
    <item android:id="@android:id/secondaryProgress"    android:drawable="@drawable/slider_bar_track"></item>
    <item android:id="@android:id/progress"             android:drawable="@drawable/slider_bar_hlt"  ></item>
</layer-list>

其次是项目和渐变：

<?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>
            <corners android:bottomLeftRadius="4px" android:topLeftRadius="4px" android:topRightRadius="4px" android:bottomRightRadius="4px"/>
            <gradient android:startColor="@color/dark_grey" android:endColor="@color/light_grey" android:angle="-90.0" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:bottomLeftRadius="4px" android:topLeftRadius="4px" android:topRightRadius="4px" android:bottomRightRadius="4px"/>
            <gradient android:startColor="@color/dark_grey" android:endColor="@color/light_grey" android:angle="-90.0" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:bottomLeftRadius="4px" android:topLeftRadius="4px" android:topRightRadius="4px" android:bottomRightRadius="4px"/>
                <gradient android:startColor="@color/orange" android:endColor="@color/orange" android:centerColor="@color/light_orange" android:angle="90.0" />
            </shape>
        </clip>
    </item>
</layer-list>

它应该是这样的：

图片如下所示：高度太高（进度、背景和拇指 png 均为 12 像素高，其中背景和进度 png 在顶部和底部具有透明像素以使其高度相同）我有res 文件夹中的这三个文件适用于所有具有相同大小的密度（如我所愿）。此外，进度总是延伸到 SeekBar 的整个宽度。我曾尝试更改图层列表的顺序，但无济于事。

当使用图层列表中的形状时，它看起来像这样：至少在这里，进度是正确的，但高度还是太高了。

在这种情况下，我需要所有密度的高度相同（12px，而不是 dp）。屏幕截图来自 xhdpi 设备。可绘制进度的高度与 mdpi 设备上的拇指相同。我怎样才能让它们在所有设备上看起来都一样，并且让可绘制的进度小于拇指？

【问题讨论】：

好的，高度问题可以使用 ben75s 答案解决，我设法使用插入可绘制而不是普通可绘制解决了进度问题（不知道那有效，但确实有效）@ 987654321@

标签： android seekbar

【解决方案1】：

问题是在进度和背景 png 的左边框上定义的可拉伸区域。

目前，可拉伸区域大约为 1 像素宽，正好位于左边缘的中间。这意味着您的 png 的水平中心线将被拉伸。但你需要的是“拉伸透明区域”。

去做吧：

去除左边缘中间的黑色像素。
在左边缘约 y=3 和 y=9 处添加 2 个黑色像素（确保它们都在 png 的透明区域中）

【讨论】：