我知道这已经晚了三年,但对于像我这样仍然找不到解决方案的人,这里有一个方法。问题在于拇指可绘制区域会添加顶部/底部填充(尝试将拇指可绘制区域设置为
@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"
>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>