สร้างการออกแบบแบบการ์ด

ลองใช้วิธีการเขียน

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีทำงานกับเลย์เอาต์ในเครื่องมือเขียน

การ์ดในสื่อการเรียนการสอนของชั้นเรียน 3 →

หมายเหตุ: ดูการ์ดดีไซน์ Material

เพื่อประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้น

แอปมักต้องแสดงข้อมูลในคอนเทนเนอร์ที่มีรูปแบบคล้ายกัน เช่น ที่เก็บข้อมูลเกี่ยวกับรายการต่างๆ ในรายการ ระบบมี CardView API ให้คุณแสดงข้อมูลในการ์ดที่มีรูปลักษณ์ที่สอดคล้องกันทั่วทั้งแพลตฟอร์ม เช่น การ์ดมีการยกระดับเริ่มต้นเหนือกลุ่มมุมมองที่บรรจุไว้ ระบบจึงวาดเงาไว้ด้านล่าง การ์ดเป็นวิธีเก็บกลุ่มมุมมองไว้ด้วยกัน พร้อมทั้งกำหนดสไตล์ที่สอดคล้องกันสำหรับคอนเทนเนอร์

รูปที่ 1 UI ของแอปที่อิงตามการ์ด

เพิ่มการพึ่งพา

วิดเจ็ต CardView เป็นส่วนหนึ่งของ AndroidX หากต้องการใช้ในโปรเจ็กต์ ให้เพิ่ม Dependency ต่อไปนี้ลงในไฟล์ build.gradle ของโมดูลแอป

ดึงดูด

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.cardview:cardview:1.0.0")
}

สร้างการ์ด

หากต้องการใช้ CardView ให้เพิ่มลงในไฟล์เลย์เอาต์ ใช้เป็นกลุ่มมุมมองเพื่อบรรจุมุมมองอื่นๆ ในตัวอย่างต่อไปนี้ CardView มีแอตทริบิวต์ ImageViewและTextViewsอีก 2-3 รายการที่จะแสดงข้อมูลบางอย่างแก่ผู้ใช้ ดังนี้

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:background="#E0F7FA"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:padding="4dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@drawable/logo"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/title"
                style="@style/TextAppearance.MaterialComponents.Headline3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a title"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/header_image" />

            <TextView
                android:id="@+id/subhead"
                style="@style/TextAppearance.MaterialComponents.Subtitle2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a subhead"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/title" />

            <TextView
                android:id="@+id/body"
                style="@style/TextAppearance.MaterialComponents.Body1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a supporting text. Very Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/subhead" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

ข้อมูลโค้ดก่อนหน้านี้สร้างบางอย่างที่คล้ายกับตัวอย่างต่อไปนี้ โดยสมมติว่า คุณใช้ภาพโลโก้ Android ภาพเดียวกัน:

รูปที่ 2 ตัวอย่างพื้นฐานของเลย์เอาต์แบบ CardView

การ์ดในตัวอย่างนี้จะถูกวาดไปยังหน้าจอด้วยระดับความสูงเริ่มต้น จะทำให้ระบบวาดเงาไว้ใต้ คุณสามารถระบุระดับความสูงที่กำหนดเองสำหรับการ์ดที่มีแอตทริบิวต์ card_view:cardElevation การ์ดที่ระดับความสูงสูงกว่าจะมีเงาที่ชัดเจนกว่า ส่วนการ์ดที่ระดับความสูงต่ำกว่าจะมีเงาที่เบากว่า CardView ใช้ระดับความสูงจริงและแสงเงาแบบไดนามิกใน Android 5.0 (API ระดับ 21) ขึ้นไป

ใช้พร็อพเพอร์ตี้ต่อไปนี้เพื่อปรับแต่งลักษณะที่ปรากฏของวิดเจ็ต CardView

• หากต้องการตั้งค่ารัศมีของมุมในเลย์เอาต์ ให้ใช้ card_view:cardCornerRadius
• หากต้องการตั้งค่ารัศมีของมุมในโค้ด ให้ใช้เมธอด CardView.setRadius
• หากต้องการกำหนดสีพื้นหลังของการ์ด ให้ใช้แอตทริบิวต์ card_view:cardBackgroundColor