Android：SeekBar 的可绘制垂直对齐

Question

这是我需要用xml drawable 为SeekBar 实现的目标：

我尝试了许多不同的变化，这是我能做到的最好的。

这是seekbar_thumb_drawable.xml：

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

    <solid android:color="@color/accent_color"/>

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

</shape>

这是seekbar_drawable.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"
        android:height="5dp"
        android:top="7.5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/seekbar_background" />
            <corners android:radius="2.5dp" />
        </shape>
    </item>

    <item
        android:id="@android:id/progress"
        android:height="10dp"
        android:top="5dp">
        <clip>
            <shape
                android:shape="rectangle">
                <solid android:color="@color/seekbar_progress" />
                <corners android:radius="5dp" />
            </shape>
        </clip>
    </item>

</layer-list>

API 18 上的结果： 问题是线条不是垂直居中的。

API 24 上的结果： 这显示正是我希望它显示的方式。

是否有任何可能的解决方案可以使其在来自API 16 的所有设备上显示为第一张图片？
我不想使用九色补丁，因为我需要使用资源中的颜色。 我试过padding，gravity，top，bottom，inter-shape，line，rectangle，但我找不到解决方案...

Answer 1

这是因为 <item> 的 android:height 和 android:width 仅适用于 API 23 及更高版本。如果你对 23 以下的 API 使用这些属性，不会报错，直接忽略即可。

在您的情况下，android:height="5dp" 和 android:height="10dp" 未被应用。

如果您查看相关的 docs 或 ，它表示这些是在 API 级别 23 中添加的。

Answer 2

在您的可绘制文件中进行更新。

在 seekbar_thumb_drawable.xml 中：

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center">
        <shape android:shape="oval">

            <solid android:color="@color/accent_color" />

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

        </shape>
    </item>
</layer-list>

seekbar_drawable.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"
        android:height="5dp"
        android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="@color/seekbar_background" />
            <corners android:radius="2.5dp" />
        </shape>
    </item>

    <item
        android:id="@android:id/progress"
        android:height="10dp"
        android:gravity="center">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="@color/seekbar_progress" />
                <corners android:radius="5dp" />
            </shape>
        </clip>
    </item>

</layer-list>

我在项目中使用重力，所以可绘制项目在中心绘制。

Answer 3

您可能面临已知问题，here 是解决方案。您应该将SeekBar 的maxHeight 和minHeight 定义为与它的高度相同。或者你甚至可以将maxHeight 设置为像1000dp 这样的大值，如果你期望你的身高是wrap_content，就像下面在同一个线程中的建议答案中提到的那样。

<SeekBar 
    android:thumb="@drawable/seekbar_thumb_drawable"         
    android:progressDrawable="@drawable/seekbar_drawable"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="1000dp"
    <!-- OR -->
    android:maxHeight="16dp"
    android:minHeight="16dp"/>

Answer 4

<SeekBar
    android:id="@+id/seek_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="3dp"
    android:minHeight="3dp"
    android:progressDrawable="@drawable/nnl_bg_seek_bar_progress"
    android:splitTrack="false"
    android:thumb="@drawable/nnl_sel_seek_bar_thumb"
    tools:ignore="UnusedAttribute"
    />

上面的代码是我的方式。您可能需要注意这些属性：maxHeight / minHeight / splitTrack。

Answer 5

我在 thumb drawable 的 Low API 中也面临同样的问题，所以我为此做了什么。

<SeekBar
    android:id="@+id/seekbar_transparency"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:paddingTop="@dimen/seekbar_thumb_size_space"
    android:paddingBottom="@dimen/seekbar_thumb_size_space"
    android:progress="100"
    android:theme="@style/SeekbarTheme"
    android:thumb="@drawable/thumb_drawable" />

style.xml

<!--Seekbar background change-->
<style name="SeekbarTheme" parent="Theme.AppCompat.Light">
    <!-- active seekbar progress track color -->
    <item name="colorControlActivated">@color/colorSeekBar</item>
    <!-- inactive seekbar progress track color  -->
    <item name="colorControlNormal">@color/colorGray</item>
</style>

thumb_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="2.5dp"
        android:left="2.5dp"
        android:right="2.5dp"
        android:top="2.5dp">

        <shape android:shape="rectangle">
        <size
         android:width="@dimen/seekbar_thumb_size"
         android:height="@dimen/seekbar_thumb_size" />
        <corners android:radius="20dp" />
        <solid android:color="#201DE9B6" />
        </shape>
    </item>

    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">

        <shape android:shape="rectangle">
            <size
                android:width="@dimen/seekbar_thumb_size"
                android:height="@dimen/seekbar_thumb_size" />
            <corners android:radius="20dp" />
            <solid android:color="#AA1DE9B6" />
        </shape>
    </item>
</layer-list>

dimes.xml

<!--Seeckbar thumb size-->
<dimen name="seekbar_thumb_size">10dp</dimen>
<dimen name="seekbar_thumb_size_space">5dp</dimen>