TableLayout两列等宽适配图片溢出问题求助

我最近在开发中想用TableLayout实现一个两列等宽的图片布局，要求每列的图片自适应单元格的可用宽度，但一开始图片总是溢出单元格和行的空间，折腾了几次终于找到了解决方案，分享给大家：

初始问题 #

需求很明确：左侧泰迪熊图片和右侧雨伞图片各占行宽的50%，图片自适应列宽但不溢出。但实际运行时图片根本没有按预期的等宽布局，还会超出边界。初始布局代码如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view.DebugFragment">

    <TableLayout
        android:id="@+id/tableImages"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:stretchColumns="*"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TableRow
            android:layout_width="0dp"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="16dp"
                app:srcCompat="@drawable/teddy_bear" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="16dp"
                tools:srcCompat="@drawable/umbrella" />
        </TableRow>
    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

尝试过程与踩坑 #

1. 第一次尝试：替换为shrinkColumns
   按照建议把stretchColumns="*"改成shrinkColumns="*"，确实解决了图片溢出的问题，但两列等宽的要求被破坏了，列宽会根据图片内容自适应，达不到预期效果。

2. 第二次尝试：调整ImageView的layout_width
   保留stretchColumns="*"的同时，把每个ImageView的android:layout_width从match_parent改成0dp，这下终于同时满足了两列等宽和图片不溢出的要求！不过新问题来了：两张图片高度不一致，需要让它们顶部对齐，并且图片下方出现了莫名的空白。

最终优化方案 #

1. 实现等宽+无溢出的核心修改 #

关键就是两点：

• TableLayout保持android:stretchColumns="*"，让所有列自动拉伸填充父容器的可用宽度，实现等宽
• ImageView设置android:layout_width="0dp"，让图片以列的宽度为基准自适应，避免溢出

2. 解决图片对齐与底部空白问题 #

• 添加android:scaleType="fitStart"实现图片顶部对齐
• 加上android:adjustViewBounds="true"，让ImageView根据图片的原始宽高比调整自身边界，去除多余的空白区域；另外也建议检查下图片资源本身是否带有透明边距，这也可能导致底部空白

修改后的最终布局代码：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view.DebugFragment">

    <TableLayout
        android:id="@+id/tableImages"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:stretchColumns="*"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TableRow
            android:layout_width="0dp"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:padding="16dp"
                android:scaleType="fitStart"
                android:adjustViewBounds="true"
                app:srcCompat="@drawable/teddy_bear" />

            <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:padding="16dp"
                android:scaleType="fitStart"
                android:adjustViewBounds="true"
                tools:srcCompat="@drawable/umbrella" />
        </TableRow>
    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

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