Zoeken…


Invoering

Een kaderlay-out met een afgeronde hoekachtergrond en schaduw.

CardView gebruikt elevatie-eigenschappen op Lollipop voor schaduwen en valt terug op een aangepaste geëmuleerde schaduwimplementatie op oudere platforms.

Vanwege het dure karakter van afgeronde hoeken knippen, op platforms vóór Lollipop, knipt CardView geen kinderen die kruisen met afgeronde hoeken. In plaats daarvan wordt padding toegevoegd om een dergelijk kruispunt te voorkomen (zie setPreventCornerOverlap (boolean) om dit gedrag te wijzigen).

parameters

Parameter Details
cardBackgroundColor Achtergrondkleur voor CardView.
cardCornerRadius Hoekradius voor CardView.
cardElevation Hoogte voor CardView.
cardMaxElevation Maximale hoogte voor CardView.
cardPreventCornerOverlap Voeg vulling toe aan CardView op v20 en daarvoor om kruisingen tussen de kaartinhoud en afgeronde hoeken te voorkomen.
cardUseCompatPadding Voeg ook padding toe in API v21 + voor dezelfde metingen als eerdere versies. Dit kan een booleaanse waarde zijn, zoals 'waar' of 'onwaar'.
contentPadding Binnenvulling tussen de randen van de kaart en kinderen van de CardView.
contentPaddingBottom Binnenvulling tussen de onderrand van de kaart en kinderen van de CardView.
contentPaddingLeft Binnenvulling tussen de linkerrand van de kaart en kinderen van de CardView.
contentPaddingRight Hoogte voor CardView.
cardElevation Binnenvulling tussen de rechterrand van de kaart en kinderen van de CardView.
contentPaddingTop Binnenvulling tussen de bovenrand van de kaart en kinderen van de CardView.

Opmerkingen

CardView maakt gebruik van echte hoogte- en dynamische schaduwen op Lollipop (API 21) en hoger. Voordat Lollipop CardView terugvalt naar een programmatische CardView .

Als u probeert een ImageView in de afgeronde hoeken van een CardView , ziet u misschien dat deze er niet correct uitziet vóór Lollipop (API 21). Om dit op te lossen, moet u setPreventCornerOverlap(false) op uw CardView of een app:cardPreventCornerOverlap="false" aan uw lay-out toevoegen.

Voordat u CardView , moet u de afhankelijkheid van de ondersteuningsbibliotheek toevoegen aan het bestand build.gradle :

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

Een aantal van de nieuwste versies vindt u hier

Officiële documentatie:

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

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>
  1. 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) Kaart met afbeeldingsachtergrond in API 21

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

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

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


Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow