Aplikacje często muszą wyświetlać dane w kontenerach o podobnym stylu, takich jak kontenery z informacjami o elementach na liście. System udostępnia interfejs API CardView
, który umożliwia wyświetlanie informacji na kartach, które wyglądają w spójny sposób na całej platformie. Na przykład karty mają domyślną wysokość nad ich grupą widoków, więc system rysuje pod nimi cienie. Karty pozwalają na grupowanie widoków, zachowując przy tym spójny styl kontenera.
Dodaj zależności
Widżet CardView
jest częścią AndroidaX. 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") }
Utwórz karty
Aby użyć elementu CardView
, dodaj go do pliku układu. Może ona służyć jako grupa widoków
zawierająca inne widoki. W poniższym przykładzie pole CardView
zawiera elementy ImageView
i kilka TextViews
, które pozwalają wyświetlić użytkownikowi pewne 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>
Przy założeniu, że używasz tego samego obrazu logo Androida, poprzedni fragment kodu generuje podobny efekt jak poniżej:
![Obraz przedstawiający jedną kartę](https://developer.android.com/static/images/cards/card_basic_example.png?authuser=3&hl=pl)
Karta w tym przykładzie jest rysowana na ekranie z domyślną wysokością, przez co system rysuje pod nią cień. Za pomocą atrybutu card_view:cardElevation
możesz podać niestandardową wysokość karty. Na wyższej wysokości cień jest wyraźniejszy, a na niższej – jaśniejszy. Funkcja CardView
korzysta z rzeczywistej wysokości i dynamicznych cieni na Androidzie 5.0 (poziom interfejsu API 21) i nowszych.
Za pomocą tych właściwości możesz dostosować wygląd widżetu CardView
:
- Aby ustawić promień narożnika 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
.