Android SeekBar中的不必要的填充问题

Question

Android SeekBar中的不必要的填充问题

5

我在使用Android seekbar时遇到了问题，似乎有默认的填充设置，但我无法删除它。我尝试将填充设置为“0dp”，并尝试将边距设置为“-10dp”以查看是否可以删除一些空间，并尝试将背景设置为null，以防有背景占用空间，但似乎没有任何效果。SeekBar标签如下：

<SeekBar
    android:paddingLeft="0px"
    android:paddingRight="0px"
    android:background="@null"
    android:id="@+id/musicSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

编辑： 经过一些测试和尝试，我学到了以下内容：

填充是由于拇指可绘制大小造成的。
设置android:thumb="@null"会删除底部和顶部填充。
即使我删除了拇指，右侧和左侧填充仍然存在，但可以通过在两侧设置等于默认拇指可绘制宽度除以2的负边距来移除，因此如果它是32dp，则每侧为16dp。

现在我需要知道是否有更清晰的方法来去除填充，并且所有设备上的拇指大小是否相同？任何帮助都受欢迎。

- Amr El Aswar

1

设置android:thumb="@null"并不能移除顶部和底部的填充。 - seema

1

在XML中只需使用android:padding="0dp"即可解决我的问题。 - masoud jafari

6个回答

7

要从SeekBar中删除填充，您需要在运行时执行以下操作：

findViewById(R.id.seekBar).setPadding(0,0,0,0);

======================= OR ======================

Bitmap thumbImage = BitmapFactory.decodeResource(getResources(), R.drawable.thumb);
int paddingDp = (int)(0.5f * (thumbImage.getWidth()));
findViewById(R.id.seekBar).setPadding(paddingDp,0,paddingDp,0);

你不需要设置 android:thumb="@null"。

- Shanki Bansal

这将删除左右两侧的填充。如何删除SeekBar上方和下方的填充。我不需要任何拇指，所以我已将其设置为null。 - seema

1

这是拇指的尖端技术。 - Choletski

好的，Choletski提出了很好的建议。在父视图上设置android:clipChildren="false"可以解决拇指被截断的问题。稍微有点不足的是，如果在seekBar布局的外部（外侧拇指一半）触摸拇指，则拇指将不会响应。这只是一个小问题，但对于我的情况，这个解决方案比我尝试过的许多其他选项都要好。 - Ben

3

只需将 minHeight 设置为0dp，它就会“移除”上下的填充。

- larten

1

只需在您的xml代码中编写这些行并根据您的要求更改值。

android:layout_marginStart="-16dp"
android:layout_marginEnd="-16dp"

- Sahil Sherazi

0

我的解决方案与上述描述的类似，但在我看来稍微简短一些。它基于这样一个事实：SeekBar拇指可绘制的大小需要根据您在SeekBar元素上定义的android:minHeight和android:maxHeight属性进行重新定义。请注意@dimen/seek_bar_height值的使用。

最终的SeekBar如下所示：

组件本身：

<SeekBar
    android:id="@+id/seekBarAudio"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="@dimen/seek_bar_height"
    android:maxHeight="@dimen/seek_bar_height"
    android:paddingStart="0dp"
    android:paddingEnd="0dp"
    android:progressDrawable="@drawable/seekbar"
    android:thumb="@drawable/seekbar_thumb"/>

资源@drawable/seekbar的定义非常简单:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <solid android:color="@color/colorAccent"/>
        </shape>
    </clip>
</item>

</layer-list>

将@drawable/seekbar_thumb翻译为：

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<size
    android:width="@dimen/seek_bar_height"
    android:height="@dimen/seek_bar_height"/>

</shape>

虽然仍然可以手动选择进度，但用户可能会觉得有点不舒服，因为“拇指”不可见。所以请谨慎使用。

- Jozef

0

设置

android:paddingStart="0dp"
android:paddingEnd="0dp"

对于SeekBar，这个方法对我有效。

- Vijay E

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Robertson · Accepted Answer

我知道这已经晚了三年，但对于像我这样仍然找不到解决方案的人，这里有一个方法。问题在于拇指可绘制区域会添加顶部/底部填充（尝试将拇指可绘制区域设置为 @null ，并观察填充消失）。解决方案是通过拇指可绘制区域大小的一半来偏移一切。为了确保布局在各个设备上保持一致，我们将创建一个自定义的拇指可绘制区域，以便我们控制其大小。 第1步：创建自定义拇指可绘制区域。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="oval">
            <size android:height="10dp" android:width="10dp" />
            <solid android:color="@color/mediaThumbColor" />
        </shape>
    </item>
</layer-list>

步骤 2：设置 SeekBar。

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:thumb="@drawable/media_seekbar_thumb"
    android:paddingStart="0dp"
    android:paddingEnd="0dp"
    android:splitTrack="false"
    android:thumbOffset="5dp"
    android:elevation="4dp"
    />

将拇指可绘制对象设置为刚刚创建的对象。
设置splitTrack=false以解决一个问题，即自定义拇指可绘制对象会被填充到与滑动条的空白间隙。
将开始/结束填充值设置为0，以确保它是整个父级宽度（SeekBar默认具有16dp填充）。
将拇指偏移量设置为自定义拇指可绘制对象大小的一半（在我们的情况下为10dp，因此拇指偏移量为5dp）。
为SeekBar设置一些高度，以确保它显示在背景内容上面（下面有解释）。

步骤3：设置mediabar布局。

这里是正确排列所有内容的关键。媒体栏将包含一个顶级父布局，其中包含（1）SeekBar，和（2）一个包含所有其他内容（播放/暂停，后退/前进，轨道时间等）的内部父级。顶级父级需要具有透明背景，并具有高度wrap_content。内部父级需要具有您想要其媒体栏的任何背景颜色，以及您想要其媒体栏的任何高度。

将内部父级设置为与顶级父级上对齐，并且具有自定义拇指可绘制对象高度的一半的顶部边距，在我们的情况下是5dp。这会使媒体栏中的所有内容偏移，使SeekBar看起来就像紧贴着它。

以下是使用ConstraintLayout的示例。

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/media_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    >

    <SeekBar
        android:id="@+id/media_bar_seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:thumb="@drawable/media_seekbar_thumb"
        android:paddingStart="0dp"
        android:paddingEnd="0dp"
        android:splitTrack="false"
        android:thumbOffset="5dp"
        android:elevation="4dp"
        />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/media_bar_content"
        android:layout_width="match_parent"
        android:layout_height="@dimen/media_bar_height"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="5dp"
        android:background="@color/mediaBarColor"
        >

        <!-- All mediabar content goes here -->

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>