Aplikacje często muszą wyświetlać dane w kontenerach o podobnym stylu, takich jak kontenery zawierające informacje o elementach listy. System udostępnia interfejs API CardView
, który umożliwia wyświetlanie informacji na kartach, które zapewniają spójny wygląd na całej platformie. Na przykład karty mają domyślną wysokość nad swoją grupą widoków, na której się znajdują, dlatego system rysuje pod nimi cienie. Karty umożliwiają umieszczenie grupy widoków danych przy zachowaniu spójnego stylu kontenera.
Dodaj zależności
Widżet CardView
jest częścią systemu AndroidX. Aby użyć go w projekcie, dodaj tę zależność do pliku build.gradle
modułu aplikacji:
Odlotowy
dependencies { implementation "androidx.cardview:cardview:1.0.0" }
Kotlin
dependencies { implementation("androidx.cardview:cardview:1.0.0") }
Tworzenie kart
Aby użyć elementu CardView
, dodaj go do pliku układu. Używaj go jako grupy widoków,
aby zawierać inne widoki. W tym przykładzie CardView
zawiera elementy ImageView
i kilka właściwości TextViews
, które wyświetlają użytkownikowi informacje:
<?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>
Poprzedni fragment kodu tworzy kod podobny do tego poniżej, przy założeniu, że użyjesz tego samego obrazu logo Androida:
Karta w tym przykładzie jest rysowana na ekranie z domyślną wysokością, co powoduje, że system rzuca pod nią cień. Możesz określić niestandardową wysokość karty za pomocą atrybutu card_view:cardElevation
. Karty znajdujące się wyżej mają wyraźniejszy cień, a te na niższych – jaśniejszy. CardView
korzysta z rzeczywistej wysokości i dynamicznych cieni na Androidzie 5.0 (poziom API 21) i nowszych.
Aby dostosować wygląd widżetu CardView
, użyj tych właściwości:
- Aby ustawić promień narożników w układach, użyj atrybutu
card_view:cardCornerRadius
. - Aby ustawić promień narożnika w kodzie, użyj metody
CardView.setRadius
. - Aby ustawić kolor tła karty, użyj atrybutu
card_view:cardBackgroundColor
.