Android 带有网格布局的 Cardview 固定大小

Question

我想要一个固定大小的 Cardview，其中包含一个图像和一些 TextView。这是 XML：

<?xml version="1.0" encoding="utf-8"?>


<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"

tools:context=".ProductListFragment">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Outlet : Head Office"
        android:textSize="18sp"
        android:layout_marginTop="24dp"
        android:layout_marginStart="32dp"/>

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:hint="  Find Product"
        app:helperTextEnabled="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/search_icon"
            android:drawableLeft="@drawable/search_icon" />

    </com.google.android.material.textfield.TextInputLayout>


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        >

        <GridLayout
            android:paddingLeft="18dp"
            android:paddingRight="18dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:alignmentMode="alignMargins"
            android:columnCount="2"
            android:columnOrderPreserved="false"
            android:rowCount="2"

            >

            <com.google.android.material.card.MaterialCardView
                style="@style/CardView"
                android:id="@+id/sampleProductCard"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_rowWeight="1"
                android:layout_columnWeight="1"
                android:layout_margin="12dp"
                app:cardCornerRadius="12dp"
                app:cardElevation="6dp">

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

                    <ImageView
                        android:layout_width="80dp" //This is what i change from 80 dp to match parent
                        android:layout_height="80dp"
                        android:src="@drawable/you_win"
                        />


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:layout_marginLeft="12dp"
                        android:layout_marginRight="12dp"
                        >

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="Apple Pie"
                            android:textColor="#6f6f6f"
                            android:textSize="14sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="Rp. 40000"
                            android:textColor="#6f6f6f"
                            android:textSize="12sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="Stock : 4"
                            android:textColor="#000"
                            android:textSize="10sp"
                            />
                    </LinearLayout>



                </LinearLayout>

            </com.google.android.material.card.MaterialCardView>

            <com.google.android.material.card.MaterialCardView
                style="@style/CardView"
                android:id="@+id/sampleProductCard2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_rowWeight="1"
                android:layout_columnWeight="1"
                android:layout_margin="12dp"
                app:cardCornerRadius="12dp"
                app:cardElevation="6dp">

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

                    android:paddingBottom="8dp"
                    >

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:layout_marginLeft="12dp"
                        android:layout_marginRight="12dp"
                        >

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="Apple Pie"
                            android:textColor="#6f6f6f"
                            android:textSize="14sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="Rp. 40000"
                            android:textColor="#6f6f6f"
                            android:textSize="12sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="Stock : 4"
                            android:textColor="#000"
                            android:textSize="10sp"
                            />
                    </LinearLayout>

                </LinearLayout>

            </com.google.android.material.card.MaterialCardView>

        </GridLayout>
    </ScrollView>

</LinearLayout>


</layout>

它将产生结果：

我想要的是图像与CardView 的宽度相同。但是当我将图像宽度更改为 match_parent 时，结果是：

我错过了什么吗？如果还有什么想知道的，尽管告诉我。

编辑：我试图让每张卡片都像 this。

Answer 1

尝试实施-->

1.Add 依赖于 Gradle:

    implementation 'com.google.android.material:material:1.0.0'

2.Change 您的代码：

<?xml version="1.0" encoding="utf-8"?>


<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"

tools:context=".ProductListFragment">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Outlet : Head Office"
        android:textSize="18sp"
        android:layout_marginTop="24dp"
        android:layout_marginStart="32dp"/>

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:hint="  Find Product"
        app:helperTextEnabled="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/search_icon"
            android:drawableLeft="@drawable/search_icon" />

    </com.google.android.material.textfield.TextInputLayout>


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        >

        <GridLayout
            android:paddingLeft="18dp"
            android:paddingRight="18dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:alignmentMode="alignMargins"
            android:columnCount="2"
            android:columnOrderPreserved="false"
            android:rowCount="2"

            >

            <com.google.android.material.card.MaterialCardView
                style="@style/CardView"
                android:id="@+id/sampleProductCard"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_rowWeight="1"
                android:layout_columnWeight="1"
                android:layout_margin="12dp"
                app:cardCornerRadius="12dp"
                app:cardElevation="6dp">

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

                    <ImageView
                        android:layout_width="match_parent"
                    android:layout_height="match_parent"
                        android:scaleType="fitXY"
                    android:src="@drawable/ic_launcher_background"
                    />


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:layout_marginLeft="12dp"
                        android:layout_marginRight="12dp"
                        >

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="Apple Pie"
                            android:textColor="#6f6f6f"
                            android:textSize="14sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="Rp. 40000"
                            android:textColor="#6f6f6f"
                            android:textSize="12sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="Stock : 4"
                            android:textColor="#000"
                            android:textSize="10sp"
                            />
                    </LinearLayout>



                </LinearLayout>

            </com.google.android.material.card.MaterialCardView>

            <com.google.android.material.card.MaterialCardView
                style="@style/CardView"
                android:id="@+id/sampleProductCard2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_rowWeight="1"
                android:layout_columnWeight="1"
                android:layout_margin="12dp"
                app:cardCornerRadius="12dp"
                app:cardElevation="6dp">

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

                    android:paddingBottom="8dp"
                    >

                    <ImageView
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/you_win"
 android:scaleType="fitXY />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:layout_marginLeft="12dp"
                        android:layout_marginRight="12dp"
                        >

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="Apple Pie"
                            android:textColor="#6f6f6f"
                            android:textSize="14sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="Rp. 40000"
                            android:textColor="#6f6f6f"
                            android:textSize="12sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="Stock : 4"
                            android:textColor="#000"
                            android:textSize="10sp"
                            />
                    </LinearLayout>

                </LinearLayout>

            </com.google.android.material.card.MaterialCardView>

        </GridLayout>
    </ScrollView>

</LinearLayout>

截图如下：

Android 带有网格布局的 Cardview 固定大小

Android Cardview Fixed Size with Gridlayout

android

android-layout

kotlin

android-cardview