Android
CardView

Introduction

Paramètres

Remarques

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

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>

2. 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)

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

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)

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);
}