Ξεκινώντας με το RecyclerView και το CardView στο Android
Greek (ελληνικά) translation by Iris Diakoumi (you can also view the original English article)
Αν σας ενδιαφέρει να δημιουργήσετε μια εφαρμογή Android που χρησιμοποιεί λίστες για να εμφανίσει δεδομένα, το Android Lollipop παρουσιάζει δύο νέα widgets για να κάνουν τη ζωή σας ευκολότερη, τα RecyclerView
και CardView
. Χρησιμοποιώντας αυτά τα widgets, είναι πολύ εύκολο να δώσετε στην εφαρμογή σας μια εμφάνιση που να συνάδει με τις οδηγίες που αναφέρονται στις προδιαγραφές Material Design της Google.
Προαπαιτούμενα
Για να ακολουθήσετε το tutorial, θα πρέπει να χρησιμοποιείτε την τελευταία έκδοση του Android Studio. Μπορείτε να το βρείτε στην ιστοσελίδα Android Developer.
1. Υποστήριξη Παλαιότερων Εκδόσεων
Κατά τη στιγμή της συγγραφής, λιγότερο από το 2% των συσκευών Android τρέχει το Android Lollipop. Ωστόσο, χάρη στη v7 Support Library, μπορείτε να χρησιμοποιήσετε τα widgets RecyclerView
και CardView
σε συσκευές που τρέχουν παλαιότερες εκδόσεις του Android, προσθέτοντας τις ακόλουθες γραμμές στην ενότητα dependencies στο αρχείο build.grade του έργου σας:
compile 'com.android.support:cardview-v7:21.0.+' compile 'com.android.support:recyclerview-v7:21.0.+'
2. Δημιουργώντας ένα CardView
Ένα CardView
είναι ένα ViewGroup
. Όπως οποιοδήποτε άλλο ViewGroup
, μπορεί να προστεθεί στο Activity
ή το Fragment
σας, χρησιμοποιώντας ένα αρχείο διάταξης XML.
Για να δημιουργήσετε ένα κενό CardView
, θα πρέπει να προσθέσετε τον παρακάτω κώδικα στη διάταξη XML, όπως φαίνεται το ακόλουθο απόσπασμα:
<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>
Ως ένα πιο ρεαλιστικό παράδειγμα, ας δημιουργήσουμε ένα LinearLayout
και ας τοποθετήσουμε ένα CardView
μέσα σε αυτό. Το CardView
θα μπορούσε να αντιπροσωπεύει, για παράδειγμα, ένα άτομο και να περιλαμβάνει τα ακόλουθα:
- ένα
TextView
για να εμφανίζει το όνομα του προσώπου - ένα
TextView
για να εμφανίζει την ηλικία του ατόμου - ένα
ImageView
για να εμφανιζει τη φωτογραφία του προσώπου
Η XML θα μοιάζει κάπως έτσι:
<?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:textSize="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>
Αν αυτή η XML χρησιμοποιείται ως διάταξη ενός Activity
, με τα πεδία TextView
και ImageView
να έχουν οριστεί σε ουσιαστικές τιμές, τότε θα εμφανιζόταν κάπως έτσι σε μια συσκευή Android:



3. Δημιουργώντας ένα RecyclerView
Βήμα 1: Ορίζοντάς το σε μια Διάταξη
Η χρήση ενός στιγμιοτύπου RecyclerView
είναι λίγο πιο περίπλοκη. Ωστόσο, το να το ορίσουμε σε ένα αρχείο διάταξης XML είναι αρκετά απλό. Μπορείτε να το ορίσετε σε μια διάταξη ως εξής:
<android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/rv" />
Για να αποκτήσετε ένα δείκτη χειρισμού σε αυτό στο Activity
σας, χρησιμοποιήστε το ακόλουθο απόσπασμα:
RecyclerView rv = (RecyclerView)findViewById(R.id.rv);
Εάν είστε βέβαιοι ότι το μέγεθος του RecyclerView
δεν θα αλλάξει, μπορείτε να προσθέσετε τα παρακάτω για να βελτιώσετε την απόδοση:
rv.setHasFixedSize(true);
Βήμα 2: Χρήση ενός LayoutManager
Σε αντίθεση με ένα ListView
, ένα RecyclerView
χρειάζεται ένα LayoutManager
για να διαχειριστεί την τοποθέτηση των αντικειμένου του. Θα μπορούσατε να ορίσετε το δικό σας LayoutManager
επεκτείνοντας την κλάση RecyclerView.LayoutManager
. Ωστόσο, στις περισσότερες περιπτώσεις, θα μπορούσατε απλά χρησιμοποιήσετε μία από τις προκαθορισμένες υποκλάσεις του LayoutManager
:
LinearLayoutManager
GridLayoutManager
-
StaggeredGridLayoutManager
Σε αυτό το tutorial, θα χρησιμοποιήσω ένα LinearLayoutManager
. Αυτή η υποκλάση του LayoutManager
, εκ προοιμίου, θα κάνει το RecyclerView
σας να μοιάζει σαν ένα ListView
.
LinearLayoutManager llm = new LinearLayoutManager(context); rv.setLayoutManager(llm);
Βήμα 3: Καθορισμός των δεδομένων
Ακριβώς όπως ένα ListView
, ένα RecyclerView
χρειάζεται έναν προσαρμογέα για να αποκτήσει πρόσβαση στα δεδομένα. Αλλά πριν δημιουργήσουμε έναν προσαρμογέα, ας δημιουργήσουμε δεδομένα με τα οποία μπορούμε να δουλέψουμε. Δημιουργήστε μια απλή κλάση που θα αντιπροσωπεύει ένα άτομο και στη συνέχεια γράψτε μια μέθοδο για να αρχικοποιήσετε ένα List
από αντικείμενα Person
:
class Person { String name; String age; int photoId; Person(String name, String age, int photoId) { this.name = name; this.age = age; this.photoId = photoId; } } private List<Person> persons; // This method creates an ArrayList that has three Person objects // Checkout the project associated with this tutorial on Github if // you want to use the same images. private void initializeData(){ persons = new ArrayList<>(); persons.add(new Person("Emma Wilson", "23 years old", R.drawable.emma)); persons.add(new Person("Lavery Maiss", "25 years old", R.drawable.lavery)); persons.add(new Person("Lillie Watts", "35 years old", R.drawable.lillie)); }
Βήμα 4: Δημιουργία ενός Προσαρμογέα
Για να δημιουργήσετε έναν προσαρμογέα που μπορεί να χρησιμοποιήσει ένα RecyclerView
, πρέπει να επεκτείνετε την RecyclerView.Adapter
. Αυτός ο προσαρμογέας ακολουθεί το πρότυπο σχεδιασμού view holder, πράγμα που σημαίνει ότι μπορείτε να καθορίσετε μια προσαρμοσμένη κλάση που να επεκτείνει τηνRecyclerView.ViewHolder
. Αυτό το πρότυπο ελαχιστοποιεί τον αριθμό των κλήσεων στην δαπανηρή μέθοδο findViewById
.
Νωρίτερα σε αυτό το tutorial, καθορίσαμε ήδη τη διάταξη XML για ένα CardView
που αντιπροσωπεύει ένα πρόσωπο. Θα ξαναχρησιμοποιήσουμε τώρα αυτή τη διάταξη. Μέσα στον κατασκευαστή του προσαρμοσμένου μας ViewHolder
, αρχικοποιήσετε τις όψεις που ανήκουν στα στοιχεία του RecyclerView
μας.
public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder>{ public static class PersonViewHolder extends RecyclerView.ViewHolder { CardView cv; TextView personName; TextView personAge; ImageView personPhoto; PersonViewHolder(View 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); } } }
Στη συνέχεια, προσθέστε έναν κατασκευαστή στον προσαρμοσμένο προσαρμογέα, έτσι ώστε να έχει μια επαφή με τα δεδομένα που εμφανίζει το RecyclerView
. Αφού τα δεδομένα μας είναι στη μορφή αντικειμένων List
και Person
, χρησιμοποιήστε τον ακόλουθο κώδικα:
List<Person> persons; RVAdapter(List<Person> persons){ this.persons = persons; }
To RecyclerView.Adapter
έχει τρεις αφηρημένες μεθόδους που εμείς πρέπει να υποσκελίσουμε (method override). Ας αρχίσουμε με τη μέθοδο getItemCount
. Αυτό θα πρέπει να επιστρέψει τον πλήθος των στοιχείων που υπάρχουν στα δεδομένα. Αφού τα δεδομένα μας είναι στη μορφή List
, χρειάζεται μόνο να καλέσουμε τη μέθοδο size
στο αντικείμενο τύπου List
:
@Override public int getItemCount() { return persons.size(); }
Στη συνέχεια, υποσκελίζουμε τη μέθοδο onCreateViewHolder
. Όπως υποδεικνύει το όνομά της, αυτή η μέθοδος καλείται όταν το προσαρμοσμένο ViewHolder
πρέπει να αρχικοποιηθεί. Καθορίζουμε τη διάταξη που πρέπει να χρησιμοποιήσει κάθε στοιχείο από το RecyclerView
. Αυτό γίνεται κάνοντας inflating στη διάταξη χρησιμοποιώντας το LayoutInflater
, περνώντας την έξοδο στον κατασκευαστή του προσαρμοσμένου ViewHolder
.
@Override public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false); PersonViewHolder pvh = new PersonViewHolder(v); return pvh; }
Υποσκελίστε το onBindViewHolder
για να καθορίσετε τα περιεχόμενα του κάθε στοιχείου του RecyclerView
. Αυτή η μέθοδος είναι παρόμοια με τη μέθοδο getView
του προσαρμογέα του ListView
. Στο παράδειγμά μας, εδώ είναι όπου θα πρέπει να ορίσετε τις τιμές για τα πεδία όνομα, ηλικία, και φωτογραφία του 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); }
Τέλος, θα πρέπει να υποσκελίσετε τη μέθοδο onAttachedToRecyclerView
. Προς το παρόν, μπορούμε να χρησιμοποιήσουμε απλά την υλοποίηση της υπερ-κλάσης αυτής της μεθόδου όπως φαίνεται παρακάτω.
@Override public void onAttachedToRecyclerView(RecyclerView recyclerView) { super.onAttachedToRecyclerView(recyclerView); }
Βήμα 5: Χρήση του Προσαρμογέα
Τώρα που ο προσαρμογέας είναι έτοιμος, προσθέστε τον παρακάτω κώδικα στο Activity
σας για να αρχικοποιήσετε και να χρησιμοποιήσετε τον προσαρμογέα, καλώντας τον κατασκευαστή του προσαρμογέα και τη μέθοδο setAdapter
της RecyclerView
:
RVAdapter adapter = new RVAdapter(persons); rv.setAdapter(adapter);
Βήμα 6: Μεταγλώττιση και Εκτέλεση
Όταν τρέξετε το παράδειγμα RecyclerView
σε μια συσκευή Android, θα πρέπει να δείτε κάτι παρόμοιο με το παρακάτω αποτέλεσμα.



Συμπέρασμα
Σε αυτό το tutorial, μάθατε πώς να χρησιμοποιείτε τα widgets CardView
και RecyclerView
που έχουν εισαχθεί στο Android Lollipop. Είδατε επίσης παραδείγματα για το πώς να χρησιμοποιήσετε αυτά τα widgets σε εφαρμογές Material Design. Έχετε υπόψη, ότι παρόλο που ένα RecyclerView
μπορεί να κάνει σχεδόν ότι και ένα ListView
, για μικρά σετ δεδομένων, η χρήση του ListView
είναι προτιμότερη αφού απαιτεί λιγότερες γραμμές κώδικα.
Μπορείτε να ανατρέξετε στο Android Developers Reference για περισσότερες πληροφορίες πάνω στις κλάσεις CardView
και RecyclerView
.