Приложениям часто необходимо отображать данные в контейнерах с одинаковым стилем, например в контейнерах, содержащих информацию об элементах списка. Система предоставляет API CardView
, позволяющий отображать информацию в карточках , которые имеют единообразный вид на всей платформе. Например, карточки имеют высоту по умолчанию над содержащей их группой представлений, поэтому система рисует тени под ними. Карточки позволяют содержать группу представлений, обеспечивая при этом единообразный стиль контейнера.
Добавьте зависимости
Виджет CardView
является частью AndroidX . Чтобы использовать его в своем проекте, добавьте следующую зависимость в файл build.gradle
вашего модуля приложения:
Groovy
dependencies { implementation "androidx.cardview:cardview:1.0.0" }
Kotlin
dependencies { implementation("androidx.cardview:cardview:1.0.0") }
Создание карточек
Чтобы использовать CardView
, добавьте его в файл макета. Используйте его как группу представлений, чтобы содержать другие представления. В следующем примере CardView
содержит ImageView
и несколько TextViews
для отображения некоторой информации пользователю:
<?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>
Предыдущий фрагмент кода создает нечто похожее на следующее, при условии, что вы используете то же изображение логотипа Android:
![Изображение, показывающее одну карту](https://developer.android.com/static/images/cards/card_basic_example.png?authuser=9&hl=ru)
Карточка в этом примере отображается на экране с высотой по умолчанию, в результате чего система рисует под ней тень. Вы можете предоставить пользовательское повышение уровня карты с помощью атрибута card_view:cardElevation
. Карта на более высоком уровне имеет более выраженную тень, а карта на более низком уровне имеет более светлую тень. CardView
использует реальную высоту и динамические тени на Android 5.0 (уровень API 21) и выше.
Используйте эти свойства, чтобы настроить внешний вид виджета CardView
:
- Чтобы установить радиус угла в макетах, используйте атрибут
card_view:cardCornerRadius
. - Чтобы установить угловой радиус в вашем коде, используйте метод
CardView.setRadius
. - Чтобы установить цвет фона карточки, используйте атрибут
card_view:cardBackgroundColor
.