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

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

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

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

หมายเหตุ: เพื่อประสบการณ์ของผู้ใช้ที่ดีขึ้น โปรดดูหัวข้อ การ์ดดีไซน์ Material

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

วันที่

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

เพิ่มทรัพยากร Dependency

วิดเจ็ต 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