Komma igång med RecyclerView och CardView på Android

Om du är intresserad av att bygga en Android-app som använder sig av listor för att visa data, har Android Lollipop två nya widgets för att göra ditt liv enklare, RecyclerView och CardView. Med hjälp av dessa widgets är det väldigt enkelt att ge din app en utseende och känsla som överensstämmer med riktlinjerna i Googles materialdesignspecifikation.

Ett bra ställe att komma igång när du bygger en app är att använda en Android app mall. Du kan hitta hundratals på Envato Market för att bygga allt från en YouTube-app till ett roligt hinder-undvikande spel. 

Eller du kan prova den här universella Android-appmallen, som ger dig en stabil bas för att skapa nästan vilken typ av app som helst.

Universal Android app mall på Envato Market

förutsättningar

För att följa med, bör du använda den senaste versionen av Android Studio. Du kan hämta den från Android Developer-webbplatsen.

1. Stöd gamla versioner

I skrivande stund kör mindre än 2% av Android-enheter Android Lollipop. Men tack vare v7 Support Library, du kan använda RecyclerView och CardView widgets på enheter som kör äldre versioner av Android genom att lägga till följande rader till beroenden avsnitt i ditt projekt build.grade fil:

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

2. Skapa en CardView

en CardView är en ViewGroup. Som alla andra ViewGroup, det kan läggas till din Aktivitet eller Fragment använder en layout XML-fil.

För att skapa en tom CardView, du måste lägga till följande kod i ditt layout-XML som visas i följande kod:

 

Som ett mer realistiskt exempel, låt oss nu skapa en Linear och placera a CardView innuti. De CardView kan representera, till exempel, en person och innehålla följande:

  • en Textview för att visa personens namn
  • en Textview för att visa personens ålder
  • en Imageview för att visa personens foto

Så här ser XML ut:

         

Om denna XML används som layout av en Aktivitet, med Textview och Imageview Fält är inställda på meningsfulla värden, så är det här hur det skulle göras på en Android-enhet:

3. Skapa en RecyclerView

Steg 1: Definiera det i en layout

Använder en RecyclerView Exempel är lite mer komplicerat. Att definiera det i en layout XML-fil är dock ganska enkelt. Du kan definiera den i en layout enligt följande:

För att få ett handtag till det i din Aktivitet, använd följande kod:

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

Om du är säker på att storleken på RecyclerView kommer inte att ändras, du kan lägga till följande för att förbättra prestanda:

rv.setHasFixedSize (true);

Steg 2: Använda en LayoutManager

Till skillnad från en Listvy, en RecyclerView behöver a LayoutManager att hantera positioneringen av sina föremål. Du kan definiera din egen LayoutManager genom att förlänga RecyclerView.LayoutManager klass. Men i de flesta fall kan du helt enkelt använda en av de fördefinierade LayoutManager subklasser:

  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager

I denna handledning kommer jag att använda en LinearLayoutManager. Detta LayoutManager Underklassen kommer som standard att göra din RecyclerView ser ut som en Listvy.

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

Steg 3: Definiera data

Precis som a Listvy, en RecyclerView behöver en adapter för åtkomst till dess data. Men innan vi skapar en adapter, låt oss skapa data som vi kan arbeta med. Skapa en enkel klass för att representera en person och skriv sedan en metod för att initiera en Lista av Person objekt:

klassperson strecknamn; Stringåldern; int photoId; Person (Stringnamn, Stringålder, int photoId) this.name = name; this.age = ålder; this.photoId = photoId;  privat lista personer; // Den här metoden skapar en ArrayList som har tre personobjekt // Kassa ut projektet som är associerat med denna handledning på Github om // du vill använda samma bilder. private void initializeData () persons = new ArrayList <> (); persons.add (ny person ("Emma Wilson", "23 år gammal", R.drawable.emma)); persons.add (ny person ("Lavery Maiss", "25 år gammal", R.drawable.lavery)); persons.add (ny person ("Lillie Watts", "35 år gammal", R.drawable.lillie)); 

Steg 4: Skapa en adapter

För att skapa en adapter som a RecyclerView kan använda, måste du förlänga RecyclerView.Adapter. Adaptern följer visa hållare designmönster, vilket innebär att du definierar en anpassad klass som sträcker sig RecyclerView.ViewHolder. Detta mönster minimerar antalet samtal till det dyrbara findViewById metod.

Tidigare i den här handledningen definierade vi redan XML-layouten för en CardView som representerar en person. Vi ska återanvända den layouten nu. Inuti konstruktören av våra egna ViewHolder, initiera de åsikter som hör till våra RecyclerView.

Public Class RVAdapter utökar RecyclerView.Adapterpublic static class PersonViewHolder utökar RecyclerView.ViewHolder CardView cv; TextView personName; TextView personAge; ImageView personPhoto; PersonViewHolder (Visa itemView) 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);  

Lägg sedan till en konstruktör på den anpassade adaptern så att den har ett handtag till de data som RecyclerView visas. Eftersom våra data finns i form av a Lista av Person objekt, använd följande kod:

Lista personer; RVAdapter (List personer) this.persons = persons; 

RecyclerView.Adapter har tre abstrakta metoder som vi måste åsidosätta. Låt oss börja med getItemCount metod. Detta bör returnera antalet objekt som finns i data. Eftersom våra data finns i form av a Lista, vi behöver bara ringa storlek metod på Lista objekt:

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

Därefter åsidosätta onCreateViewHolder metod. Som namnet antyder kallas den här metoden när den är anpassad ViewHolder måste initieras. Vi anger layouten som varje objekt i RecyclerView borde använda. Detta görs genom att blåsa upp layoutet med LayoutInflater, passerar utmatningen till konstruktören av anpassningen ViewHolder.

@Override public PersonViewHolder onCreateViewHolder (ViewGroup viewGroup, int i) Visa v = LayoutInflater.from (viewGroup.getContext ()). Uppblåsa (R.layout.item, viewGroup, false); PersonViewHolder pvh = ny PersonViewHolder (v); returnera pvh; 

Åsidosätta onBindViewHolder för att ange innehållet i varje objekt i RecyclerView. Denna metod är mycket lik den getView Metod av a Listvyadapter. I vårt exempel är här där du måste ställa in värdena för namn, ålder och fotofält i 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); 

Slutligen måste du åsidosätta onAttachedToRecyclerView metod. För tillfället kan vi helt enkelt använda superklassens implementering av denna metod som visas nedan.

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

Steg 5: Använda adaptern

Nu när adaptern är klar, lägg till följande kod till din Aktivitet att initiera och använda adaptern genom att ringa adapterns konstruktör och RecyclerView's setAdapter metod:

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

Steg 6: Kompilera och kör

När du kör RecyclerView Exempel på en Android-enhet bör du se något som liknar följande resultat.

Slutsats

I denna handledning har du lärt dig hur du använder CardView och RecyclerView widgets som introducerades i Android Lollipop. Du har också sett exempel på hur du använder dessa widgets i Material Design-appar. Observera att även om a RecyclerView kan göra nästan allt a Listvy kan, för små dataset, använda a Listvy är fortfarande föredraget eftersom det kräver färre linjer kod.

Du kan hänvisa till Android Developers Reference för mer information om CardView och RecyclerView klasser.

Och om du vill påskynda din apputveckling, glöm inte att kolla in de Android appmallar på Envato Market.