安卓：SeekBar的垂直对齐Drawable

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，但是我找不到解决方案...

- Michal

Answer 1

这是因为对于<item>，android:height和android:width只适用于API 23及以上版本。如果在API 23以下使用这些属性，它不会给出错误提示，而是简单地忽略它。

在你的情况下，android:height="5dp"和android:height="10dp"没有被应用。

如果查看相关的文档，它说这些属性是在API level 23中添加的。

- Abdul Wasae

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>

我正在使用物品中的重力，以便可绘制的物品可以在中心绘制。

- Manmohan

Answer 3

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

<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"/>

- romtsn

Answer 4

我也在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>

- Amjad Khan

Answer 5

<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。

- Zane Jeff