对齐三行控件Android

Question

我为第三方视频播放器制作了自定义控件。我在对齐某些元素时遇到了麻烦。我希望我的控件像这样对齐，搜索栏占据了父级的大部分宽度，搜索栏时间和 cc 按钮在搜索栏开始和结束处的搜索栏上方对齐：

other player controls

这是我的播放器目前的样子，顶部有搜索栏时间和抄送按钮： my player controls

这是我的代码：

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

    <RelativeLayout
        android:id="@+id/mid_bottom_controls"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/seek"
        android:layout_alignEnd="@id/seek"
        android:gravity="bottom">


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


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


    </RelativeLayout>

    <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_marginBottom="@dimen/player_margin_bottom"
            android:layout_weight="1"
            android:background="@color/jw_transparent"
            android:paddingTop="7dp"
            android:progressBackgroundTint="@color/white"
            android:thumb="@drawable/custom_thumb"
            android:visibility="invisible" />

    </LinearLayout>

</RelativeLayout>

如何让搜索栏文本和抄送按钮位于搜索栏上方？提前谢谢你。

Answer 1

首先我应该说，这种复杂的布局可以通过 ConstraintLayout 实现，比这种嵌套布局的方法更容易和更快。但无论如何这都不是问题，您唯一需要做的就是为您的 RelativeLayout 添加一些属性，ID 为 mid_bottom_controls，使其与搜索栏的顶部对齐。所以请像下面这样更新它：

<RelativeLayout
  android:id="@+id/mid_bottom_controls"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_alignStart="@id/seek"
  android:layout_alignEnd="@id/seek"
  android:layout_alignTop="@id/seek"
  android:gravity="bottom">