Maak een Kaart-gebaseerde Layout

Apps moeten vaak gegevens weergeven in gelijk gestileerde containers. Deze containers worden vaak gebruikt in lijsten om de informatie van elk item te bewaren. Het systeem biedt deCardView API als een gemakkelijke manier om informatie te tonen in kaarten die een consistent uiterlijk hebben over het hele platform. Deze kaarten hebben een standaard hoogte boven hun bevattende view groep, zodat het systeem er schaduwen onder tekent. Kaarten bieden een gemakkelijke manier om een groep weergaven te bevatten en tegelijkertijd een consistente stijl voor de container te bieden.

Figuur 1. Kaartvoorbeelden

Voeg de afhankelijkheden toe

De CardView widget is onderdeel van AndroidX. Om het te gebruiken in uw project, voegt u de volgende afhankelijkheid toe aan het build.gradle bestand van uw app module:

dependencies { implementation "androidx.cardview:cardview:1.0.0"}

Create Cards

Om de CardView te gebruiken moet u het toevoegen aan uw layout bestand. Gebruik het als een view groep om andere views te bevatten. In dit voorbeeld bevat deCardView een enkele TextView om wat informatie aan de gebruiker te tonen.

De kaarten worden op het scherm getekend met een standaard elevatie, die ervoor zorgt dat het systeem er een schaduw onder tekent. U kunt een aangepaste hoogte voor een kaart opgeven met hetcard_view:cardElevation attribuut. Dit zal een meer uitgesproken schaduw tekenen met een grotere elevatie, en een lagere elevatie zal resulteren in een lichtere schaduw.CardView gebruikt echte elevatie en dynamische schaduwen op Android 5.0(API niveau 21) en hoger en valt terug op een programmatische schaduw implementatie op eerdere versies.

Gebruik deze eigenschappen om het uiterlijk van deCardView widget aan te passen:

  • Om de hoek radius in uw lay-outs in te stellen, gebruik het card_view:cardCornerRadius attribuut.
  • Om de hoek radius in uw code in te stellen, gebruik de CardView.setRadius methode.
  • Om de achtergrond kleur van een kaart in te stellen, gebruik het card_view:cardBackgroundColorattribuut.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.