GridLayout cardview离开屏幕Android答案

【问题标题】：GridLayout cardview getting out of screen AndroidGridLayout cardview离开屏幕Android
【发布时间】：2021-10-23 00:30:21
【问题描述】：

我正在尝试使用 GridLayout、CardView 和 LinearLayout 制作应用程序，因此在模拟器上一切正常，但是当我在真实设备上测试我的应用程序时，卡片视图超出屏幕我已经在不同设备上对其进行了测试，但问题是仍然出现请帮忙！

This is how it looks inside the emulator

This is how it looks on a real device

XML 代码

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

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

    <ImageView
        android:id="@+id/logo_img"
        android:src="@drawable/logo"
        android:layout_gravity="center"
        android:layout_width="250dp"
        android:layout_height="wrap_content"/>

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        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="170dp"
            android:layout_height="170dp"
            android:layout_margin="15dp"
            app:cardBackgroundColor="#DE773C"
            app:cardCornerRadius="12dp"
            app:cardElevation="5dp">

            <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="170dp"
            android:layout_height="170dp"
            android:layout_margin="15dp"
            app:cardBackgroundColor="#DE773C"
            app:cardCornerRadius="12dp"
            app:cardElevation="5dp">

            <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>

 </LinearLayout>
</ScrollView>

【问题讨论】：

尝试将两个 CardView 的 layout_width 更改为 match_parent 或 wrap_content。

标签： android android-studio android-layout android-cardview android-gridlayout

【解决方案1】：

您的许多宽度和高度都是硬编码的：170dp、80dp 等。您所做的是设计一个适合设计器屏幕布局和大小的布局。当屏幕宽度/高度发生变化时，布局会中断，就像您移动到模拟器或真实设备时一样。

查看Support different screen sizes，了解如何处理适用于不同屏幕尺寸的布局。这需要做一些事情，但这是必要的，除非您的应用仅在一种配置上运行。

【讨论】：

【解决方案2】：

如果您希望所有设备中两个 CardView 的宽度相同，请尝试在您的 GridLayout 中添加以下内容

将android:columnCount="2" 和android:orientation="horizontal" 添加到GridLayout

将 android:layout_width="0dp" 和 android:layout_columnWeight="1" 添加到 CardViews

示例代码：

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

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

        <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_columnWeight="1"
        android:layout_height="170dp"
        android:layout_margin="15dp"
        app:cardBackgroundColor="#DE773C"
        app:cardCornerRadius="12dp"
        app:cardElevation="5dp">

        <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>

【讨论】：