Android XML中实现RelativeLayout左右各放两个元素的问题求助

你的代码里有几个问题导致布局不符合预期，调整后就能实现左侧两个元素、右侧两个元素的效果：

问题分析 #

1. RelativeLayout 不支持 android:orientation 属性，这是 LinearLayout 的专属属性，删掉即可。
2. 右侧的 logout_text 同时设置了 layout_alignParentRight="true" 和 layout_toLeftOf="@+id/logout_iconPl"，两个属性冲突导致文本位置异常。
3. 左侧标题和右侧元素仅用 marginTop 定位，适配性差，不同屏幕会出现错位，应该改为垂直居中对齐。
4. 右侧元素没有设置右侧边距，会紧贴屏幕边缘，视觉效果不佳。

修改后的完整代码 #

<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/linear_parentPl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/primary_color"
    tools:context=".PlayList">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/top_bar"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <!-- 左侧返回图标 -->
        <ImageView
            android:id="@+id/back_iconPl"
            android:layout_width="44dp"
            android:layout_height="44dp"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="5dp"
            android:src="@drawable/baseline_arrow_back_ios_24" />

        <!-- 左侧标题，与返回图标垂直居中对齐 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="@+id/back_iconPl"
            android:layout_toRightOf="@+id/back_iconPl"
            android:text="@string/play_list"
            android:textColor="@color/light_orange"
            android:textSize="24sp"
            android:textStyle="bold" />

        <!-- 右侧退出图标，对齐父布局右侧并垂直居中 -->
        <ImageView
            android:id="@+id/logout_iconPl"
            android:layout_width="26dp"
            android:layout_height="26dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="@+id/back_iconPl"
            android:layout_marginRight="16dp"
            android:src="@drawable/logoutrounded" />

        <!-- 右侧退出文本，在图标左侧并垂直居中 -->
        <TextView
            android:id="@+id/logout_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="@+id/back_iconPl"
            android:layout_toLeftOf="@+id/logout_iconPl"
            android:layout_marginRight="8dp"
            android:text="@string/logout_text"
            android:textColor="@color/white"
            android:textSize="14sp"
            android:textStyle="bold" />
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

关键修改说明 #

• 移除了 RelativeLayout 无效的 android:orientation 属性。
• 左侧标题使用 layout_centerVertical="@+id/back_iconPl" 与返回图标垂直居中，替代固定的 marginTop，适配不同屏幕。
• 右侧的 logout_text 删掉冲突的 layout_alignParentRight="true"，仅保留 layout_toLeftOf="@+id/logout_iconPl"，并设置垂直居中。
• 给右侧图标添加 layout_marginRight="16dp"，给文本添加 layout_marginRight="8dp"，让右侧元素和屏幕边缘、彼此之间有合适间距。
• 右侧两个元素都通过 layout_centerVertical="@+id/back_iconPl" 与左侧图标保持垂直对齐，保证整体布局整齐。

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