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

这是因为android:height的{​​{1}}和android:width仅适用于API 23及更高版本。如果您将这些属性用于23以下的API，它将不会给您一个错误，只是忽略它。

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

如果你查看相关的docs或者说它们是在API级别23中添加的。

Answer 2

您可能面临已知问题，here是解决方案。您应该定义maxHeight的{​​{1}}和minHeight与其高度相同。或者你甚至可以将SeekBar设置为像maxHeight这样的大值，如果你认为自己的身高是1000dp，就像在同一个帖子中提到的答案一样。

wrap_content

Answer 3

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

在seekbar_thumb_drawable.xml中：

$`HG-U133A`
[1] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/0"
[2] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/1"


$`HG-U133A_2`
 [1] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/6" 
 [2] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/7" 
 [3] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/8" 
 [4] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/9" 
 [5] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/10"


$`HG-U133_Plus_2`
[1] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/22"
[2] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/23"
[3] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/24"
[4] "C:\\Users\\agaz\\AppData\\Local\\Temp\\Rtmp0wZI21/008947515435900b4d1a0b8d/25"

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

我在项目中使用重力，因此可绘制项目在中心绘制。

Answer 4

我也在 thumb drawable 的低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>

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。