Android
CardView

Einführung

Parameter

Bemerkungen

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

Erste Schritte mit CardView

CardView ist Mitglied der Android Support Library und bietet ein Layout für Karten.

CardView Sie zum Hinzufügen von CardView zu Ihrem Projekt die folgende Zeile zu Ihren build.gradle Abhängigkeiten hinzu.

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

Eine Nummer der neuesten Version finden Sie hier

In Ihrem Layout können Sie dann Folgendes hinzufügen, um eine Karte zu erhalten.

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

Sie können dann weitere Layouts hinzufügen, die in einer Karte enthalten sind.

CardView kann außerdem mit einem beliebigen UI-Element gefüllt und vom Code aus manipuliert werden .

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

CardView anpassen

CardView bietet eine Standardhöhe und einen Eckenradius, damit die Karten auf allen Plattformen einheitlich aussehen.

Sie können diese Standardwerte mithilfe der folgenden Attribute in der XML-Datei anpassen:

1. card_view:cardElevation Attribut fügt eine Erhöhung in CardView hinzu.
2. card_view:cardBackgroundColor Attribut wird verwendet, um die Hintergrundfarbe des CardView-Hintergrunds anzupassen (Sie können jede Farbe angeben).
3. card_view:cardCornerRadius Attribut wird verwendet, um 4 Kanten von CardView zu krümmen
4. card_view:contentPadding Attribut fügt card_view:contentPadding zwischen Karte und Kinder der Karte ein

Hinweis: card_view ist ein Namespace, der in der obersten übergeordneten Layoutansicht definiert ist. xmlns: card_view = " http://schemas.android.com/apk/res-auto "

Hier ein Beispiel:

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

Sie können das auch programmgesteuert machen mit:

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

Überprüfen Sie die offiziellen Javadoc für weitere Eigenschaften.

Ripple-Animation hinzufügen

Fügen Sie die folgenden Attribute hinzu, um die Ripple-Animation in einer CardView zu aktivieren:

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

Verwenden von Bildern als Hintergrund in CardView (Probleme mit dem Lollipop-Gerät)

Wenn Sie Image / Color als Hintergrund in einem CardView verwenden, können am Ende leichte weiße Polsterungen (Wenn die Standardfarbe der Karte weiß ist) an den Rändern erhalten. Dies ist auf die standardmäßig abgerundeten Ecken in der Kartenansicht zurückzuführen. So vermeiden Sie diese Ränder in Pre-Lollipop-Geräten.

Wir müssen ein Attribut card_view:cardPreventCornerOverlap="false" in der CardView. 1). Verwenden Sie in XML das folgende Snippet.

<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 wie diesem cardView.setPreventCornerOverlap(false) .

Dadurch wird eine unerwünschte Auffüllung der Kartenränder entfernt. Hier sind einige visuelle Beispiele für diese Implementierung.

1 Karte mit Bildhintergrund in API 21 (vollkommen in Ordnung)

2 Karte mit Bildhintergrund in API 19 ohne Attribut (beachten Sie die Auffüllungen um das Bild)

3 FIXED-Karte mit Bildhintergrund in API 19 mit Attribut cardView.setPreventCornerOverlap(false) ( cardView.setPreventCornerOverlap(false) jetzt behoben)

Lesen Sie dazu auch die Dokumentation hier
Original SOF Beitrag hier

Animieren Sie die CardView-Hintergrundfarbe mit 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);
}