Komme i gang med RecyclerView og CardView på Android

Hvis du er interessert i å bygge en Android-app som bruker lister for å vise data, har Android Lollipop to nye widgets for å gjøre livet enklere., RecyclerView og CardView. Ved hjelp av disse widgets er det veldig enkelt å gi appen din en utseende og følelse som overholder retningslinjene nevnt i Googles materialdesignspesifikasjon.

Et flott sted å komme i gang når du bygger en app, er å bruke en Android app mal. Du kan finne hundrevis av dem på Envato Market, for å bygge alt fra en YouTube-app til et morsomt hinder-unngå spill. 

Eller du kan prøve denne universelle Android-appmalen, som gir deg en solid base for å lage nesten alle slags apper.

Universal Android app mal på Envato Market

Forutsetninger

For å følge med, bør du bruke den nyeste versjonen av Android Studio. Du kan hente den fra Android Developer-nettstedet.

1. Støt eldre versjoner

På tidspunktet for skrivingen kjører mindre enn 2% av Android-enheter Android Lollipop. Men takket være v7 Støttebibliotek, du kan bruke RecyclerView og CardView widgets på enheter som kjører eldre versjoner av Android ved å legge til følgende linjer i avhengig delen i prosjektets build.grade fil:

kompilere 'com.android.support:cardview-v7:21.0.+' compile 'com.android.support:recyclerview-v7:21.0.+'

2. Opprette en CardView

EN CardView er en ViewGroup. Som alle andre ViewGroup, det kan legges til din Aktivitet eller Fragment bruker en layout XML-fil.

Å lage en tom CardView, du må legge til følgende kode i layout XML som vist i følgende kode:

 

Som et mer realistisk eksempel, la oss nå lage en LinearLayout og plasser a CardView inni det. De CardView kan representere for eksempel en person og inneholde følgende:

  • en TextView for å vise navnet på personen
  • en TextView å vise personens alder
  • en Imageview for å vise personens bilde

Slik ser XML ut:

         

Hvis denne XML brukes som layout av en Aktivitet, med TextView og Imageview felter er satt til meningsfylte verdier, så er det slik det ville gjengis på en Android-enhet:

3. Opprette en RecyclerView

Trinn 1: Definer det i en layout

Bruker en RecyclerView forekomsten er litt mer komplisert. Men å definere det i en layout XML-fil er ganske enkelt. Du kan definere det i et oppsett som følger:

Å få et håndtak til det i din Aktivitet, bruk følgende utdrag:

RecyclerView rv = (RecyclerView) findViewById (R.id.rv);

Hvis du er sikker på at størrelsen på RecyclerView vil ikke endres, du kan legge til følgende for å forbedre ytelsen:

rv.setHasFixedSize (true);

Trinn 2: Bruke en LayoutManager

I motsetning til en Listevisning, en RecyclerView trenger a LayoutManager å styre plasseringen av sine gjenstander. Du kan definere din egen LayoutManager ved å utvide RecyclerView.LayoutManager klasse. Men i de fleste tilfeller kan du bare bruke en av de forhåndsdefinerte LayoutManager underklasser:

  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager

I denne opplæringen skal jeg bruke en LinearLayoutManager. Dette LayoutManager Underklasse vil som standard lage din RecyclerView ser ut som en Listevisning.

LinearLayoutManager llm = ny LinearLayoutManager (kontekst); rv.setLayoutManager (LLM);

Trinn 3: Definere dataene

Akkurat som a Listevisning, en RecyclerView trenger en adapter for å få tilgang til dataene sine. Men før vi lager en adapter, la oss lage data vi kan jobbe med. Opprett en enkel klasse for å representere en person og skriv deretter en metode for å initialisere en Liste av Person objekter:

Klasse Person Strenge navn; String alder; int photoId; Person (Strenge navn, String alder, int photoId) this.name = name; this.age = alder; this.photoId = photoId;  privat liste personer; // Denne metoden oppretter en ArrayList som har tre Personobjekter // Sjekk ut prosjektet som er tilknyttet denne opplæringen på Github hvis // du vil bruke de samme bildene. privat tomrom initialisereData () persons = new ArrayList <> (); persons.add (ny person ("Emma Wilson", "23 år gammel", R.drawable.emma)); persons.add (ny person ("Lavery Maiss", "25 år gammel", R.drawable.lavery)); persons.add (ny person ("Lillie Watts", "35 år gammel", R.drawable.lillie)); 

Trinn 4: Opprette en adapter

For å lage en adapter som a RecyclerView kan bruke, må du utvide RecyclerView.Adapter. Denne adapteren følger vise holderen design mønster, som betyr at du skal definere en egendefinert klasse som strekker seg RecyclerView.ViewHolder. Dette mønsteret reduserer antall samtaler til det kostbare findViewById metode.

Tidligere i denne opplæringen definerte vi allerede XML-oppsettet for a CardView som representerer en person. Vi skal gjenbruke denne utformingen nå. Inne i konstruktøren av vår skikk ViewHolder, initierer visningene som tilhører elementene i vår RecyclerView.

offentlig klasse RVAdapter utvider RecyclerView.Adapteroffentlig statisk klasse PersonViewHolder utvider RecyclerView.ViewHolder CardView cv; TextView personnavn; TextView personAge; ImageView personPhoto; PersonViewHolder (Se elementView) super (itemView); cv = (CardView) itemView.findViewById (R.id.cv); personName = (TextView) itemView.findViewById (R.id.person_name); personAge = (TextView) itemView.findViewById (R.id.person_age); personPhoto = (ImageView) itemView.findViewById (R.id.person_photo);  

Deretter legger du til en konstruktør til den tilpassede adapteren slik at den har et håndtak til dataene som RecyclerView skjermer. Som våre data er i form av a Liste av Person objekter, bruk følgende kode:

Liste personer; RVAdapter (Liste personer) this.persons = personer; 

RecyclerView.Adapter har tre abstrakte metoder som vi må overstyre. La oss begynne med getItemCount metode. Dette bør returnere antall elementer som er tilstede i dataene. Som våre data er i form av a Liste, vi trenger bare å ringe størrelse metode på Liste gjenstand:

@Override public int getItemCount () return persons.size (); 

Deretter overstyre onCreateViewHolder metode. Som navnet antyder, kalles denne metoden når den tilpassede ViewHolder må initialiseres. Vi spesifiserer layoutet som hvert element i RecyclerView bør bruke. Dette gjøres ved å oppblåse oppsettet ved hjelp av LayoutInflater, passerer produksjonen til konstruktøren av tilpasset ViewHolder.

@Override public PersonViewHolder onCreateViewHolder (ViewGroup viewGroup, int i) Vis v = LayoutInflater.from (viewGroup.getContext ()). Oppblås (R.layout.item, viewGroup, false); PersonViewHolder pvh = ny PersonViewHolder (v); returnere pvh; 

Overstyr onBindViewHolder å spesifisere innholdet i hvert element i RecyclerView. Denne metoden er veldig lik den getView metode for a Listevisningadapter. I vårt eksempel er her hvor du må angi verdiene for navn, alder og bildefelt av CardView.

@Override public void onBindViewHolder (PersonViewHolder personViewHolder, int i) personViewHolder.personName.setText (persons.get (i) .name); personViewHolder.personAge.setText (persons.get (i) .age); personViewHolder.personPhoto.setImageResource (persons.get (i) .photoId); 

Til slutt må du overstyre onAttachedToRecyclerView metode. For nå kan vi bare bruke superklassens implementering av denne metoden som vist nedenfor.

@Override public void onAttachedToRecyclerView (RecyclerView recyclerView) super.onAttachedToRecyclerView (recyclerView); 

Trinn 5: Bruke adapteren

Nå som adapteren er klar, legg til følgende kode i din Aktivitet å initialisere og bruke adapteren ved å ringe adapterens konstruktør og RecyclerView's setAdapter metode:

RVAdapter adapter = ny RVAdapter (personer); rv.setAdapter (adapter);

Trinn 6: Samle og kjøre

Når du kjører RecyclerView eksempel på en Android-enhet, bør du se noe som ligner på følgende resultat.

Konklusjon

I denne opplæringen har du lært hvordan du bruker CardView og RecyclerView widgets som ble introdusert i Android Lollipop. Du har også sett eksempler på hvordan du bruker disse widgets i Material Design apps. Legg merke til at selv om a RecyclerView kan gjøre nesten alt a Listevisning kan, for små datasett, bruke a Listevisning er fortsatt å foretrekke da det krever færre linjer med kode.

Du kan referere til Android Developers Reference for mer informasjon om CardView og RecyclerView klasser.

Og hvis du vil øke hastigheten på apputviklingen din, ikke glem å sjekke ut de Android app-malene på Envato Market.