Ricerca…


introduzione

Un FrameLayout con uno sfondo e un'ombra arrotondati.

CardView utilizza la proprietà elevation su Lollipop per le ombre e ricade su un'implementazione shadow emulata personalizzata su piattaforme meno recenti.

A causa della natura costosa del ritaglio dell'angolo arrotondato, su piattaforme prima di Lollipop, CardView non ritaglia i suoi figli che si intersecano con gli angoli arrotondati. Invece, aggiunge padding per evitare tale intersezione (vedi setPreventCornerOverlap (booleano) per cambiare questo comportamento).

Parametri

Parametro Dettagli
cardBackgroundColor Colore di sfondo per CardView.
cardCornerRadius Raggio d'angolo per CardView.
cardElevation Elevazione per CardView.
cardMaxElevation Elevazione massima per CardView.
cardPreventCornerOverlap Aggiungi padding a CardView su v20 e prima per evitare intersezioni tra il contenuto della Carta e gli angoli arrotondati.
cardUseCompatPadding Aggiungi padding in API v21 + per avere le stesse misurazioni con le versioni precedenti. Può essere un valore booleano, come "true" o "false".
contentPadding Imbottitura interna tra i bordi della Card e i bambini di CardView.
contentPaddingBottom Imbottitura interna tra il bordo inferiore della scheda e i bambini di CardView.
contentPaddingLeft Imbottitura interna tra il bordo sinistro della scheda e i bambini del CardView.
contentPaddingRight Elevazione per CardView.
cardElevation Imbottitura interna tra il bordo destro della Card e i bambini del CardView.
contentPaddingTop Imbottitura interna tra il bordo superiore della Card e i bambini del CardView.

Osservazioni

CardView utilizza l'elevazione reale e le ombre dinamiche su Lollipop (API 21) e sopra. Tuttavia, prima che Lollipop CardView ricada su un'implementazione shadow programmatica.

Se cerchi di realizzare un ImageView all'interno degli angoli arrotondati di un CardView , potresti notare che non sembra corretto pre-Lollipop (API 21). Per risolvere questo problema, devi chiamare setPreventCornerOverlap(false) sul tuo CardView o aggiungere app:cardPreventCornerOverlap="false" al tuo layout.

Prima di usare CardView devi aggiungere la dipendenza della libreria di supporto nel file build.gradle :

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

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

Documentazione ufficiale:

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

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>
  1. 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) Scheda con sfondo immagine in API 21

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

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

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


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow