Android GridLayout搭配CardView开发时真机出现布局超出屏幕问题

问题根源 #

你的布局中CardView使用了固定170dp的宽度，加上左右各15dp的margin，单张CardView总宽度达到200dp，两列并排需要至少400dp的屏幕宽度。多数小屏安卓设备的可用屏幕宽度不足400dp，就会出现CardView超出屏幕的问题，你选的模拟器设备宽度足够所以显示正常。

解决方案 #

核心思路是放弃固定宽度，用权重让两列CardView自动平分屏幕可用宽度，适配不同尺寸设备，具体修改如下：

1. 将所有CardView的android:layout_width属性从170dp改为0dp，同时添加android:layout_columnWeight="1"属性，让GridLayout自动平均分配两列的宽度。
2. 给所有CardView添加app:cardUseCompatPadding="true"属性，保证不同系统版本下CardView的边距计算逻辑一致，避免兼容问题导致的布局偏移。
3. 如需兼容Android 5.0（API 21）以下版本，将布局中系统自带的android.widget.GridLayout替换为AndroidX库的androidx.gridlayout.widget.GridLayout，同样支持weight属性。
4. 如果需要保持CardView为正方形，可将固定170dp的高度改为wrap_content，搭配app:layout_constraintDimensionRatio="1:1"属性实现宽高等比，也可以保留固定高度，仅修改宽度属性即可解决超出问题。

修改后的核心代码示例 #

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_margin="5dp"
    android:alignmentMode="alignMargins"
    android:columnCount="2"
    android:columnOrderPreserved="false"
    android:rowCount="4">

    <androidx.cardview.widget.CardView
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="170dp"
        android:layout_margin="15dp"
        android:layout_columnWeight="1"
        app:cardBackgroundColor="#DE773C"
        app:cardCornerRadius="12dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true">

        <Button
            android:id="@+id/btn1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginTop="10dp"
                android:src="@drawable/img1" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:text="TEST"
                android:textAlignment="center"
                android:textColor="#272932"
                android:textSize="25sp"
                android:textStyle="bold" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="170dp"
        android:layout_margin="15dp"
        android:layout_columnWeight="1"
        app:cardBackgroundColor="#DE773C"
        app:cardCornerRadius="12dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true">

        <Button
            android:id="@+id/btn2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginTop="10dp"
                android:src="@drawable/img2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:text="TEST"
                android:textAlignment="center"
                android:textColor="#272932"
                android:textSize="25sp"
                android:textStyle="bold" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</GridLayout>

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