Advertisement
  1. Code
  2. Android Lollipop
Code

Ξεκινώντας με το RecyclerView και το CardView στο Android

by
Difficulty:IntermediateLength:LongLanguages:

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 του έργου σας:

2. Δημιουργώντας ένα CardView

Ένα CardView είναι ένα ViewGroup. Όπως οποιοδήποτε άλλο ViewGroup, μπορεί να προστεθεί στο Activity ή το Fragment σας, χρησιμοποιώντας ένα αρχείο διάταξης XML.

Για να δημιουργήσετε ένα κενό CardView, θα πρέπει να προσθέσετε τον παρακάτω κώδικα στη διάταξη XML, όπως φαίνεται το ακόλουθο απόσπασμα:

Ως ένα πιο ρεαλιστικό παράδειγμα, ας δημιουργήσουμε ένα LinearLayout και ας τοποθετήσουμε ένα CardView μέσα σε αυτό. Το CardView θα μπορούσε να αντιπροσωπεύει, για παράδειγμα, ένα άτομο και να περιλαμβάνει τα ακόλουθα:

  • ένα TextView για να εμφανίζει το όνομα του προσώπου
  • ένα TextView για να εμφανίζει την ηλικία του ατόμου
  • ένα ImageView για να εμφανιζει τη φωτογραφία του προσώπου

Η XML θα μοιάζει κάπως έτσι:

Αν αυτή η XML χρησιμοποιείται ως διάταξη ενός Activity, με τα πεδία TextView και ImageView να έχουν οριστεί σε ουσιαστικές τιμές, τότε θα εμφανιζόταν κάπως έτσι σε μια συσκευή Android:

A Stand-alone Card

3. Δημιουργώντας ένα RecyclerView

Βήμα 1: Ορίζοντάς το σε μια Διάταξη

Η χρήση ενός στιγμιοτύπου RecyclerView είναι λίγο πιο περίπλοκη. Ωστόσο, το να το ορίσουμε σε ένα αρχείο διάταξης XML είναι αρκετά απλό. Μπορείτε να το ορίσετε σε μια διάταξη ως εξής:

Για να αποκτήσετε ένα δείκτη χειρισμού σε αυτό στο Activity σας, χρησιμοποιήστε το ακόλουθο απόσπασμα:

Εάν είστε βέβαιοι ότι το μέγεθος του RecyclerView δεν θα αλλάξει, μπορείτε να προσθέσετε τα παρακάτω για να βελτιώσετε την απόδοση:

Βήμα 2: Χρήση ενός LayoutManager

Σε αντίθεση με ένα ListView, ένα RecyclerView χρειάζεται ένα LayoutManager για να διαχειριστεί την τοποθέτηση των αντικειμένου του. Θα μπορούσατε να ορίσετε το δικό σας LayoutManager επεκτείνοντας την κλάση RecyclerView.LayoutManager. Ωστόσο, στις περισσότερες περιπτώσεις, θα μπορούσατε απλά χρησιμοποιήσετε μία από τις προκαθορισμένες υποκλάσεις του LayoutManager:

  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager

Σε αυτό το tutorial, θα χρησιμοποιήσω ένα LinearLayoutManager. Αυτή η υποκλάση του LayoutManager, εκ προοιμίου, θα κάνει το RecyclerView σας να μοιάζει σαν ένα ListView.

Βήμα 3: Καθορισμός των δεδομένων

Ακριβώς όπως ένα ListView, ένα RecyclerView χρειάζεται έναν προσαρμογέα για να αποκτήσει πρόσβαση στα δεδομένα. Αλλά πριν δημιουργήσουμε έναν προσαρμογέα, ας δημιουργήσουμε δεδομένα με τα οποία μπορούμε να δουλέψουμε. Δημιουργήστε μια απλή κλάση που θα αντιπροσωπεύει ένα άτομο και στη συνέχεια γράψτε μια μέθοδο για να αρχικοποιήσετε ένα List από αντικείμενα Person:

Βήμα 4: Δημιουργία ενός Προσαρμογέα

Για να δημιουργήσετε έναν προσαρμογέα που μπορεί να χρησιμοποιήσει ένα RecyclerView, πρέπει να επεκτείνετε την RecyclerView.Adapter. Αυτός ο προσαρμογέας ακολουθεί το πρότυπο σχεδιασμού view holder, πράγμα που σημαίνει ότι μπορείτε να καθορίσετε μια προσαρμοσμένη κλάση που να επεκτείνει τηνRecyclerView.ViewHolder. Αυτό το πρότυπο ελαχιστοποιεί τον αριθμό των κλήσεων στην δαπανηρή μέθοδο findViewById.

Νωρίτερα σε αυτό το tutorial, καθορίσαμε ήδη τη διάταξη XML για ένα CardView που αντιπροσωπεύει ένα πρόσωπο. Θα ξαναχρησιμοποιήσουμε τώρα αυτή τη διάταξη. Μέσα στον κατασκευαστή του προσαρμοσμένου μας ViewHolder, αρχικοποιήσετε τις όψεις που ανήκουν στα στοιχεία του RecyclerView μας.

Στη συνέχεια, προσθέστε έναν κατασκευαστή στον προσαρμοσμένο προσαρμογέα, έτσι ώστε να έχει μια επαφή με τα δεδομένα που εμφανίζει το RecyclerView. Αφού τα δεδομένα μας είναι στη μορφή αντικειμένων List και Person, χρησιμοποιήστε τον ακόλουθο κώδικα:

To RecyclerView.Adapter έχει τρεις αφηρημένες μεθόδους που εμείς πρέπει να υποσκελίσουμε (method override). Ας αρχίσουμε με τη μέθοδο getItemCount. Αυτό θα πρέπει να επιστρέψει τον πλήθος των στοιχείων που υπάρχουν στα δεδομένα. Αφού τα δεδομένα μας είναι στη μορφή List, χρειάζεται μόνο να καλέσουμε τη μέθοδο size στο αντικείμενο τύπου List:

Στη συνέχεια, υποσκελίζουμε τη μέθοδο onCreateViewHolder.  Όπως υποδεικνύει το όνομά της, αυτή η μέθοδος καλείται όταν το προσαρμοσμένο ViewHolder πρέπει να αρχικοποιηθεί. Καθορίζουμε τη διάταξη που πρέπει να χρησιμοποιήσει κάθε στοιχείο από το RecyclerView. Αυτό γίνεται κάνοντας inflating στη διάταξη χρησιμοποιώντας το LayoutInflater, περνώντας την έξοδο στον κατασκευαστή του προσαρμοσμένου ViewHolder.

Υποσκελίστε το onBindViewHolder για να καθορίσετε τα περιεχόμενα του κάθε στοιχείου του RecyclerView. Αυτή η μέθοδος είναι παρόμοια με τη μέθοδο getView του προσαρμογέα του ListView. Στο παράδειγμά μας, εδώ είναι όπου θα πρέπει να ορίσετε τις τιμές για τα πεδία όνομα, ηλικία, και φωτογραφία του CardView.

Τέλος, θα πρέπει να υποσκελίσετε τη μέθοδο onAttachedToRecyclerView. Προς το παρόν, μπορούμε να χρησιμοποιήσουμε απλά την υλοποίηση της υπερ-κλάσης αυτής της μεθόδου όπως φαίνεται παρακάτω.

Βήμα 5: Χρήση του Προσαρμογέα

Τώρα που ο προσαρμογέας είναι έτοιμος, προσθέστε τον παρακάτω κώδικα στο Activity σας για να αρχικοποιήσετε και να χρησιμοποιήσετε τον προσαρμογέα, καλώντας τον κατασκευαστή του προσαρμογέα και τη μέθοδο setAdapter της RecyclerView:

Βήμα 6: Μεταγλώττιση και Εκτέλεση

Όταν τρέξετε το παράδειγμα RecyclerView σε μια συσκευή Android, θα πρέπει να δείτε κάτι παρόμοιο με το παρακάτω αποτέλεσμα.

Συμπέρασμα

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

Μπορείτε να ανατρέξετε στο Android Developers Reference για περισσότερες πληροφορίες πάνω στις κλάσεις CardView και RecyclerView.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.