Getting gang med RecyclerView og CardView på Android
41
Del
6
Del
Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Hvis du er interessert i å bygge en Android app som gjør bruk av lister for å vise data, Android Lollipop har to nye widgets for å gjøre livet ditt enklere, RecyclerView og CardView. Ved hjelp av disse widgets, er det veldig lett å gi appen en utseende som er i samsvar med de retningslinjer som er nevnt i Googles materialdesign spesifikasjon.

Forutsetninger

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

1. Støtter eldre versjoner

På det i skrivende stund, mindre enn 2% av Android-enheter kjøre Android Lollipop. Men takket være den v7 Support Library, kan du bruke RecyclerView og CardView widgets på enheter som kjører eldre versjoner av Android ved å legge til følgende linjer til avhengig delen i prosjektets build.grade filen:
kompilere 'com.android Støtte: cardview-v7. 21.0 + 'kompilere' com.android.support:recyclerview-v7:21.0.+'
2. Opprette en CardView

En CardView er en ViewGroup. Som alle andre ViewGroup, kan det bli lagt til din aktivitet eller Fragment bruker en layout XML-fil.

For å opprette en tom CardView, ville du må legge til følgende kode i layouten XML som vist i følgende tekstutdrag:
< 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" > < /android.support.v7.widget.CardView>

Som et mer realistisk eksempel, la oss nå lage en LinearLayout og plassere en CardView inni den. Den CardView kunne representere, for eksempel, en person og inneholder følgende:

a TextView å vise navnet på personen

a TextView å vise personens alder

en Imageview for å vise personens bilder

Dette er hva XML vil se ut:?
< xml version = "1.0" encoding = "utf- 8 "? > < LinearLayout xmlns: android =" http://schemas.android.com/apk/res/android "android: layout_width =" match_parent "android: layout_height =" match_parent "android: padding =" 16dp " > < android.support.v7.widget.CardView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: id = "+ id /cv" > < RelativeLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: padding = "16dp" > < Imageview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: id = "+ id /person_photo" 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 /PERSON_NAME" android: layout_toRightOf = "+ id /person_photo" android: layout_alignParentTop = "true" android: Tekststørrelse = "30sp" /> < TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: id = "+ id /person_age" android: layout_toRightOf = "+ id /person_photo" android: layout_below = "+ id /PERSON_NAME" /> < /RelativeLayout > < /android.support.v7.widget.CardView> < /LinearLayout >

Hvis dette XML brukes som utformingen av en aktivitet, med TextView og Imageview felt er satt til meningsfulle verdier, så dette er hvordan det ville gjengi på en Android-enhet:

3. Opprette en RecyclerView

Trinn 1: Definere Det i et oppsett

Ved hjelp av en RecyclerView eksempel er litt mer komplisert. Imidlertid definerer det i en layout XML-fil er ganske enkel. Du kan definere det i en layout som følger:
< android.support.v7.widget.RecyclerView android: layout_width = "match_parent" android: layout_height = "match_parent" android: id = "+ id /rv" />

For å få et håndtak til den i aktivitet, bruker du følgende tekstutdraget:
RecyclerView rv = (RecyclerView) findViewById (R.id.rv);

Hvis du er sikker på at størrelsen på RecyclerView vil ikke være i endring, og du kan legge til følgende for å forbedre ytelsen:
rv.setHasFixedSize (true);
Trinn 2: Bruk en LayoutManager

I motsetning til en Listview, en RecyclerView trenger en LayoutManager for å styre posisjoneringen av dens elementer. Du kan definere din egen LayoutManager ved å utvide RecyclerView.LayoutManager klassen. Men i de fleste tilfeller kan du bare bruke en av de forhåndsdefinerte LayoutManager subclasses:



LinearLayoutManager

GridLayoutManager

StaggeredGridLayoutManager

In denne opplæringen, jeg kommer til å bruke en LinearLayoutManager. Dette LayoutManager underklasse vil, som standard, gjør RecyclerView ser ut som en Listview
LinearLayoutManager LLM = new LinearLayoutManager (kontekst), rv.setLayoutManager (LLM);
Trinn 3:. Definere data

Akkurat som en Listview, trenger en RecyclerView en adapter for å få tilgang til sine data. Men før vi lage en adapter, la oss lage data som vi kan arbeide med. Lag en enkel klasse for å representere en person og deretter skrive en metode for å klargjøre en liste over Person objekter:
class Person {String navn; String alder; int photoid; Person (String navn, String alder, int photoid) {this.name = navn; this.age = alder; this.photoId = photoid; }} privat List < Person > personer; //Denne metoden skaper en Arraylist som har tre Person gjenstander //Kasse prosjektets forbundet med denne opplæringen på Github hvis //du ønsker å bruke samme images.private void initializeData () {personer = new Arraylist < > ( ); persons.add (new Person ("Emma Wilson", "23 år gamle", R.drawable.emma)); persons.add (new Person ("Lavery Maiß", "25 år gamle", R.drawable.lavery)); persons.add (new Person ("Lillie Watts", "35 år", R.drawable.lillie));}
Trinn 4: Lage en adapter

Hvis du vil lage en adapter som en RecyclerView kan bruke, du må forlenge RecyclerView.Adapter. Denne adapteren følger utsikten holderen design mønster, noe som betyr at det å definere en egendefinert klasse som strekker RecyclerView.ViewHolder. Dette mønsteret reduserer antall henvendelser til den kostbare findViewById metoden.

Tidligere i denne opplæringen, vi allerede definert XML layout for en CardView som representerer en person. Vi kommer til å bruke dette oppsettet nå. Inne i konstruktøren av våre egendefinert ViewHolder, initial synspunktene som hører til de elementer av vår RecyclerView
public class RVAdapter strekker RecyclerView.Adapter. ≪ RVAdapter.PersonViewHolder > {public static class PersonViewHolder strekker RecyclerView.ViewHolder {CardView cv; TextView personName; TextView personlighet; Imageview personPhoto; PersonViewHolder (Vis itemView) {super (itemView); cv = (CardView) itemView.findViewById (R.id.cv); personName = (TextView) itemView.findViewById (R.id.person_name); persons = (TextView) itemView.findViewById (R.id.person_age); personPhoto = (Imageview) itemView.findViewById (R.id.person_photo); }}}

Deretter legger en konstruktør til skikken adapter slik at den har et håndtak til data som RecyclerView skjermer. Som vår data er i form av en liste over Person objekter, bruke følgende kode:
List < Person > personer; RVAdapter (Liste < Person > personer) {this.persons = personer;}

RecyclerView.Adapter har tre abstrakte metoder som vi må overstyre. La oss starte med getItemCount metoden. Dette bør returnere antall elementer som er tilstede i dataene. Som vår data er i form av en liste, vi trenger bare å ringe størrelsen metoden på listen objekt:
Overridepublic int getItemCount () {return persons.size ();}

Neste, overstyre onCreateViewHolder metoden. Som navnet antyder, er denne metoden kalles når skikken ViewHolder Det må klargjøres. Vi spesifiserer oppsettet at hvert element av RecyclerView bør bruke. Dette gjøres ved å blåse oppsettet ved hjelp LayoutInflater, passerer utgang til konstruktøren av den tilpassede ViewHolder.
Overridepublic PersonViewHolder onCreateViewHolder (ViewGroup viewGroup, int i) {Vis v = LayoutInflater.from (viewGroup.getContext ()). blåse (R.layout.item, viewGroup, false); PersonViewHolder PVH = new PersonViewHolder (v); returnere PVH;}

Overstyr onBindViewHolder å spesifisere innholdet i hvert element av RecyclerView. Denne metoden er svært lik den getView fremgangsmåte for en listevisningen s adapter. I vårt eksempel, her hvor du må sette verdiene for navn, alder og foto felt av CardView.
Overridepublic 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 metoden. For nå kan vi bare bruke super implementering av denne metoden som vist nedenfor
Overridepublic void onAttachedToRecyclerView (RecyclerView recyclerView) {super.onAttachedToRecyclerView (recyclerView);}
Trinn 5:. Bruke Adapter

Nå som adapteren er klar, legge til følgende kode i aktivitets å initial og bruke adapteren ved å ringe kortets konstruktør og RecyclerView er setAdapter metode:
RVAdapter adapter = new RVAdapter (personer), rv. . setAdapter (adapter);
Trinn 6: kompilere 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 kan gjøre bruk av disse widgets i Material Design apps. Vær oppmerksom på at selv om en RecyclerView kan gjøre nesten alt en Listview kan, for små datasett, ved hjelp av en Listview er fortsatt å foretrekke fordi den krever færre linjer med kode.

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