Créer une mise en page basée sur une carte

Les applications ont souvent besoin d’afficher des données dans des conteneurs de style similaire. Ces conteneurs sont souvent utilisés dans les listes pour contenir les informations de chaque élément. Le système fournit l’APICardView comme un moyen facile pour vous d’afficher des informations à l’intérieur de cartes qui ont un aspect cohérent à travers la plate-forme. Ces cartes ont une élévation par défaut au-dessus du groupe de vues qui les contient, de sorte que le système dessine des ombres en dessous d’elles. Les cartes constituent un moyen facile de contenir un groupe de vues tout en fournissant un style cohérent pour le conteneur.

Figure 1. Exemples de 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 :

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

Créer des cartes

Pour utiliser le CardView, vous devez l’ajouter à votre layoutfile. Utilisez-le comme un groupe de vues pour contenir d’autres vues. Dans cet exemple, la CardView contient une seule TextViewpour afficher certaines informations à l’utilisateur.

Les cartes sont dessinées à l’écran avec une élévation par défaut, ce qui amène le système à dessiner une ombre en dessous d’elles. Vous pouvez fournir une élévation personnalisée pour une carte avec l’attributcard_view:cardElevation. Cela dessinera une ombre plus prononcée avec une élévation plus grande, et une élévation plus faible se traduira par une ombre plus légère.CardView utilise une élévation réelle et des ombres dynamiques sur Android 5.0(API niveau 21) et plus et retombe sur une implémentation d’ombre programmatique sur les versions antérieures.

Utilisez ces propriétés pour personnaliser l’apparence du widgetCardView :

  • Pour définir le rayon d’angle dans vos mises en page, utilisez l’attribut card_view:cardCornerRadius.
  • Pour définir le rayon d’angle dans votre code, utilisez la méthode CardView.setRadius.
  • Pour définir la couleur de fond d’une carte, utilisez l’attribut card_view:cardBackgroundColor.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.