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.