Android
CardView

Invoering

parameters

Opmerkingen

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

Aan de slag met CardView

CardView is lid van de Android-ondersteuningsbibliotheek en biedt een lay-out voor kaarten.

Om CardView aan uw project toe te voegen, voegt u de volgende regel toe aan uw build.gradle afhankelijkheden.

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

Een aantal van de nieuwste versies vindt u hier

In uw lay-out kunt u vervolgens het volgende toevoegen om een kaart te krijgen.

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

Je kunt dan andere lay-outs hierin toevoegen en deze worden opgenomen in een kaart.

CardView kan ook worden gevuld met elk UI-element en worden gemanipuleerd vanuit code .

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

CardView biedt een standaard hoogte en hoekradius zodat kaarten een consistent uiterlijk hebben op de platforms.

U kunt deze standaardwaarden aanpassen met behulp van deze attributen in het xml-bestand:

1. card_view:cardElevation kenmerk add elevation in CardView.
2. card_view:cardBackgroundColor kenmerk card_view:cardBackgroundColor wordt gebruikt om de achtergrondkleur van de achtergrond van CardView aan te passen (u kunt elke kleur opgeven).
3. card_view:cardCornerRadius kenmerk card_view:cardCornerRadius wordt gebruikt om 4 randen van CardView te krommen
4. card_view:contentPadding kenmerk voeg opvulling toe tussen kaart en card_view:contentPadding kaart

Opmerking: card_view is een naamruimte die is gedefinieerd in de bovenste bovenliggende layoutweergave. xmlns: card_view = " http://schemas.android.com/apk/res-auto "

Hier een voorbeeld:

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

Je kunt het ook programmatisch doen met:

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

Controleer de officiële javadoc voor extra eigenschappen.

Rimpelanimatie toevoegen

Voeg de volgende kenmerken toe om de rimpelanimatie in een CardView in te schakelen:

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

Afbeeldingen gebruiken als achtergrond in CardView (problemen met pre-Lollipop-apparaten)

Wanneer u Afbeelding / Kleur als achtergrond in een CardView gebruikt, kunt u aan de randen lichte witte opvullingen krijgen (als de standaardkaartkleur wit is). Dit gebeurt vanwege de standaard afgeronde hoeken in de kaartweergave. Hier leest u hoe u die marges in Pre-lollipop-apparaten kunt vermijden.

We moeten een attribuut card_view:cardPreventCornerOverlap="false" in de CardView. 1). Gebruik in XML het volgende fragment.

<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 zoals deze cardView.setPreventCornerOverlap(false) .

Hiermee verwijdert u een ongewenste opvulling aan de randen van de kaart. Hier zijn enkele visuele voorbeelden met betrekking tot deze implementatie.

1 kaart met afbeeldingsachtergrond in API 21 (perfect in orde)

2 Kaart met afbeeldingsachtergrond in API 19 zonder kenmerk (let op de opvullingen rond de afbeelding)

3 VASTE kaart met afbeeldingsachtergrond in API 19 met kenmerk cardView.setPreventCornerOverlap(false) (probleem nu opgelost)

Lees hier ook meer over op Documentatie
Origineel SOF-bericht hier

Animeer CardView-achtergrondkleur met 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);
}