Créer une mise en page basée sur des cartes

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser les mises en page dans Compose.

Les applications doivent souvent afficher les données dans des conteneurs au style similaire, tels que des conteneurs qui contiennent des informations sur les éléments d'une liste. Le système fournit l'API CardView pour vous permettre d'afficher des informations dans des fiches ayant un aspect cohérent sur la plate-forme. Par exemple, les cartes ont une élévation par défaut supérieure au groupe de vues parent. Le système dessine donc des ombres en dessous. Les fiches permettent de contenir un groupe de vues tout en offrant un style cohérent au conteneur.

Image montrant un aperçu de l'interface utilisateur d'une application basée sur des cartes
Image 1. UI d'application basée sur des cartes

Ajouter les dépendances

Le widget CardView fait partie d'AndroidX. Pour l'utiliser dans votre projet, ajoutez la dépendance suivante au fichier build.gradle de votre module d'application:

Groovy

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.cardview:cardview:1.0.0")
}

Créer des fiches

Pour utiliser un élément CardView, ajoutez-le à votre fichier de mise en page. Utilisez-le comme groupe de vues pour contenir d'autres vues. Dans l'exemple suivant, CardView contient une ImageView et quelques TextViews pour présenter certaines informations à l'utilisateur:

<?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>

L'extrait de code précédent produit un résultat semblable au suivant, en supposant que vous utilisez la même image de logo Android:

Image d&#39;une seule fiche
Figure 2 : Exemple de base de mise en page basée sur CardView.

Dans cet exemple, la carte est dessinée à l'écran avec une élévation par défaut, ce qui oblige le système à dessiner une ombre en dessous. Vous pouvez fournir une élévation personnalisée pour une carte avec l'attribut card_view:cardElevation. Une carte à une élévation plus élevée a une ombre plus prononcée, tandis qu'une carte à une élévation plus faible a une ombre plus claire. CardView utilise l'élévation réelle et les ombres dynamiques sur Android 5.0 (niveau d'API 21) ou version ultérieure.

Utilisez ces propriétés pour personnaliser l'apparence du widget CardView:

  • Pour définir l'arrondi d'angle dans vos mises en page, utilisez l'attribut card_view:cardCornerRadius.
  • Pour définir l'arrondi d'angle dans votre code, utilisez la méthode CardView.setRadius.
  • Pour définir la couleur d'arrière-plan d'une carte, utilisez l'attribut card_view:cardBackgroundColor.