Recherche…


Introduction

Un FrameLayout avec un fond d'angle arrondi et une ombre.

CardView utilise la propriété d'altitude sur Lollipop pour les ombres et revient à une implémentation d'ombre émulée personnalisée sur les anciennes plates-formes.

En raison de la nature coûteuse du détourage des coins arrondis, sur les plates-formes antérieures à Lollipop, CardView ne coupe pas ses enfants qui se croisent avec des coins arrondis. Au lieu de cela, il ajoute un remplissage pour éviter une telle intersection (voir setPreventCornerOverlap (boolean) pour modifier ce comportement).

Paramètres

Paramètre Détails
cardBackgroundColor Couleur de fond pour CardView.
cardCornerRadius Rayon d'angle pour CardView.
carteElevation Élévation pour CardView.
cardMaxElevation Altitude maximale pour CardView.
cardPreventCornerOverlap Ajoutez un remplissage à CardView sur v20 et avant pour éviter les intersections entre le contenu de la carte et les coins arrondis.
cardUseCompatPadding Ajouter un remplissage dans l'API v21 + aussi pour avoir les mêmes mesures avec les versions précédentes. Peut être une valeur booléenne, telle que "true" ou "false".
contentPadding Rembourrage intérieur entre les bords de la carte et les enfants du CardView.
contentPaddingBottom Rembourrage intérieur entre le bord inférieur de la carte et les enfants du CardView.
contentPaddingLeft Rembourrage intérieur entre le bord gauche de la carte et les enfants du CardView.
contentPaddingRight Élévation pour CardView.
carteElevation Rembourrage intérieur entre le bord droit de la carte et les enfants du CardView.
contentPaddingTop Rembourrage intérieur entre le bord supérieur de la carte et les enfants du CardView.

Remarques

CardView utilise des ombres réelles et dynamiques sur Lollipop (API 21) et au-delà. Cependant, avant que Lollipop CardView retombe dans une implémentation d'ombre programmatique.

Si vous essayez de faire un ImageView en forme dans les coins arrondis d'un CardView , vous remarquerez peut - être il ne semble pas correcte pré-Lollipop (API 21). Pour résoudre ce problème, vous devez appeler setPreventCornerOverlap(false) sur votre CardView ou ajouter app:cardPreventCornerOverlap="false" à votre mise en page.

Avant d'utiliser CardView vous devez ajouter la dépendance de la bibliothèque de support dans le fichier build.gradle :

dependencies{
    compile 'com.android.support:cardview-v7:25.2.0'
}

Un numéro de la dernière version peut être trouvé ici

Documentation officielle:

https://developer.android.com/reference/android/support/v7/widget/CardView.html https://developer.android.com/training/material/lists-cards.html

Premiers pas avec CardView

CardView est un membre de la bibliothèque de support Android et fournit une disposition pour les cartes.

Pour ajouter CardView à votre projet, ajoutez la ligne suivante à vos dépendances build.gradle .

compile 'com.android.support:cardview-v7:25.1.1'

Un numéro de la dernière version peut être trouvé ici

Dans votre mise en page, vous pouvez ensuite ajouter les éléments suivants pour obtenir une carte.

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- one child layout containing other layouts or views -->     

</android.support.v7.widget.CardView>

Vous pouvez ensuite ajouter d’autres mises en page à l’intérieur de la carte et les inclure dans une carte.

En outre, CardView peut être rempli avec tout élément d'interface utilisateur et manipulé à partir du code .

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/card_view"
    android:layout_margin="5dp"
    card_view:cardBackgroundColor="#81C784"
    card_view:cardCornerRadius="12dp"
    card_view:cardElevation="3dp"
    card_view:contentPadding="4dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp" >

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/item_image"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="16dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_title"
            android:layout_toRightOf="@+id/item_image"
            android:layout_alignParentTop="true"
            android:textSize="30sp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_detail"
            android:layout_toRightOf="@+id/item_image"
            android:layout_below="@+id/item_title"
            />

    </RelativeLayout>
</android.support.v7.widget.CardView>

Personnalisation de CardView

CardView fournit un rayon d'élévation et d'angle par défaut afin que les cartes aient une apparence cohérente sur toutes les plates-formes.

Vous pouvez personnaliser ces valeurs par défaut en utilisant ces attributs dans le fichier xml:

  1. card_view:cardElevation attribut card_view:cardElevation ajoute l'élévation dans CardView.
  2. card_view:cardBackgroundColor attribut card_view:cardBackgroundColor est utilisé pour personnaliser la couleur d'arrière-plan de l'arrière-plan de CardView (vous pouvez donner n'importe quelle couleur).
  3. card_view:cardCornerRadius attribut card_view:cardCornerRadius est utilisé pour courbe 4 bords de CardView
  4. card_view:contentPadding attribut card_view:contentPadding ajoute un remplissage entre la carte et les enfants de la carte

Remarque: card_view est un espace de noms défini dans la vue de disposition parent la plus haute. xmlns: card_view = " http://schemas.android.com/apk/res-auto "

Voici un exemple:

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardElevation="4dp"
        card_view:cardBackgroundColor="@android:color/white"
        card_view:cardCornerRadius="8dp"
        card_view:contentPadding="16dp">

        <!-- one child layout containing other layouts or views -->     

</android.support.v7.widget.CardView>

Vous pouvez aussi le faire par programmation en utilisant:

card.setCardBackgroundColor(....);
card.setCardElevation(...);
card.setRadius(....);
card.setContentPadding();

Vérifiez le javadoc officiel pour des propriétés supplémentaires.

Ajout d'animation Ripple

Pour activer l'animation d'ondulation dans CardView, ajoutez les attributs suivants:

<android.support.v7.widget.CardView
  ...
  android:clickable="true"
  android:foreground="?android:attr/selectableItemBackground">
  ...
</android.support.v7.widget.CardView>

Utilisation d'images en tant qu'arrière-plan dans CardView (problèmes liés aux périphériques pré-Lollipop)

Lorsque vous utilisez Image / Couleur comme arrière-plan dans une vue CardView, vous risquez d'obtenir de légers bourrelets blancs (si la couleur par défaut de la carte est le blanc) sur les bords. Cela est dû aux coins arrondis par défaut dans la vue Carte. Voici comment éviter ces marges dans les dispositifs de pré-sucette.

Nous devons utiliser un attribut card_view:cardPreventCornerOverlap="false" dans CardView. 1). En XML, utilisez l'extrait de code suivant.

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    card_view:cardPreventCornerOverlap="false"
    android:layout_height="wrap_content"> 
      <ImageView
            android:id="@+id/row_wallet_redeem_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:src="@drawable/bg_image" />

</android.support.v7.widget.CardView>
  1. En Java comme ceci cardView.setPreventCornerOverlap(false) .

Cela supprime un bourrage indésirable sur les bords de la carte. Voici quelques exemples visuels liés à cette implémentation.

1 carte avec fond d'image dans API 21 (parfaitement bien) Carte avec fond d'image dans l'API 21

2 carte avec fond d'image dans l'API 19 sans attribut (notez les rembourrages autour de l'image) Carte avec fond d'image dans l'API 19 sans attribut

3 carte FIXED avec arrière-plan d'image dans l'API 19 avec l'attribut cardView.setPreventCornerOverlap(false) (problème désormais résolu) Carte FIXE avec arrière-plan d'image dans l'API 19 avec attribut

Lisez aussi à ce sujet sur Documentation ici
Message SOF original ici

Animer la couleur d'arrière-plan de CardView avec TransitionDrawable

public void setCardColorTran(CardView card) {
    ColorDrawable[] color = {new ColorDrawable(Color.BLUE), new ColorDrawable(Color.RED)};
    TransitionDrawable trans = new TransitionDrawable(color);
    if(Build.VERSION.SDK_INT > Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1) {
        card.setBackground(trans);
    } else {
        card.setBackgroundDrawable(trans);
    }
    trans.startTransition(5000);
}


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow