Android
CardView

Wprowadzenie

Parametry

Uwagi

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

Rozpoczęcie pracy z CardView

CardView jest członkiem Biblioteki pomocy technicznej Androida i zapewnia układ kart.

Aby dodać CardView do swojego projektu, dodaj następujący wiersz do zależności build.gradle .

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

Kilka najnowszych wersji można znaleźć tutaj

W swoim układzie możesz następnie dodać następujące elementy, aby uzyskać kartę.

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

Następnie możesz dodać do niego inne układy, które zostaną zawarte w karcie.

CardView można również zapełnić dowolnym elementem interfejsu użytkownika i manipulować z kodu .

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

Dostosowywanie CardView

CardView zapewnia domyślną wysokość i promień narożnika, dzięki czemu karty mają spójny wygląd na platformach.

Możesz dostosować te wartości domyślne, używając tych atrybutów w pliku xml:

1. card_view:cardElevation atrybut card_view:cardElevation dodaj rzędną w CardView.
2. card_view:cardBackgroundColor atrybut card_view:cardBackgroundColor służy do dostosowania koloru tła tła card_view:cardBackgroundColor (możesz podać dowolny kolor).
3. card_view:cardCornerRadius atrybut card_view:cardCornerRadius służy do zakrzywiania 4 krawędzi CardView
4. card_view:contentPadding atrybut dodaje dopełnienie między kartą a dziećmi karty

Uwaga: card_view to przestrzeń nazw zdefiniowana w najwyższym widoku układu nadrzędnego. xmlns: card_view = " http://schemas.android.com/apk/res-auto "

Oto przykład:

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

Możesz to również zrobić programowo, używając:

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

Sprawdź oficjalną javadoc w celu uzyskania dodatkowych właściwości.

Dodawanie animacji tętnienia

Aby włączyć animację tętnienia w CardView, dodaj następujące atrybuty:

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

Używanie obrazów jako tła w CardView (problemy z urządzeniem sprzed wersji Lollipop)

Podczas korzystania z obrazu / koloru jako tła w CardView, możesz skończyć z lekkim białym wypełnieniem (jeśli domyślnym kolorem karty jest biały) na krawędziach. Dzieje się tak z powodu domyślnych zaokrąglonych rogów w widoku karty. Oto jak uniknąć tych marginesów w urządzeniach Pre-Lollipop.

Musimy użyć atrybutu card_view:cardPreventCornerOverlap="false" w card_view:cardPreventCornerOverlap="false" . 1). W XML użyj następującego fragmentu kodu.

<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. W Javie jak ten cardView.setPreventCornerOverlap(false) .

Takie postępowanie usuwa niechciane wypełnienie na brzegach karty. Oto kilka wizualnych przykładów związanych z tą implementacją.

1 karta z tłem obrazu w API 21 (idealnie w porządku)

2 Karta z tłem obrazu w API 19 bez atrybutu (zwróć uwagę na wypełnienia wokół obrazu)

3 NAPRAWIONO Karta z tłem obrazu w API 19 z atrybutem cardView.setPreventCornerOverlap(false) (Problem już naprawiony)

Przeczytaj również o tym w Dokumentacji tutaj
Oryginalny post SOF tutaj

Animuj kolor tła CardView za pomocą 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);
}