如何制作一個中心有一個圖標的卡片視圖，下面有文字？

Question

我想制作 2 行 3 列的卡片視圖，其下方有文本（不在卡片視圖內）和卡片視圖中心的圖像。

Answer 1

為此，您必須使用GridLayout和CardView 。 首先我們使用RelativeLayout並使其重力horizontal_center中心，這樣我們所有的元素都在中心。

<RelativeLayout 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:gravity="center_horizontal">

然后我們使用GridLayout來制作類似網格的結構。

<GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rowCount="2"
        android:columnCount="3">

您可以根據需要更改行和列。 然后我們使用LinearLayout來垂直制作cardview和textView 。

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

然后我們只需在此布局中添加我們的Cardview和TextView ，如下所示：-

<androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:cardElevation="10dp"
                app:cardBackgroundColor="@color/white"
                app:cardMaxElevation="12dp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/ic_launcher_background"/>
            </androidx.cardview.widget.CardView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Hello"
                />

以下是完整代碼：-

<RelativeLayout 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:gravity="center_horizontal">

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rowCount="2"
        android:columnCount="3"
        >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:cardElevation="10dp"
                app:cardBackgroundColor="@color/white"
                app:cardMaxElevation="12dp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/ic_launcher_background"/>
            </androidx.cardview.widget.CardView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Hello"
                />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:cardElevation="10dp"
                app:cardBackgroundColor="@color/white"
                app:cardMaxElevation="12dp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/ic_launcher_background"/>
            </androidx.cardview.widget.CardView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Hello"
                />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:cardElevation="10dp"
                app:cardBackgroundColor="@color/white"
                app:cardMaxElevation="12dp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/ic_launcher_background"/>
            </androidx.cardview.widget.CardView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Hello"
                />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:cardElevation="10dp"
                app:cardBackgroundColor="@color/white"
                app:cardMaxElevation="12dp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/ic_launcher_background"/>
            </androidx.cardview.widget.CardView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Hello"
                />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:cardElevation="10dp"
                app:cardBackgroundColor="@color/white"
                app:cardMaxElevation="12dp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/ic_launcher_background"/>
            </androidx.cardview.widget.CardView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Hello"
                />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:cardElevation="10dp"
                app:cardBackgroundColor="@color/white"
                app:cardMaxElevation="12dp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/ic_launcher_background"/>
            </androidx.cardview.widget.CardView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Hello"
                />
        </LinearLayout>

    </GridLayout>

</RelativeLayout>

Answer 2

嘗試這個

只需復制並粘貼您的 xml 布局

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3"
        android:layout_margin="10dp"
        >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            >
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:cardCornerRadius="10dp"
                android:layout_margin="10dp"
                app:cardElevation="10dp"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_launcher_background"
                    />
            </androidx.cardview.widget.CardView>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="dummy"
                android:gravity="center"
                />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            >
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:cardCornerRadius="10dp"
                android:layout_margin="10dp"
                app:cardElevation="10dp"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_launcher_background"
                    />
            </androidx.cardview.widget.CardView>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="dummy"
                android:gravity="center"
                />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            >
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:cardCornerRadius="10dp"
                android:layout_margin="10dp"
                app:cardElevation="10dp"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_launcher_background"
                    />
            </androidx.cardview.widget.CardView>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="dummy"
                android:gravity="center"
                />

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3"
        android:layout_margin="10dp"
        >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            >
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:cardCornerRadius="10dp"
                android:layout_margin="10dp"
                app:cardElevation="10dp"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_launcher_background"
                    />
            </androidx.cardview.widget.CardView>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="dummy"
                android:gravity="center"
                />

        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            >
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:cardCornerRadius="10dp"
                android:layout_margin="10dp"
                app:cardElevation="10dp"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_launcher_background"
                    />
            </androidx.cardview.widget.CardView>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="dummy"
                android:gravity="center"
                />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            >
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:cardCornerRadius="10dp"
                android:layout_margin="10dp"
                app:cardElevation="10dp"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_launcher_background"
                    />
            </androidx.cardview.widget.CardView>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="dummy"
                android:gravity="center"
                />

        </LinearLayout>

    </LinearLayout>
    
</LinearLayout>

Answer 3

我對android還很陌生，但在我的一個項目中發現了一個類似的問題：

就個人而言，我總是使用“Recycler View”組件和卡片視圖。 為此，您必須創建兩個（或三個）XML 文件（Recycler View 本身和一個卡片）和一個自定義 RecyclerViewAdapter（例如 onClick 操作）（如果您想要一個可點擊的卡片視圖，則需要一種片段，然后會以更詳細的視圖打開此特定卡片。但您實際上不必這樣做。因此您也可以使用兩個 XML 文件）。

首先，卡片視圖本身：要讓卡片視圖在“里面”有一個圖像，在“下面”有一個文本，你必須在 xml 中簡單地設置它的樣式。 為此，您可以使用“</androidx.cardview.widget.CardView>”中的“”。 只需按照您喜歡的樣式設置它。 你也許可以用這樣的結構來完成一些事情：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView>
        
        <LinearLayout>

                <LinearLayout >
                        
                        <ImageView />
                        
                </LinearLayout>

                <TextView />

        </LinearLayout>

</androidx.cardview.widget.CardView>

然后，RecyclerView 組件：

這個組件相當簡單：您只需將“<androidx.recyclerview.widget.RecyclerView”放在您想要的位置。 給它一個 ID，然后你可以開始下一部分：

RecyclerViewAdapter：

創建一個實現“RecyclerView.Adapter”的類（對不起，如果我對“實現”有誤。我對 kotlin 很陌生 :)”。

class RecyclerViewAdapter(private val context: Context?, remindersIn: List<Reminder>) :
    RecyclerView.Adapter<ReminderViewHolder>() {
    
    private val reminders: List<Reminder> = remindersIn
    private val inflater: LayoutInflater = LayoutInflater.from(context)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ReminderViewHolder {

        val recyclerViewItem: View = inflater
            .inflate(R.layout.item_recyclerview_layout, parent, false)

        recyclerViewItem.setOnClickListener {
            v -> onClick(parent as RecyclerView, v, context)
        }

        return ReminderViewHolder(recyclerViewItem)
    }

    override fun onBindViewHolder(holder: ReminderViewHolder, position: Int) {
        val reminder: Reminder = reminders[position]

        holder.descriptionView.text = reminder.description
    }

    override fun getItemCount(): Int {
        return reminders.size
    }

    private fun onClick(recyclerView: RecyclerView, itemView: View, context: Context?) {
        val itemPos = recyclerView.getChildLayoutPosition(itemView)

        findNavController(itemView).navigate(RemindersFragmentDirections.actionRemindersToPopup(itemPos))
    }
}

（附加說明：如果您計划使用任何形式的 onClick 事件，我強烈建議使用“NavArgs”。使用 NavArgs，您可以將信息以參數形式從片段發送到另一個片段）。

最后但並非最不重要的一點是 onClick 元素的 Fragment，如果您打算實現它。 這就像普通的 Fragment 一樣工作，並通過 NavArgs 獲取它的數據。

如果您對我的回答有任何問題或任何反饋，我很樂意聽到。 然后我會改進我的答案。

干杯

Answer 4

只需將 CardView 和 TextView 包裝在 Vertical LinearLayout 中。 您可以創建布局文件並根據您的要求重用它