android - GridLayout 内的 CardView 离开屏幕

标签 android android-cardview android-gridlayout

我正在使用其中包含 CardView 的 GridLayout 来显示一组对象,供用户单击并用于在应用程序中导航。

在我正在测试的平板电脑上,一切似乎都很好,但是当我将 APK 发送给 friend 时,2/3 的内容从屏幕上跑掉了,而且似乎无法正常工作。

示例截图:

preview

此处的“游戏”部分似乎运行良好。由于找不到任何错误,我将此部分复制并粘贴到“社区”部分,并重新命名了图标,以便除了一些字符串外代码完全相同。

我不明白为什么一个部分有效而其他部分无效。

布局.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>```

最佳答案

我在尝试对齐我的 GridLayout 子级时遇到了同样的问题(尤其是在使用 CardView 时)。我通过为每个 child 设置以下属性解决了这个问题:

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 属性。

免责声明:

老实说,我不知道为什么这行得通......我所知道的是它困扰了我一段时间,我花了很多时间在谷歌和 StackOverflow 上,直到我发现一些信息说 fill_horizo​​ntal 可能是解决方案...然后我只是从那里破解我的方式,尝试不同的布局属性,直到我也找到 columnWeight

希望这对您有所帮助...让我知道它是否适合您。

祝你好运,兄弟(或姐妹)✊

关于android - GridLayout 内的 CardView 离开屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57395802/

相关文章:

java - 如何处理公共(public)抽象 boolean 响应

Android如何从特定图像设置动态背景颜色

android - RecyclerView Android 中的 CardView 中的 ViewPager

android - CardView 内的 ExpandableListView 不会改变其父级高度

android - 为什么 gridlayout 中的多行按钮有奇怪的上边距?

Android - 任何大小文本的等宽布局

android - 我希望我的代码在将图像保存到 android 之前使用搜索栏调整图像大小。我怎样才能做到这一点?

Android Studio Gradle : Please remove usages of `jcenter()` Maven repository from your build scripts/JCenter is at end of life

android - 在 flutter 中创建 Application.kt 的最佳方法是什么

java - 使用网格布局将不同长度的垂直 TextView 与相同的右边缘对齐