Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android Lollipop
Code

Erste Schritte mit RecyclerView und CardView auf Android

by
Difficulty:IntermediateLength:LongLanguages:

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:

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:

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:

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:

A Stand-alone Card

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:

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

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

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.

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:

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.

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:

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:

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.

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

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

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:

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.


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