Szukaj…


Wprowadzenie

FrameLayout z zaokrąglonym rogiem i cieniem.

CardView korzysta z właściwości elewacji w Lollipop dla cieni i wraca do niestandardowej emulowanej implementacji cienia na starszych platformach.

Ze względu na kosztowny charakter przycinania zaokrąglonych rogów na platformach przed Lollipop CardView nie przycina swoich dzieci przecinających się zaokrąglonymi narożnikami. Zamiast tego dodaje dopełnienie, aby uniknąć takiego przecięcia (zobacz setPreventCornerOverlap (boolean), aby zmienić to zachowanie).

Parametry

Parametr Detale
cardBackgroundColor Kolor tła dla CardView.
cardCornerRadius Promień narożnika dla CardView.
cardElevation Wysokość dla CardView.
cardMaxElevation Maksymalna wysokość dla CardView.
cardPreventCornerOverlap Dodaj dopełnienie do CardView w wersji 20 i wcześniejszych, aby zapobiec przecięciom między zawartością karty a zaokrąglonymi narożnikami.
cardUseCompatPadding Dodaj dopełnienie w API v21 +, aby mieć takie same wymiary jak w poprzednich wersjach. Może być wartością logiczną, taką jak „prawda” lub „fałsz”.
contentPadding Wewnętrzna wyściółka między krawędziami karty a dziećmi CardView.
contentPaddingBottom Wewnętrzne wypełnienie między dolną krawędzią karty a dziećmi CardView.
contentPaddingLeft Wewnętrzne wypełnienie między lewą krawędzią karty a dziećmi CardView.
contentPaddingRight Wysokość dla CardView.
cardElevation Wewnętrzna wyściółka między prawą krawędzią karty a dziećmi CardView.
contentPaddingTop Wewnętrzna wyściółka między górną krawędzią karty a dziećmi CardView.

Uwagi

CardView używa rzeczywistej elewacji i dynamicznych cieni w Lollipop (API 21) i wyższych. Jednak zanim Lollipop CardView wraca do programowej implementacji cienia.

Jeśli próbujesz dopasować ImageView do zaokrąglonych rogów CardView , możesz zauważyć, że nie wygląda on poprawnie przed Lollipopem (API 21). Aby rozwiązać ten problem należy zadzwonić setPreventCornerOverlap(false) na CardView lub dodać app:cardPreventCornerOverlap="false" do układu.

Przed użyciem CardView musisz dodać zależność biblioteki wsparcia do pliku build.gradle :

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

Kilka najnowszych wersji można znaleźć tutaj

Oficjalna dokumentacja:

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

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>
  1. 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) Karta z tłem obrazu w API 21

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

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

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


Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow