Android自定义视频播放器：实现SeekBar上方控件对齐布局

问题根因 #

布局出现错位、加边距控件消失的核心原因有两个：

• 布局解析顺序错误：mid_bottom_controls写在SeekBar容器seek之前，却在布局参数里引用了seek的id，Android按XML顺序解析布局时，前序元素引用后序定义的id会出现位置计算异常
• 锚定规则错误：用layout_alignTop对齐SeekBar容器顶部时，配合gravity="bottom"会让控件和SeekBar区域重叠，无法稳定停在SeekBar正上方

正确实现步骤 #

• 调整XML中元素的排列顺序，把SeekBar容器seek放到mid_bottom_controls之前，保证id引用合法
• 修改mid_bottom_controls的锚定规则，用layout_above属性让整个容器紧贴SeekBar容器的顶部，同时对齐SeekBar容器的左右边界，和SeekBar宽度完全匹配
• 给时长文本、CC按钮都添加android:layout_centerVertical="true"属性，保证两个控件在同一水平线上，不会出现高低差

修正后的核心布局代码 #

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/jw_surface_transparent_black"
    android:clickable="true">

    <RelativeLayout
        android:id="@+id/loading_panel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:visibility="gone">

        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/jw_transparent"
            android:indeterminate="true"
            android:indeterminateDrawable="@drawable/ic_jw_buffer" />
    </RelativeLayout>


    <LinearLayout
        android:id="@+id/center_controls"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/rewind_button"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_gravity="center"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:background="@color/jw_transparent"
            android:src="@drawable/rw_15_btn"
            android:visibility="invisible" />

        <ImageButton
            android:id="@+id/play_and_pause_button"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_gravity="center"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:background="@color/jw_transparent"
            android:src="@drawable/ic_jw_play" />

        <ImageButton
            android:id="@+id/fast_forward_button"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_gravity="center"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:background="@color/jw_transparent"
            android:src="@drawable/ff_15_btn"
            android:visibility="invisible" />

    </LinearLayout>

    <!-- SeekBar容器移到上方控件之前，保证id引用顺序正确 -->
    <LinearLayout
        android:id="@+id/seek"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="@dimen/player_margin"
        android:layout_marginEnd="@dimen/player_margin"
        android:layout_marginBottom="@dimen/player_margin_bottom"
        android:orientation="horizontal">

        <SeekBar
            android:id="@+id/seek_bar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/jw_transparent"
            android:progressBackgroundTint="@color/white"
            android:thumb="@drawable/custom_thumb"
            android:visibility="visible" />
    </LinearLayout>

    <!-- 锚定到SeekBar容器正上方 -->
    <RelativeLayout
        android:id="@+id/mid_bottom_controls"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/seek"
        android:layout_alignStart="@id/seek"
        android:layout_alignEnd="@id/seek"
        android:layout_marginBottom="4dp"
        android:gravity="center_vertical">

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/seekbar_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:text="@string/seekbar_text"
            android:textColor="@color/white"
            android:visibility="visible" />

        <ImageButton
            android:id="@+id/cc_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:background="@color/jw_transparent"
            android:src="@drawable/ic_jw_captions_selector"
            android:visibility="visible"
            app:tint="@color/white" />

    </RelativeLayout>

</RelativeLayout>

调整说明 #

• 删掉了SeekBar上多余的paddingTop和重复的layout_marginBottom，避免视觉偏移
• mid_bottom_controls上的layout_marginBottom="4dp"可以按需调整数值，控制文本、按钮和SeekBar之间的间距，不会再出现加边距控件消失的问题
• 调试位置时可以先把所有控件的visibility改成visible，位置对齐后再改回需要的可见性状态

内容的提问来源于stack exchange，提问作者Iam Me