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

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

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

การ์ดในเนื้อหา 3 →

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

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

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

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

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

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

Groovy

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