Dynamische Listen mit RecyclerView erstellen Teil von Android Jetpack

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie in „Compose“ mit Layouts arbeiten.
<ph type="x-smartling-placeholder"></ph> Lazy Listen und Raster →

RecyclerView vereinfacht die effiziente Darstellung großer Datenmengen. Sie liefern und definieren das Aussehen jedes Artikels sowie die RecyclerView-Bibliothek erstellt die Elemente dynamisch, wenn sie benötigt werden.

Wie der Name schon sagt, werden diese einzelnen Elemente von RecyclerView recycelt. Wenn ein aus dem Bildschirm scrollt, zerstört RecyclerView seine Ansicht nicht. Stattdessen RecyclerView verwendet die Ansicht für neue Elemente, die auf dem Bildschirm gescrollt haben. RecyclerView verbessert die Leistung und Reaktionsfähigkeit Ihrer App senkt den Stromverbrauch.

Schlüsselklassen

Mehrere Klassen arbeiten zusammen, um Ihre dynamische Liste zu erstellen.

  • RecyclerView ist die ViewGroup mit den Ansichten. die Ihren Daten entsprechen. Da es sich um eine Ansicht handelt, fügen Sie RecyclerView hinzu. auf die gleiche Weise, wie Sie jedes andere UI-Element hinzufügen würden.

  • Jedes einzelne Element in der Liste wird durch ein Inhaberobjekt für die Datenansicht definiert. Wann? wenn der Ansichtsinhaber erstellt wird, sind ihm keine Daten zugeordnet. Nachher wenn der Ansichtsinhaber erstellt wird, bindet RecyclerView ihn an seine Daten. Ich Ansichtshalter definieren, indem Sie RecyclerView.ViewHolder

  • Der RecyclerView fordert Ansichten an und bindet die Ansichten an die Daten. durch Aufrufen von Methoden im adapter. Sie definieren den Adapter, indem Sie RecyclerView.Adapter

  • Im Layout-Manager werden die einzelnen Elemente in der Liste angeordnet. Sie können Layout-Manager der RecyclerView-Bibliothek verwenden oder Ihre eigenen definieren können. Layout-Manager basieren alle auf den LayoutManager abstrakte Klasse.

In der Beispiel-App „RecyclerView“ sehen Sie, wie alle Teile zusammenpassen. (Kotlin) oder Beispiel-App „RecyclerView“ (Java)

Schritte zur Implementierung von RecyclerView

Wenn Sie RecyclerView verwenden möchten, müssen Sie einige Dinge beachten. Sie werden in den folgenden Abschnitten ausführlich erläutert.

  1. Legen Sie fest, wie die Liste oder das Raster aussehen soll. Normalerweise können Sie einen der Standard-Layout-Manager der RecyclerView-Bibliothek verwenden

  2. Gestalten Sie das Aussehen und die Funktionsweise der einzelnen Elemente in der Liste. Basierend auf in diesem Design die ViewHolder-Klasse erweitern. Deine Version von ViewHolder bietet alle Funktionen für Listenelemente. Ihr Inhaber für Datenansichten ist ein Wrapper um ein View-Element, und diese Ansicht wird von RecyclerView verwaltet.

  3. Definieren Sie die Adapter, die Ihre Daten mit den ViewHolder-Datenansichten verknüpft.

Es gibt auch erweiterte Anpassungen Optionen, mit denen Sie Ihr RecyclerView genau an Ihre Bedürfnisse anpassen.

Layout planen

Die Artikel in RecyclerView sind nach LayoutManager . Die RecyclerView-Bibliothek bietet drei Layout-Manager, die häufigsten Layout-Situationen:

  • LinearLayoutManager Ordnet die Elemente in einer eindimensionalen Liste an.
  • GridLayoutManager Ordnet die Elemente in einem zweidimensionalen Raster an: <ph type="x-smartling-placeholder">
      </ph>
    • Ist das Raster vertikal angeordnet, versucht GridLayoutManager, Die Elemente in jeder Zeile haben dieselbe Breite und Höhe, aber unterschiedliche Zeilen unterschiedliche Höhen haben.
    • Ist das Raster horizontal angeordnet, versucht GridLayoutManager, Die Elemente in jeder Spalte haben dieselbe Breite und Höhe, aber unterschiedliche Spalten können unterschiedliche Breiten haben.
  • StaggeredGridLayoutManager ähnelt GridLayoutManager, erfordert jedoch nicht, dass Elemente in einem Zeile hat dieselbe Höhe (bei vertikalen Rastern) oder Elemente in derselben Spalte dieselbe Breite haben (bei horizontalen Rastern). Das führt dazu, dass die Elemente in einer Zeile oder Spalte können am Ende offen zueinander verschoben werden.

Außerdem müssen Sie das Layout der einzelnen Elemente entwerfen. Das brauchst du -Layout bei der Gestaltung des Ansichthalters, wie im nächsten Abschnitt beschrieben.

Adapter und Halterung für Datenansichten implementieren

Nachdem du das Layout bestimmt hast, musst du Adapter implementieren und ViewHolder. Diese beiden Klassen arbeiten zusammen, um zu definieren, wie Ihre Daten angezeigt. Die ViewHolder ist ein Wrapper um eine View, die den für ein einzelnes Element in der Liste. Adapter erstellt ViewHolder und legt auch die Daten für diese Ansichten fest. Der Prozess der Das Verknüpfen von Ansichten mit Daten wird als Bindung bezeichnet.

Wenn Sie Ihren Adapter definieren, werden drei Schlüsselmethoden überschrieben:

  • onCreateViewHolder(): RecyclerView ruft diese Methode immer dann auf, muss eine neue ViewHolder erstellen. Die Methode erstellt und initialisiert die ViewHolder und die zugehörigen View, füllt aber nicht den Wert der Ansicht aus Inhalt: Die ViewHolder wurde noch nicht an bestimmte Daten gebunden.

  • onBindViewHolder(): RecyclerView ruft diese Methode auf, um eine ViewHolder mit Daten zu verknüpfen. Die ruft die entsprechenden Daten ab und füllt mit den Daten die Ansicht. Halterung verwendet. Wenn beispielsweise RecyclerView eine Liste mit Namen anzeigt, kann die Methode den entsprechenden Namen in der Liste finden und die Ansicht ausfüllen TextView-Widget des Inhabers.

  • getItemCount(): RecyclerView ruft diese Methode auf, um die Größe des Datasets abzurufen. Beispiel: in einer Adressbuch-App kann dies die Gesamtzahl der Adressen sein. RecyclerView ermittelt damit, wann keine Elemente mehr vorhanden sind, angezeigt.

Hier ist ein typisches Beispiel für einen einfachen Adapter mit einem verschachtelten ViewHolder, zeigt eine Liste mit Daten an. In diesem Fall zeigt RecyclerView eine einfache Liste von Textelementen. Dem Adapter wird ein Array von Strings übergeben, die den Text enthalten für die ViewHolder-Elemente.

Kotlin


class CustomAdapter(private val dataSet: Array<String>) :
        RecyclerView.Adapter<CustomAdapter.ViewHolder>() {

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder)
     */
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView

        init {
            // Define click listener for the ViewHolder's View
            textView = view.findViewById(R.id.textView)
        }
    }

    // Create new views (invoked by the layout manager)
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        // Create a new view, which defines the UI of the list item
        val view = LayoutInflater.from(viewGroup.context)
                .inflate(R.layout.text_row_item, viewGroup, false)

        return ViewHolder(view)
    }

    // Replace the contents of a view (invoked by the layout manager)
    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.textView.text = dataSet[position]
    }

    // Return the size of your dataset (invoked by the layout manager)
    override fun getItemCount() = dataSet.size

}

Java


public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder> {

    private String[] localDataSet;

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder)
     */
    public static class ViewHolder extends RecyclerView.ViewHolder {
        private final TextView textView;

        public ViewHolder(View view) {
            super(view);
            // Define click listener for the ViewHolder's View

            textView = (TextView) view.findViewById(R.id.textView);
        }

        public TextView getTextView() {
            return textView;
        }
    }

    /**
     * Initialize the dataset of the Adapter
     *
     * @param dataSet String[] containing the data to populate views to be used
     * by RecyclerView
     */
    public CustomAdapter(String[] dataSet) {
        localDataSet = dataSet;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        // Create a new view, which defines the UI of the list item
        View view = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.text_row_item, viewGroup, false);

        return new ViewHolder(view);
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, final int position) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.getTextView().setText(localDataSet[position]);
    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return localDataSet.length;
    }
}

Das Layout für jedes Ansichtselement wird wie gewohnt in einer XML-Layoutdatei definiert. In diesem Fall hat die Anwendung eine text_row_item.xml-Datei wie diese:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/list_item_height"
    android:layout_marginLeft="@dimen/margin_medium"
    android:layout_marginRight="@dimen/margin_medium"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/element_text"/>
</FrameLayout>

Nächste Schritte

Das folgende Code-Snippet zeigt, wie Sie RecyclerView verwenden können.

Kotlin


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val dataset = arrayOf("January", "February", "March")
        val customAdapter = CustomAdapter(dataset)

        val recyclerView: RecyclerView = findViewById(R.id.recycler_view)
        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = customAdapter

    }

}

Java


RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.layoutManager = new LinearLayoutManager(this)
recyclerView.setAdapter(customAdapter);

Die Bibliothek bietet auch viele Möglichkeiten, Ihre Implementierung anzupassen. Weitere Informationen Weitere Informationen zu Advanced RecyclerView. Anpassung.

Weitere Informationen

Weitere Informationen zu Tests unter Android finden Sie in den folgenden Ressourcen.

Beispiel-Apps