Noțiuni de bază cu RecyclerView și CardView pe Android

Dacă sunteți interesat să construiți o aplicație Android care utilizează liste pentru a afișa date, Android Lollipop dispune de două widget-uri noi pentru a vă ușura viața, RecyclerView și CardView. Utilizând aceste widget-uri, este foarte ușor să oferiți aplicației dvs. un aspect și o simțire care să respecte liniile directoare menționate în specificația de proiectare materială Google.

Un loc minunat pentru a începe atunci când construiți o aplicație este să utilizați un șablon de aplicație Android. Puteți găsi sute dintre ele pe Envato Market, pentru a construi totul dintr-o aplicație YouTube într-un joc distractiv de evitare a obstacolelor. 

Sau puteți încerca acest șablon universal pentru aplicații Android, care vă oferă o bază solidă pentru crearea aproape a oricărui tip de aplicație.

Șablon universal de aplicații Android pe Envato Market

Cerințe preliminare

Pentru a continua, ar trebui să utilizați cea mai recentă versiune de Android Studio. Puteți să-l obțineți de pe site-ul Android Developer.

1. Suporta versiuni mai vechi

La momentul redactării, mai puțin de 2% dintre dispozitivele Android rulează Android Lollipop. Cu toate acestea, datorită v7 Biblioteca de suport, puteți utiliza RecyclerView și CardView widget-uri de pe dispozitive care rulează versiuni mai vechi de Android prin adăugarea următoarelor linii la dependențe în proiectul dvs. build.grade fişier:

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

2. Crearea unui a CardView

A CardView este a ViewGroup. Ca oricare alta ViewGroup, acesta poate fi adăugat la dvs. Activitate sau Fragment utilizând un fișier XML de aspect.

Pentru a crea un spațiu gol CardView, va trebui să adăugați următorul cod în aspectul XML așa cum se arată în următorul fragment:

Ca exemplu mai realist, să creăm acum LinearLayout și plasați a CardView inauntru. CardView ar putea reprezenta, de exemplu, o persoană și să conțină următoarele:

• A TextView pentru a afișa numele persoanei
• A TextView pentru a afișa vârsta persoanei
• un ImageView pentru a afișa fotografia persoanei
  

Acesta este aspectul XML:

Dacă acest XML este folosit ca aspect al unui Activitate, cu TextView și ImageView câmpurile sunt setate la valori semnificative, atunci acesta este modul în care ar face pe un dispozitiv Android:

3. Crearea unui a RecyclerView

Pasul 1: Definirea acestuia într-un aspect

Folosind un RecyclerView exemplu este ceva mai complicat. Cu toate acestea, definirea acestuia într-un fișier XML de aspect este destul de simplă. Puteți să o definiți într-un aspect după cum urmează:

Pentru a obține un mâner în ea Activitate, utilizați următorul fragment:

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

Dacă sunteți sigur că dimensiunea RecyclerView nu se va schimba, puteți adăuga următoarele pentru a îmbunătăți performanța:

rv.setHasFixedSize (true);

Pasul 2: Folosind a LayoutManager

Spre deosebire de a ListView, A RecyclerView are nevoie de a LayoutManager pentru a gestiona poziționarea elementelor sale. Puteți să vă definiți propria dvs. LayoutManager prin extinderea RecyclerView.LayoutManager clasă. Cu toate acestea, în cele mai multe cazuri, puteți utiliza pur și simplu una dintre cele predefinite LayoutManager subclase:

• LinearLayoutManager
• GridLayoutManager
• StaggeredGridLayoutManager
  

În acest tutorial, o să folosesc a LinearLayoutManager. Acest LayoutManager subclasa vă va face în mod implicit RecyclerView arata ca un ListView.

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

Pasul 3: Definirea datelor

La fel ca a ListView, A RecyclerView are nevoie de un adaptor pentru a accesa datele sale. Dar, înainte de a crea un adaptor, permiteți-ne să creăm date cu care putem lucra. Creați o clasă simplă pentru a reprezenta o persoană și apoi scrieți o metodă pentru a inițializa o Listă de Persoană obiecte:

Persoana de clasă String name; Vârstă de coarde; int photoId; Persoană (Nume șir, String age, int photoId) this.name = nume; this.age = vârstă; this.photoId = photoId;  Listă privată persoane; // Această metodă creează un ArrayList care are trei obiecte Personale // Verificați proiectul asociat acestui tutorial pe Github dacă // doriți să utilizați aceleași imagini. private void initializeData () persoane = nou ArrayList <> (); persons.add (persoană nouă ("Emma Wilson", "23 de ani", R.drawable.emma)); persons.add (persoană nouă ("Lavery Maiss", "25 de ani", R.drawable.lavery)); persons.add (persoană nouă ("Lillie Watts", "35 de ani", R.drawable.lillie)); 

Pasul 4: Crearea unui adaptor

Pentru a crea un adaptor care a RecyclerView poate utiliza, trebuie să extindeți RecyclerView.Adapter. Acest adaptor urmează vizualizator design, ceea ce înseamnă că vă definiți o clasă personalizată care se extinde RecyclerView.ViewHolder. Acest tipar minimizează numărul de apeluri către cel costisitor findViewById metodă.

Mai devreme în acest tutorial, am definit deja aspectul XML pentru a CardView care reprezintă o persoană. Vom reutiliza acum acest aspect. În interiorul constructorului obiceiului nostru ViewHolder, inițializați opiniile care aparțin obiectelor noastre RecyclerView.

public class RVAdapter extinde RecyclerView.Adapterpublic class static PersonViewHolder extinde RecyclerView.ViewHolder CardView cv; TextView personName; TextView personAge; ImageView personPhoto; PersonViewHolder (Vizualizare 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);  

Apoi, adăugați un constructor la adaptorul personalizat, astfel încât să aibă un mâner pentru datele pe care le RecyclerView display-uri. Dat fiind că datele noastre sunt sub formă de a Listă de Persoană obiecte, utilizați următorul cod:

Listă persoane; RVAdapter (Lista persoane) this.persons = persoane; 

RecyclerView.Adapter are trei metode abstracte pe care trebuie să le suprimăm. Să începem cu getItemCount metodă. Acest lucru ar trebui să returneze numărul de elemente prezente în date. Dat fiind că datele noastre sunt sub formă de a Listă, trebuie doar să sunăm mărimea metoda pe Listă obiect:

@Override public int getItemCount () retur persoane.size (); 

Apoi, ignorați onCreateViewHolder metodă. După cum sugerează și numele, această metodă este numită atunci când este personalizată ViewHolder trebuie inițializată. Specificăm structura pe care fiecare element din RecyclerView ar trebui să folosească. Acest lucru se face prin umflarea aspectului folosind LayoutInflater, trecerea producției la constructorul obișnuit ViewHolder.

@Override publică PersonViewHolder onCreateViewHolder (ViewGroup viewGroup, int i) View v = LayoutInflater.from (viewGroup.getContext ()) umfla (R.layout.item, viewGroup, false); PersonViewHolder pvh = nou personViewHolder (v); retur pvh; 

Împingeți onBindViewHolder pentru a specifica conținutul fiecărui element din RecyclerView. Această metodă este foarte asemănătoare cu getView metoda de a ListViewadaptor. În exemplul nostru, aici trebuie să setați valorile câmpurilor de nume, vârstă și fotografii din CardView.

@Overide public void peBindViewHolder (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); 

În cele din urmă, trebuie să suprascrieți onAttachedToRecyclerView metodă. Deocamdată, putem folosi pur și simplu implementarea acestei metode de către superclass după cum se arată mai jos.

@Override publice void peAttachedToRecyclerView (RecyclerView reciclerView) super.onAttachedToRecyclerView (reciclerView); 

Pasul 5: Utilizarea adaptorului

Acum, când adaptorul este gata, adăugați codul următor Activitate pentru a inițializa și utiliza adaptorul sunând la constructorul adaptorului și la RecyclerView„s setAdapter metodă:

Adaptor pentru adaptorul RVA = noul RVAdaptor (persoane); rv.setAdapter (adaptor);

Pasul 6: Compilați și executați

Când rulați RecyclerView de exemplu pe un dispozitiv Android, ar trebui să vedeți ceva similar cu rezultatul următor.

Concluzie

În acest tutorial, ați învățat cum să utilizați CardView și RecyclerView widget-uri care au fost introduse în Android Lollipop. De asemenea, ați văzut exemple de utilizare a acestor widget-uri în aplicațiile de design material. Rețineți că, deși a RecyclerView poate face aproape totul a ListView poate, pentru seturi de date mici, folosind a ListView este încă preferabilă deoarece necesită mai puține linii de cod.

Puteți consulta Referința dezvoltatorilor Android pentru mai multe informații despre CardView și RecyclerView clase.

Și dacă doriți să accelerați dezvoltarea aplicației, nu uitați să consultați aceste șabloane de aplicații Android pe Envato Market.