GridLayout 内的 CardView 将关闭屏幕答案

【问题标题】：CardView inside GridLayout going off screenGridLayout 内的 CardView 将关闭屏幕
【发布时间】：2019-12-15 04:09:58
【问题描述】：

我正在使用内部带有 CardViews 的 GridLayout 来显示一组对象，供用户单击并用于在应用程序中导航。

我正在测试的平板电脑上的一切似乎都很好，但是当我将 APK 发送给朋友时，其中 2/3 的内容从屏幕上消失了，似乎无法正常工作。

示例截图：

这里的“游戏”部分似乎运行良好。找不到任何错误，我将此部分复制并粘贴到“社区”部分，然后重新命名图标，以便代码除了几个字符串之外是相同的。

我不明白为什么一个部分会起作用而其他部分不起作用。

Layout.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"
    android:background="@drawable/gradient_background"
    tools:context=".Dashboard">


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

            <RelativeLayout
                android:layout_marginTop="32dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                    <TextView
                        android:text="Dashboard"
                        android:id="@+id/dashTextMain"
                        android:textSize="34sp"
                        android:textColor="#FFF"
                        android:fontFamily="sans-serif-black"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                <TextView
                    android:id="@+id/dashTextSub"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/dashTextMain"
                    android:layout_marginTop="-2dp"
                    android:text="Welcome to RoCodes.io,"
                    android:textColor="#E8E8E8"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/dashTextSub2"
                    android:textSize="20sp"
                    android:textColor="#E8E8E8"
                    android:text="what would you like to find?"
                    android:paddingBottom="50dp"
                    android:layout_below="@id/dashTextSub"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />


            </RelativeLayout>

        //----------------------  START FIRST GRID LAYOUT -------------------------------------

        <TextView
            android:text="Music"
            android:layout_marginLeft="20dp"
            android:textSize="34sp"
            android:textColor="#FFFFFF"
            android:fontFamily="sans-serif-black"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <GridLayout
            android:rowCount="1"
            android:columnCount="2"
            android:alignmentMode="alignMargins"
            android:columnOrderPreserved="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            >

                <android.support.v7.widget.CardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_columnWeight="1"
                    android:layout_rowWeight="1"
                    app:cardElevation="6dp"
                    app:cardCornerRadius="12dp"
                    android:layout_margin="12dp"
                    >

                    <LinearLayout
                        android:id="@+id/musicCodesButton"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#FFF"
                        android:gravity="center"
                        android:orientation="vertical"
                        android:padding="16dp">

                        <ImageView
                            android:layout_width="80dp"
                            android:layout_height="80dp"
                            android:src="@drawable/ic_music" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="Music Codes"
                            android:textColor="#000000"
                            android:textSize="18dp" />

                    </LinearLayout>

                </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                app:cardElevation="6dp"
                app:cardCornerRadius="12dp"
                android:layout_margin="12dp"
                >

                <LinearLayout
                    android:id="@+id/artistSearchButton"
                    android:orientation="vertical"
                    android:background="#FFF"
                    android:gravity="center"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:src="@drawable/ic_artist"
                        android:layout_width="80dp"
                        android:layout_height="80dp" />

                    <TextView
                        android:layout_marginTop="12dp"
                        android:textColor="#000000"
                        android:textSize="18dp"
                        android:text="Search Artists"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                app:cardElevation="6dp"
                app:cardCornerRadius="12dp"
                android:layout_margin="12dp"
                >

                <LinearLayout
                    android:id="@+id/categorySearchButton"
                    android:orientation="vertical"
                    android:background="#FFF"
                    android:gravity="center"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:src="@drawable/ic_categories"
                        android:layout_width="80dp"
                        android:layout_height="80dp" />

                    <TextView
                        android:layout_marginTop="12dp"
                        android:textColor="#000000"
                        android:textSize="18dp"
                        android:text="Music Categories"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

            </android.support.v7.widget.CardView>


        </GridLayout>
        //----------------------  END FIRST GRID LAYOUT -------------------------------------

        //----------------------  START SECOND GRID LAYOUT -------------------------------------
        <TextView
            android:text="Games"
            android:layout_marginLeft="20dp"
            android:textSize="34sp"
            android:textColor="#FFFFFF"
            android:fontFamily="sans-serif-black"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <GridLayout
            android:rowCount="1"
            android:columnCount="2"
            android:layout_marginBottom="30dp"
            android:alignmentMode="alignMargins"
            android:columnOrderPreserved="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                app:cardElevation="6dp"
                app:cardCornerRadius="12dp"
                android:layout_margin="12dp"
                >

                <LinearLayout
                    android:id="@+id/twitterCodesButton"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:background="#FFFFFF"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:src="@drawable/ic_newcodes"
                        android:layout_width="80dp"
                        android:layout_height="80dp" />

                    <TextView
                        android:layout_marginTop="12dp"
                        android:textColor="#000000"
                        android:textSize="18dp"
                        android:text="New Codes"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                app:cardElevation="6dp"
                app:cardCornerRadius="12dp"
                android:layout_margin="12dp"
                >

                <LinearLayout
                    android:orientation="vertical"
                    android:gravity="center"
                    android:background="#FFFFFF"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:src="@drawable/ic_gamecodes"
                        android:layout_width="80dp"
                        android:layout_height="80dp" />

                    <TextView
                        android:layout_marginTop="12dp"
                        android:textColor="#000000"
                        android:textSize="18dp"
                        android:text="Coming Soon"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

        </GridLayout>
        //----------------------  END SECOND GRID LAYOUT -------------------------------------

        //----------------------  START THIRD GRID LAYOUT -------------------------------------
        <TextView
            android:text="Community"
            android:layout_marginLeft="20dp"
            android:textSize="34sp"
            android:textColor="#FFFFFF"
            android:fontFamily="sans-serif-black"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <GridLayout
            android:rowCount="1"
            android:columnCount="2"
            android:layout_marginBottom="30dp"
            android:alignmentMode="alignMargins"
            android:columnOrderPreserved="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                app:cardElevation="6dp"
                app:cardCornerRadius="12dp"
                android:layout_margin="12dp"
                >

                <LinearLayout
                    android:id="@+id/discordServerButton"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:background="#FFFFFF"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:src="@drawable/ic_discord"
                        android:layout_width="80dp"
                        android:layout_height="80dp" />

                    <TextView
                        android:layout_marginTop="12dp"
                        android:textColor="#000000"
                        android:textSize="18dp"
                        android:text="RoCodes Discord"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                app:cardElevation="6dp"
                app:cardCornerRadius="12dp"
                android:layout_margin="12dp"
                >

                <LinearLayout
                    android:id="@+id/websiteButton"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:background="#FFFFFF"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:src="@drawable/ic_website"
                        android:layout_width="80dp"
                        android:layout_height="80dp" />

                    <TextView
                        android:layout_marginTop="12dp"
                        android:textColor="#000000"
                        android:textSize="18dp"
                        android:text="RoCodes Website"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

        </GridLayout>
        //----------------------  END THIRD GRID LAYOUT -------------------------------------

    </LinearLayout>

</ScrollView>```

【问题讨论】：

我建议使用具有不同视图类型的recyclerView，使用它有几个原因：1）项目在屏幕上不显示时会被回收，这有利于性能2）易于维护项目视图
我一定会对此进行调查，但我正在努力思考为什么这个特定代码不起作用。我对这一切都很陌生，所以我想尽可能多地学习。 :)
请添加检测到问题的平板电脑的规格

标签： android android-cardview android-gridlayout

【解决方案1】：

我在尝试对齐 GridLayout 子项时遇到了同样的问题（尤其是在使用 CardView 时）。我通过为每个孩子设置以下属性来解决它：

android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"

例如：

<GridLayout
    android:id="@+id/grLayout_HelloWorld"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:columnCount="2"
    android:rowCount="1"
    android:useDefaultMargins="true">

    <androidx.cardview.widget.CardView
        android:id="@+id/crdView_simple_Card00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        app:cardBackgroundColor="@color/color_lime_shade1">

        <TextView
            android:id="@+id/txtView_TestCard00"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="My First Card" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/crdView_simple_Card01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        app:cardBackgroundColor="@color/color_lime_shade1">

        <TextView
            android:id="@+id/txtView_TestCard01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="My Second Card" />
    </androidx.cardview.widget.CardView>
</GridLayout>

你会注意到我没有使用rowWeight 属性。

免责声明：

说实话，我不知道为什么会这样......我只知道它困扰了我一段时间，我在 Google 和 StackOverflow 上花了很多时间，直到我发现一些信息说 fill_horizontal可能是解决方案......然后我只是从那里开始，尝试不同的布局属性，直到我也找到columnWeight。

希望这会有所帮助...如果它适合您，请告诉我。

祝你好运，兄弟（或姐妹）✊

【讨论】：