如何在LinearLayout中实现ImageView与TextView上下对齐显示

问题原因 #

你当前的布局将队名文本层和队徽图片层拆分为了两个独立的同级布局，当某一侧队名过长换行时，左右两个文本控件的高度不一致，下方的图片无法和上方对应的文本绑定对齐，就会出现错位问题。

解决方案 #

调整布局结构，把每支队伍的队名、队徽封装为独立的垂直方向LinearLayout，两个垂直布局放在水平父布局中平分宽度，各自内部的文本和图片都设置居中对齐，即可保证图文始终上下对应，不受文本长度影响。
核心布局示例如下：

<!-- 承载左右两支队伍的水平父布局 -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="2"
    android:layout_marginTop="5dp">

    <!-- 左侧队伍的垂直布局：内部图文上下对齐 -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center_horizontal">

        <TextView
            android:id="@+id/title_team_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/roboto_medium"
            android:text="Chelsea"
            android:textColor="@color/black"
            android:textSize="20sp"
            android:gravity="center"/>

        <ImageView
            android:id="@+id/img_team_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:src="@drawable/image_3" />

    </LinearLayout>

    <!-- 右侧队伍的垂直布局：内部图文上下对齐 -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center_horizontal">

        <TextView
            android:id="@+id/title_team_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/roboto_medium"
            android:text="Manchester City"
            android:textColor="@color/black"
            android:textSize="20sp"
            android:gravity="center"/>

        <ImageView
            android:id="@+id/img_team_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:src="@drawable/image_5" />

    </LinearLayout>

</LinearLayout>

额外优化建议 #

• 你当前布局中存在大量重复ID，后续列表复用的时候会导致控件查找异常，建议把单场比赛的布局抽为单独的item布局，用RecyclerView承载列表，不要直接在ScrollView里写重复布局。
• 给队名TextView设置maxLines="2"和ellipsize="end"，避免队名过长时占用过多布局空间。

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