Các ứng dụng thường cần hiển thị dữ liệu trong những vùng chứa có kiểu tương tự, chẳng hạn như
vùng chứa lưu giữ thông tin về các mục trong danh sách. Hệ thống cung cấp
CardView
API để bạn
hiển thị thông tin trong thẻ có thông tin nhất quán trên toàn bộ nền tảng. Cho
Ví dụ: các thẻ có độ cao mặc định lớn hơn nhóm chế độ xem chứa thẻ, vì vậy
hệ thống sẽ vẽ bóng đổ bên dưới chúng. Thẻ cung cấp cách để chứa một nhóm
trong khi vẫn cung cấp kiểu nhất quán cho vùng chứa.
Thêm phần phụ thuộc
Tiện ích CardView
là một phần của AndroidX. Để sử dụng thành phần này trong dự án, hãy thêm phần phụ thuộc sau đây vào tệp build.gradle
của mô-đun ứng dụng:
Groovy
dependencies { implementation "androidx.cardview:cardview:1.0.0" }
Kotlin
dependencies { implementation("androidx.cardview:cardview:1.0.0") }
Tạo thẻ
Để sử dụng CardView
, hãy thêm nó vào tệp bố cục. Dùng nhóm này làm nhóm chế độ xem để
chứa các khung hiển thị khác. Trong ví dụ sau, CardView
chứa một
ImageView
và một số TextViews
để hiển thị một số thông tin cho người dùng:
<?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>
Đoạn mã trước tạo ra kết quả tương tự như sau, giả sử bạn sử dụng cùng một hình ảnh biểu trưng Android:
![Hình ảnh cho thấy một thẻ duy nhất](https://developer.android.google.cn/static/images/cards/card_basic_example.png?authuser=19&hl=vi)
Thẻ trong ví dụ này được vẽ lên màn hình với độ cao mặc định.
khiến hệ thống vẽ bóng đổ bên dưới. Bạn có thể cung cấp độ cao tuỳ chỉnh
cho thẻ có thuộc tính card_view:cardElevation
. Thẻ ở mức cao hơn
độ cao có bóng rõ ràng hơn và thẻ ở độ cao thấp hơn có
bóng sáng hơn. CardView
sử dụng độ cao thực và bóng đổ động trên Android
5.0 (API cấp 21) trở lên.
Sử dụng các thuộc tính sau đây để tuỳ chỉnh giao diện của tiện ích CardView
:
- Để đặt bán kính góc trong bố cục, hãy sử dụng thuộc tính
card_view:cardCornerRadius
. - Để đặt bán kính góc trong mã, hãy sử dụng phương thức
CardView.setRadius
. - Để đặt màu nền của thẻ, hãy sử dụng thuộc tính
card_view:cardBackgroundColor
.