Créer une fiche en tant que conteneur

Le composable Card se comporte comme un conteneur Material Design pour votre interface utilisateur. Les cartes présentent un seul élément de contenu cohérent, par exemple:

  • Un produit dans une application d'achat
  • Un reportage dans une application d'actualités
  • Un message dans une application de communication

Ce qui différencie Card des autres conteneurs est le fait qu'il ne présente qu'un seul élément de contenu. Par exemple, Scaffold fournit une structure générale pour un écran entier. Une carte est un élément d'interface utilisateur plus petit à l'intérieur d'une mise en page conséquente, tandis qu'un composant de mise en page comme Column ou Row offre une API plus simple et plus générique.

Cette section vous explique comment implémenter quatre types de cartes:

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Créer une fiche de base

Card se comporte comme les autres conteneurs dans Compose. Vous déclarez son contenu en appelant d'autres composables dans ce conteneur. Par exemple, observez comment Card contient un appel à Text dans le court exemple suivant :

Créer une fiche remplie

La clé ici est d'utiliser la propriété colors afin de changer la couleur de remplissage:

Résultats

Une carte est remplie avec la couleur de la variante de la surface du thème Material.
Figure 1. Exemple d'une carte pleine.

Créer une fiche surélevée

L'extrait de code suivant montre comment implémenter une carte surélevée. Utilisez le composable ElevatedCard prévu à cet effet.

Vous pouvez utiliser la propriété elevation afin de contrôler l'apparence de l'élévation et de l'ombre correspondante.

Résultats

Une carte est surélevée par rapport à l'arrière-plan de l'application, avec une ombre.
Figure 2. Exemple d'une carte surélevée.

Créer une fiche avec un contour

Voici un exemple d'une carte avec contours. Utilisez le composable OutlinedCard prévu à cet effet.

Résultats

Une carte est entourée d'une fine bordure noire.
Figure 3. Exemple d'une carte avec contours.

Points essentiels

Consultez la documentation de référence pour la définition de l'API de Card. Elle définit plusieurs paramètres que vous pouvez utiliser pour personnaliser l'apparence et le comportement du composant.

Voici quelques paramètres clés:

  • elevation: ajoute une ombre au composant, le faisant apparaître comme surélevé par rapport à l'arrière-plan.
  • colors : utilise le type CardColors pour définir la couleur par défaut du conteneur et des enfants.
  • enabled : si ce paramètre indique false, la carte apparaît comme désactivée et ne répond pas aux entrées utilisateurs.
  • onClick : en général, une Card n'accepte pas les événements de clic. Ainsi, la première surcharge à noter est celle qui définit un paramètre onClick. Utilisez cette surcharge lorsque vous souhaitez que votre implémentation de Card réponde aux clics de l'utilisateur.

Les cartes ne sont pas dotées d'actions "faire défiler" et "ignorer" inhérentes, mais elles peuvent être intégrées à des composables offrant ces fonctionnalités. Par exemple, pour implémenter la fonctionnalité "balayer pour ignorer" sur une carte, intégrez-la avec le composable SwipeToDismiss. Pour l'intégrer avec le défilement, utilisez des modificateurs de défilement comme verticalScroll. Pour en savoir plus, consultez la documentation sur Scroll.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires