Ξεκινώντας με το 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.