Android自定义2×2图片网格行高不一致问题排查与修复咨询

我完全懂你遇到的糟心事——明明想做个对称的2×2图片网格，结果因为图片原始尺寸不一样，行高就乱了。其实核心问题是ImageView的固有尺寸会悄悄干扰布局的权重计算，尤其是用LinearLayout或TableLayout这类依赖权重的布局时，没强制约束好每个格子的尺寸规则就容易出问题。下面给你几个实用的解决办法：

方案一：用ConstraintLayout（首推） #

现在Android官方最推荐的就是ConstraintLayout，它能精准控制视图的比例和位置，轻松实现完美对称的正方形网格，完全不受图片原始尺寸影响。

示例代码：

<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="match_parent">

    <!-- 左上角图片 -->
    <ImageView
        android:id="@+id/iv_top_left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/cibo"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/iv_top_right"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 右上角图片 -->
    <ImageView
        android:id="@+id/iv_top_right"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/cibo"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/iv_top_left"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 左下角图片 -->
    <ImageView
        android:id="@+id/iv_bottom_left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/cibo"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/iv_bottom_right"
        app:layout_constraintTop_toBottomOf="@+id/iv_top_left" />

    <!-- 右下角图片 -->
    <ImageView
        android:id="@+id/iv_bottom_right"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/cibo"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/iv_bottom_left"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_top_right" />

</androidx.constraintlayout.widget.ConstraintLayout>

这里的关键是app:layout_constraintDimensionRatio="1:1"，它强制每个ImageView保持正方形比例，再通过约束让四个图片平分父布局的宽高，不管图片原始尺寸是啥，网格都会整整齐齐。

方案二：修复LinearLayout的实现 #

如果你习惯用LinearLayout，那得确保每个ImageView的高度被严格约束，同时关掉它自动调整边界的功能，别让图片的原始尺寸搞乱布局：

修改后的代码：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="2">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="2">

        <ImageView
            android:id="@+id/iv_immagine_sx1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            android:src="@mipmap/cibo" />

        <ImageView
            android:id="@+id/iv_immagine_dx1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            android:src="@mipmap/cibo" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="2">

        <ImageView
            android:id="@+id/iv_immagine_sx2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            android:src="@mipmap/cibo" />

        <ImageView
            android:id="@+id/iv_immagine_dx2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            android:src="@mipmap/cibo" />
    </LinearLayout>
</LinearLayout>

重点调整：

• 给每个横向LinearLayout加android:weightSum="2"，确保两个ImageView平分宽度
• 给每个ImageView设置android:adjustViewBounds="false"，禁止它根据图片尺寸调整自身边界，严格遵循布局分配的宽高
• 确保所有ImageView的layout_height="match_parent"，继承父LinearLayout的高度（父布局通过weight固定为屏幕高度的一半）

方案三：修复TableLayout的实现 #

要是你坚持用TableLayout，得开启列拉伸，同时强制TableRow的高度通过权重分配，ImageView的高度也要设为match_parent：

修改后的代码：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="0,1" <!-- 让两列自动拉伸填满宽度 -->
        android:weightSum="2">

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="false"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher" />

            <ImageView
                android:id="@+id/ImageView2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="false"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/ImageView3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="false"
                android:scaleType="centerCrop"
                android:src="@mipmap/cibo" />

            <ImageView
                android:id="@+id/ImageView4"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="false"
                android:scaleType="centerCrop"
                android:src="@mipmap/cibo" />
        </TableRow>
    </TableLayout>
</RelativeLayout>

关键修改：

• TableLayout添加android:stretchColumns="0,1"，让两列自动填满父布局宽度
• TableLayout设置android:weightSum="2"，TableRow的layout_height="0dp"和layout_weight="1"，确保两行平分高度
• ImageView设置android:adjustViewBounds="false"和layout_height="match_parent"，强制使用布局分配的尺寸

核心原因总结 #

行高乱掉的本质是ImageView的固有尺寸（图片原始宽高）干扰了布局的权重计算，当图片高度大于布局分配的高度时，ImageView会被撑开，导致父布局高度超出预期。通过关闭adjustViewBounds或者强制设置宽高比，就能让ImageView严格遵循布局规则，不受图片原始尺寸影响。

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