Aplikacje często muszą wyświetlać dane w kontenerach o podobnym stylu, takich jak
kontenery z informacjami o elementach na liście. System zapewnia
interfejsu API CardView
,
wyświetlają informacje na kartach, które są spójne na całej platformie. Dla:
kart mają domyślną wysokość nad grupą, na której ją znajdują, więc
system rysuje pod nimi cienie. Karty umożliwiają podzielenie grupy
przy zachowaniu spójnego stylu kontenera.
Dodaj zależności
Widżet CardView
jest częścią AndroidaX. Do użytku w
w projekcie, dodaj następującą zależność do parametru build.gradle
modułu aplikacji
plik:
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. Użyj jej jako grupy widoków, aby:
zawierać inne widoki. W poniższym przykładzie CardView
zawiera element
ImageView
i kilka TextViews
, aby 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>
Poprzedni fragment kodu generuje coś podobnego do poniższego, przy założeniu, Użyj tego samego obrazu logo Androida:
![Obraz przedstawiający jedną kartę](https://developer.android.google.cn/static/images/cards/card_basic_example.png?authuser=9&hl=pl)
W tym przykładzie karta jest rysowana na ekranie z domyślną wysokością, która
powoduje, że system rysuje pod nim cień. Możesz podać niestandardową wysokość,
dla karty z atrybutem card_view:cardElevation
. Kartę o wyższej wartości
na wysokości jest bardziej wyraźnie widoczny cień, a karta na niższej
jaśniejszy cień. Aplikacja CardView
korzysta z rzeczywistej wysokości i dynamicznych cieni na Androidzie
5.0 (poziom interfejsu API 21) lub nowszy.
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 funkcji
card_view:cardCornerRadius
. . - Aby ustawić promień narożnika w kodzie, użyj metody
CardView.setRadius
. - Aby ustawić kolor tła karty, użyj opcji
card_view:cardBackgroundColor
.