Tạo bố cục dựa trên thẻ

Thường thì ứng dụng phải cho thấy dữ liệu trong các vùng chứa được định kiểu như nhau. Các vùng chứa này thường được dùng trong các danh sách để chứa thông tin của từng mục. Hệ thống này cung cấp CardView API như một cách dễ dàng để bạn cho thấy thông tin bên trong các thẻ có giao diện nhất quán trên nền tảng. Các thẻ (card) này có độ cao mặc định lớn hơn nhóm thành phần hiển thị chứa chúng, vì vậy, hệ thống sẽ vẽ bóng đổ bên dưới. Thẻ cho phép bạn dễ dàng chứa một nhóm thành phần hiển thị trong khi vẫn cung cấp một kiểu nhất quán cho vùng chứa đó.

Hình 1. Ví dụ về thẻ

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, bạn cần thêm thẻ này vào tệp bố cục. Sử dụng thẻ này làm nhóm thành phần hiển thị chứa cả các thành phần hiển thị khác. Trong ví dụ sau, CardView chứa một TextView để hiển thị một số thông tin cho người dùng:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <androidx.cardview.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

Các thẻ đượ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. Thao tác này sẽ vẽ một bóng đổ rõ ràng hơn cho mức nâng cao hơn, đồng thời độ cao thấp hơn có bóng đổ nhạt 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, đồng thời quay lại phương thức triển khai bóng đổ có lập trình trên các phiên bản trước.

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.