Android
CardView

Introduktion

parametrar

Anmärkningar

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

Komma igång med CardView

CardView är medlem i Android Support Library och ger en layout för kort.

För att lägga till CardView i ditt projekt lägger du till följande rad i dina build.gradle beroenden.

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

Ett nummer av den senaste versionen kan hittas här

I din layout kan du sedan lägga till följande för att få ett kort.

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

Du kan sedan lägga till andra layouter i detta och de kommer att ingå i ett kort.

CardView kan också fyllas med alla UI-element och manipuleras från kod .

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

Anpassa CardView

CardView har en standardhöjd och hörnradie så att korten får ett jämnt utseende över plattformarna.

Du kan anpassa dessa standardvärden med hjälp av dessa attribut i xml-filen:

1. card_view:cardElevation attribut lägga till elevation i CardView.
2. card_view:cardBackgroundColor attributet används för att anpassa bakgrundsfärgen för CardViews bakgrund (du kan ge valfri färg).
3. card_view:cardCornerRadius attributet används för att kurva fyra kanter av CardView
4. card_view:contentPadding attribut lägg till vaddering mellan kort och barn av kort

Obs: card_view är ett namnutrymme som definieras i den översta överordnade layoutvyn. xmlns: card_view = " http://schemas.android.com/apk/res-auto "

Här ett exempel:

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

Du kan också göra det med hjälp av:

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

Kontrollera den officiella javadoc för ytterligare egenskaper.

Lägga till Ripple-animering

Lägg till följande attribut för att aktivera rippelanimeringen i en CardView:

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

Använda bilder som bakgrund i CardView (problem med pre-Lollipop-enheter)

När du använder Image / Color som bakgrund i en CardView, kan du hamna med små vita stoppningar (Om standardkortfärgen är vit) på kanterna. Detta inträffar på grund av standardrundade hörn i kortvyn. Så här undviker du dessa marginaler i enheter före pre-lollipop.

Vi måste använda ett attribut card_view:cardPreventCornerOverlap="false" i CardView. 1). I XML använder du följande kodavsnitt.

<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. I Java som detta cardView.setPreventCornerOverlap(false) .

Om du gör det avlägsnas en oönskad stoppning på kortets kanter. Här är några visuella exempel relaterade till denna implementering.

1 kort med bildbakgrund i API 21 (helt bra)

2 kort med bildbakgrund i API 19 utan attribut (märk paddlingarna runt bilden)

3 FIXED-kort med bildbakgrund i API 19 med attribut cardView.setPreventCornerOverlap(false) (Utgåva nu fixat)

Läs också om detta på dokumentation här
Original SOF-inlägg här

Animera CardView-bakgrundsfärg med 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);
}