Android
CardView

introduzione

Parametri

Osservazioni

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

Iniziare con CardView

CardView è un membro della libreria di supporto Android e fornisce un layout per le carte.

Per aggiungere CardView al tuo progetto, aggiungi la seguente riga alle dipendenze build.gradle .

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

Un numero della versione più recente può essere trovato qui

Nel tuo layout puoi quindi aggiungere quanto segue per ottenere una carta.

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

È quindi possibile aggiungere altri layout all'interno di questo e saranno racchiusi in una scheda.

Inoltre, CardView può essere popolato con qualsiasi elemento dell'interfaccia utente e manipolato dal codice .

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

Personalizzazione di CardView

CardView fornisce un elevazione e un raggio di punta predefiniti in modo che le carte abbiano un aspetto coerente attraverso le piattaforme.

È possibile personalizzare questi valori predefiniti utilizzando questi attributi nel file xml:

1. card_view:cardElevation attributo card_view:cardElevation aggiunge l'elevazione in CardView.
2. card_view:cardBackgroundColor attributo card_view:cardBackgroundColor viene utilizzato per personalizzare il colore di sfondo dello sfondo di CardView (puoi dare qualsiasi colore).
3. card_view:cardCornerRadius attributo card_view:cardCornerRadius viene utilizzato per curvare i 4 bordi di CardView
4. card_view:contentPadding attributo card_view:contentPadding aggiunge il padding tra la carta e i figli della carta

Nota: card_view è uno spazio dei nomi definito nella vista layout principale in alto. xmlns: card_view = " http://schemas.android.com/apk/res-auto "

Ecco un esempio:

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

Puoi anche farlo a livello di programmazione usando:

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

Controlla la javadoc ufficiale per ulteriori proprietà.

Aggiungere animazione Ripple

Per abilitare l'animazione ripple in un CardView, aggiungi i seguenti attributi:

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

Uso delle immagini come sfondo in CardView (problemi relativi al dispositivo Pre-Lollipop)

Mentre si utilizza Immagine / Colore come sfondo in un CardView, si potrebbero finire con leggeri rilievi bianchi (se il colore predefinito della Carta è bianco) sui bordi. Ciò si verifica a causa degli angoli arrotondati predefiniti nella Vista scheda. Ecco come evitare questi margini nei dispositivi Pre-lollipop.

Dobbiamo usare un attributo card_view:cardPreventCornerOverlap="false" nel CardView. 1). In XML usa il seguente frammento.

<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. In Java come questo cardView.setPreventCornerOverlap(false) .

In questo modo si rimuove una imbottitura indesiderata sui bordi della scheda. Ecco alcuni esempi visivi relativi a questa implementazione.

1 scheda con sfondo immagine in API 21 (perfettamente funzionante)

2 Scheda con sfondo immagine in API 19 senza attributi (notare i riquadri intorno all'immagine)

3 Scheda FISSA con sfondo immagine in API 19 con attributo cardView.setPreventCornerOverlap(false) (Problema ora risolto)

Leggi anche questo su Documentazione qui
Post SOF originale qui

Anima il colore di sfondo CardView con 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);
}