Android RelativeLayout赛事布局队徽与文本对齐问题求解

核心优化思路 #

• 替换多层嵌套的RelativeLayout为ConstraintLayout，减少布局层级的同时更易实现多控件对齐约束
• 固定左右队徽的横向锚点位置，统一垂直对齐规则
• 中间文本区域限定在两个队徽之间，避免贴边或重叠问题

优化后完整XML代码 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="12dp"
    android:background="@color/grey"
    android:clickable="true"
    android:paddingVertical="12dp">

    <!-- 左侧队徽 -->
    <ImageView
        android:id="@+id/teamALogo"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/home_row_teamLogoHeight"
        android:layout_marginStart="16dp"
        android:scaleType="fitCenter"
        android:src="@drawable/france_logo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 右侧队徽 -->
    <ImageView
        android:id="@+id/teamBLogo"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/home_row_teamLogoHeight"
        android:layout_marginEnd="16dp"
        android:scaleType="fitCenter"
        android:src="@drawable/italy_logo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 中间赛事类型 -->
    <TextView
        android:id="@+id/programmeSport"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="12dp"
        android:ellipsize="end"
        android:gravity="center_horizontal"
        android:maxLines="1"
        android:text="sport"
        android:textAllCaps="true"
        android:textColor="@color/yellow"
        android:textSize="@dimen/home_row_league_title"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/teamBLogo"
        app:layout_constraintStart_toEndOf="@id/teamALogo"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 中间赛事标题 -->
    <TextView
        android:id="@+id/programmeTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginHorizontal="12dp"
        android:ellipsize="end"
        android:gravity="center_horizontal"
        android:maxLines="1"
        android:text="programme title"
        android:textColor="@color/white"
        android:textSize="@dimen/home_row_programmeTitle"
        app:layout_constraintEnd_toStartOf="@id/teamBLogo"
        app:layout_constraintStart_toEndOf="@id/teamALogo"
        app:layout_constraintTop_toBottomOf="@id/programmeSport" />

    <!-- 中间比赛时间 -->
    <TextView
        android:id="@+id/programmeDay"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginHorizontal="12dp"
        android:gravity="center_horizontal"
        android:text="2:30 PM"
        android:textAllCaps="true"
        android:textColor="@color/green"
        android:textSize="@dimen/home_row_date"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/teamBLogo"
        app:layout_constraintStart_toEndOf="@id/teamALogo"
        app:layout_constraintTop_toBottomOf="@id/programmeTitle" />

</androidx.constraintlayout.widget.ConstraintLayout>

关键调整说明 #

• 左右队徽统一约束到父布局上下居中，固定16dp的左右边距，所有条目队徽垂直位置完全一致，不会出现偏移
• 中间所有文本的宽度设为0dp（match_constraint），左右分别约束到左右队徽的内侧，既不会在大屏下出现过多留白，也不会在小屏下和队徽重叠
• 移除了所有冗余的嵌套布局和无效属性（如RelativeLayout的orientation属性、重复的xmlns声明等），布局渲染性能更高
• 替换不稳定的负margin为正向的margin间距，不同设备下的排版一致性更好

如果需要保留RelativeLayout实现，只需要做以下修改：

• 给左侧队徽设置android:layout_alignParentStart="true"，右侧队徽设置android:layout_alignParentEnd="true"
• 给所有中间文本设置android:layout_toEndOf="@id/teamALogo"和android:layout_toStartOf="@id/teamBLogo"，宽度设为match_parent即可

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