แอปมักต้องแสดงข้อมูลในคอนเทนเนอร์ที่มีรูปแบบคล้ายกัน เช่น
ที่เก็บข้อมูลเกี่ยวกับรายการต่างๆ ในรายการ ระบบจะมอบ
CardView
API ให้คุณ
แสดงข้อมูลในการ์ดที่มีรูปลักษณ์สอดคล้องกันทั่วทั้งแพลตฟอร์ม สำหรับ
เช่น การ์ดมีระดับความสูงเริ่มต้นอยู่เหนือกลุ่มมุมมองที่มี
ระบบจะวาดเงาไว้ด้านล่าง การ์ดจะช่วยให้คุณมีกลุ่มของ
ในขณะที่ให้รูปแบบที่สอดคล้องกันสำหรับคอนเทนเนอร์
เพิ่มทรัพยากร 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 ภาพเดียวกัน:
![รูปภาพแสดงการ์ดเดียว](https://developer.android.google.cn/static/images/cards/card_basic_example.png?authuser=0000&hl=th)
การ์ดในตัวอย่างนี้จะถูกวาดไปยังหน้าจอด้วยระดับความสูงเริ่มต้น
จะทำให้ระบบวาดเงาไว้ใต้ คุณระบุระดับความสูงที่กำหนดเองได้
สำหรับการ์ดที่มีแอตทริบิวต์ card_view:cardElevation
ไพ่ที่ราคาสูงกว่า
ระดับความสูงจะมีเงาที่เด่นชัดกว่า และการ์ดที่ระดับความสูงต่ำกว่าจะมีแสงเงา
เงาที่สว่างขึ้น CardView
ใช้ระดับความสูงจริงและเงาแบบไดนามิกใน Android
5.0 (API ระดับ 21) ขึ้นไป
ใช้คุณสมบัติต่อไปนี้เพื่อปรับแต่งรูปลักษณ์ของวิดเจ็ต CardView
- หากต้องการตั้งค่ารัศมีของมุมในเลย์เอาต์ ให้ใช้
card_view:cardCornerRadius
- หากต้องการตั้งค่ารัศมีของมุมในโค้ด ให้ใช้เมธอด
CardView.setRadius
- หากต้องการกำหนดสีพื้นหลังของการ์ด ให้ใช้
card_view:cardBackgroundColor