Erste Schritte mit RecyclerView und CardView auf Android

German (Deutsch) translation by Jenyia (you can also view the original English article)

Wenn Sie daran interessiert sind, eine Android-App zu erstellen, die Listen zum Anzeigen von Daten verwendet, bietet Android Lollipop zwei neue Widgets, die Ihnen das Leben erleichtern werden: RecyclerView und CardView. Mit diesen Widgets ist es sehr einfach, Ihrer App ein Look-and-Feel zu geben, das den in der Materialdesign-Spezifikation von Google genannten Richtlinien entspricht.

Voraussetzungen

Um zu folgen, sollten Sie die neueste Version von Android Studio verwenden. Sie können es von der Android Developer Website erhalten.

1. Unterstützung der ältere Versionen

Zum Zeitpunkt des Schreibens haben weniger als 2% der Android-Geräte Android Lollipop. Dank der Support-Bibliothek von v7 können Sie die RecyclerView- und CardView-Widgets auf Geräten verwenden, auf denen ältere Versionen von Android ausgeführt werden, indem Sie die folgenden Zeilen zum Abschnitt Abhängigkeiten in der Datei build.grade Ihres Projekts hinzufügen:

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

2. Erstellung eines `CardView`

Ein CardView ist eine ViewGroup. Wie jede andere ViewGroup kann sie mit einer XML-Layoutdatei zu Ihrer Activity oder Ihrem Fragment hinzugefügt werden.

Um ein leeres CardView zu erstellen, müssten Sie Ihrem Layout-XML den folgenden Code hinzufügen, wie im folgenden Code-Schnipsel gezeigt:

<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>

Als ein realistischeres Beispiel erstellen wir jetzt ein LinearLayout und platzieren ein CardView darin. Die CardView könnte beispielsweise eine Person darstellen und Folgendes enthalten:

ein TextView, um den Namen der Person anzuzeigen
ein TextView, um das Alter der Person anzuzeigen
ein ImageView, um das Foto der Person anzuzeigen

So würde das XML aussehen:

<?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>

Wenn dieser XML-Code als Layout einer Activity verwendet wird und die TextView- und ImageView-Felder auf sinnvolle Werte festgelegt sind, wird dies auf einem Android-Gerät so dargestellt:

3. Erstellung einer `RecyclerView`

Schritt 1: Definieren Sie es in einem Layout

Die Verwendung einer RecyclerView-Instanz ist etwas komplizierter. Es ist jedoch sehr einfach, es in einer XML-Layoutdatei zu definieren. Sie können es in einem Layout wie folgt definieren:

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rv"
    />

Verwenden Sie das folgende Snippet, um in Ihrer Activity ein Handle zu erhalten:

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

Wenn Sie sicher sind, dass sich die Größe von RecyclerView nicht ändert, können Sie Folgendes hinzufügen, um die Leistung zu verbessern:

rv.setHasFixedSize(true);

Schritt 2: Verwendung eines `LayoutManagers`

Im Gegensatz zu einem ListView benötigt ein RecyclerView einen LayoutManager, um die Positionierung seiner Elemente zu verwalten. Sie könnten Ihren eigenen LayoutManager definieren, indem Sie die RecyclerView.LayoutManager-Klasse erweitern. In den meisten Fällen können Sie jedoch einfach eine der vordefinierten LayoutManager-Unterklassen verwenden:

LinearLayoutManager
GridLayoutManager
StaggeredGridLayoutManager

In diesem Tutorial werde ich einen LinearLayoutManager verwenden. Diese LayoutManager-Unterklasse lässt Ihr RecyclerView standardmäßig wie ein ListView aussehen.

LinearLayoutManager llm = new LinearLayoutManager(context);
rv.setLayoutManager(llm);

Schritt 3: Definieren der Daten

Genau wie ein ListView benötigt ein RecyclerView einen Adapter, um auf seine Daten zugreifen zu können. Aber bevor wir einen Adapter erstellen, erstellen wir Daten, mit denen wir arbeiten können. Erstellen Sie eine einfache Klasse, um eine Person darzustellen, und schreiben Sie dann eine Methode zum Initialisieren einer Liste von Person objekten:

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));
}

Tipp 4: Erstellung eines Adapters

Um einen Adapter zu erstellen, den ein RecyclerView verwenden kann, müssen Sie RecyclerView.Adapter erweitern. Dieser Adapter folgt dem Entwurfsmuster des Ansichtshalters, was bedeutet, dass Sie eine benutzerdefinierte Klasse definieren, die RecyclerView.ViewHolder erweitert. Dieses Muster minimiert die Anzahl der Aufrufe der kostspieligen findViewById-Methode.

In diesem Tutorial haben wir bereits das XML-Layout für ein CardView definiert, das eine Person darstellt. Wir werden dieses Layout jetzt wiederverwenden. Konstruieren Sie im Konstruktor unseres benutzerdefinierten ViewHolders die Ansichten, die zu den Elementen unseres RecyclerView gehören.

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);
        }
	}

}

Als Nächstes fügen Sie dem benutzerdefinierten Adapter einen Konstruktor hinzu, so dass er ein Handle für die Daten aufweist, die von der RecyclerView angezeigt werden. Da unsere Daten in Form einer List von Person objekten vorliegen, verwenden Sie den folgenden Code:

List<Person> persons;

RVAdapter(List<Person> persons){
    this.persons = persons;
}

RecyclerView.Adapter hat drei abstrakte Methoden, die wir überschreiben müssen. Beginnen wir mit der Methode getItemCount. Das sollte die Anzahl der in den Daten vorhandenen Elemente zurückgeben. Da unsere Daten in Form einer List vorliegen, müssen wir nur die size methode für das List-Objekt aufrufen:

@Override
public int getItemCount() {
    return persons.size();
}

Als nächstes überschreiben Sie die onCreateViewHolder-Methode. Wie der Name schon sagt, wird diese Methode aufgerufen, wenn der benutzerdefinierte ViewHolder initialisiert werden muss. Wir legen das Layout fest, das jedes Element von RecyclerView verwenden soll. Es geschieht durch Aufblasen des Layouts mit LayoutInflater und Übergeben der Ausgabe an den Konstruktor des benutzerdefinierten ViewHolders.

@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;
}

Überschreiben Sie den onBindViewHolder, um den Inhalt jedes Elements von RecyclerView anzugeben. Diese Methode ist der getView-Methode eines ListView-Adapters sehr ähnlich. In unserem Beispiel müssen Sie hier die Werte für den Namen, das Alter und die Fotofelder von CardView festlegen.

@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);
}

Schließlich müssen Sie die onAttachedToRecyclerView-Methode überschreiben. Fürs Erste können wir einfach die Implementierung der Superklasse wie unten gezeigt verwenden.

@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
    super.onAttachedToRecyclerView(recyclerView);
}

Schritt 5: Verwendung des Adapters

Nun, da der Adapter bereit ist, fügen Sie Ihrer Activity den folgenden Code hinzu, um den Adapter zu initialisieren und zu verwenden, indem Sie den Konstruktor des Adapters und die Methode setAdapter von RecyclerView aufrufen:

RVAdapter adapter = new RVAdapter(persons);
rv.setAdapter(adapter);

Schritt 6: Kompilieren und Ausführen

Wenn Sie das RecyclerView-Beispiel auf einem Android-Gerät ausführen, sollten Sie etwas Ähnliches wie das folgende sehen.

Schlussfolgerung

In diesem Tutorial haben Sie gelernt, wie Sie die CardView- und RecyclerView-Widgets verwenden, die in Android Lollipop eingeführt wurden. Sie haben auch Beispiele dafür gesehen, wie Sie diese Widgets in Material Design-Apps verwenden können. Beachten Sie, dass, obwohl ein RecyclerView fast alles kann, was ein ListView kann, für kleine Datensätze die Verwendung eines ListViews immer noch vorzuziehen ist, da weniger Codezeilen benötigt werden.

Weitere Informationen zu den Klassen CardView und RecyclerView finden Sie in der Android Developers Reference.