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 MarketFö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.
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.+'
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:
Textview
för att visa personens namnTextview
för att visa personens ålderImageview
för att visa personens fotoSå 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:
RecyclerView
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);
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);
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 listapersoner; // 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));
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:
Listapersoner; 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 Listvy
adapter. 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);
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);
När du kör RecyclerView
Exempel på en Android-enhet bör du se något som liknar följande resultat.
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.