Freigeben über


ViewPager

ViewPager ist ein Layout-Manager, mit dem Sie gesturale Navigation implementieren können. Gesturale Navigation ermöglicht es dem Benutzer, nach links und rechts zu wischen, um Seiten mit Daten zu durchlaufen. In diesem Handbuch wird erläutert, wie gesturale Navigation mit ViewPager mit und ohne Fragmente implementiert wird. Außerdem wird beschrieben, wie Seitenindikatoren mithilfe von PagerTitleStrip und PagerTabStrip hinzugefügt werden.

Übersicht

Ein gängiges Szenario bei der App-Entwicklung ist die Notwendigkeit, Benutzern gesturale Navigation zwischen gleichgeordneten Ansichten bereitzustellen. Bei diesem Ansatz wischen benutzer nach links oder rechts, um auf Inhaltsseiten zuzugreifen (z. B. in einem Setup-Assistenten oder einer Bildschirmpräsentation). Sie können diese Streifansichten mithilfe des Widgets erstellen, das ViewPager in der Android-Supportbibliothek v4 verfügbar ist. Dies ViewPager ist ein Layout-Widget, das aus mehreren untergeordneten Ansichten besteht, wobei jede untergeordnete Ansicht eine Seite im Layout darstellt:

Screenshots der TreePager-App mit horizontaler Wischbewegung

ViewPager Wird in der Regel in Verbindung mit Fragmenten verwendet. Es gibt jedoch einige Situationen, in denen Sie möglicherweise ohne die zusätzliche Komplexität von Fragments verwenden ViewPager möchten.

ViewPager verwendet ein Adaptermuster, um es mit den anzuzeigenden Ansichten bereitzustellen. Der hier verwendete Adapter ähnelt dem konzeptuellen, das von RecyclerView verwendet wird. Sie stellen eine Implementierung bereit, um PagerAdapter die Seiten zu generieren, die dem ViewPager Benutzer angezeigt werden. Die angezeigten ViewPager Seiten können s oder Fragments seinView. Wenn Views angezeigt wird, unterklassigt PagerAdapter die Adapter-Unterklassen der Android-Basisklasse. Wenn Fragments angezeigt wird, unterklassigt FragmentPagerAdapterder Adapter Android. Die Android-Supportbibliothek enthält FragmentPagerAdapter auch (eine Unterklasse von PagerAdapter) zur Unterstützung der Details der Verbindung Fragmentmit Daten.

In diesem Leitfaden werden beide Ansätze veranschaulicht:

  • In Viewpager mit Views wird eine TreePager App entwickelt, um zu veranschaulichen, wie ViewPager Ansichten eines Baumkatalogs angezeigt werden (eine Bildergalerie von Laub- und Immergrünenbäumen). PagerTabStrip und PagerTitleStrip werden verwendet, um Titel anzuzeigen, die bei der Seitennavigation helfen.

  • In Viewpager mit Fragmenten wird eine etwas komplexere FlashCardPager-App entwickelt, um zu veranschaulichen, wie ViewPager Sie mit Fragments eine App erstellen, die mathematische Probleme als Flash-Karte darstellt und auf Benutzereingaben reagiert.

Anforderungen

Um es in Ihrem App-Projekt zu verwenden ViewPager , müssen Sie das Android-Supportbibliothek v4-Paket installieren. Weitere Informationen zum Installieren von NuGet-Paketen finden Sie unter Walkthrough: Including a NuGet in your project.

Aufbau

Drei Komponenten werden für die Implementierung der gesturalen Navigation mit ViewPager:

  • ViewPager
  • Adapter
  • Pager-Indikator

Jede dieser Komponenten wird unten zusammengefasst.

ViewPager

ViewPager ist ein Layout-Manager, der jeweils eine Sammlung von Views anzeigt. Der Auftrag besteht darin, die Streifbewegung des Benutzers zu erkennen und nach Bedarf zur nächsten oder vorherigen Ansicht zu navigieren. Der folgende Screenshot zeigt beispielsweise einen ViewPager Übergang von einem Bild zum nächsten als Reaktion auf eine Benutzergeste:

Schließen der TreePager-App, die einen Übergang zwischen Ansichten anzeigt

Adapter

ViewPager Ruft seine Daten von einem Adapter ab. Der Auftrag des Adapters besteht darin, die Viewangezeigten Elemente nach ViewPagerBedarf zu erstellen. Das folgende Diagramm veranschaulicht dieses Konzept – der Adapter erstellt und füllt Views auf und stellt sie zur ViewPagerVerfügung. Da die ViewPager Streifgesten des Benutzers erkannt werden, fordert er den Adapter auf, die entsprechende View Anzeige bereitzustellen:

Diagramm, das zeigt, wie der Adapter Bilder und Namen mit viewPager verbindet

In diesem speziellen Beispiel wird jedes View aus einem Strukturbild und einem Baumnamen erstellt, bevor es an die ViewPagerDatei übergeben wird.

Pager-Indikator

ViewPager kann verwendet werden, um einen großen Datensatz anzuzeigen (z. B. kann eine Bildergalerie Hunderte von Bildern enthalten). Um dem Benutzer bei der Navigation großer Datasets zu helfen, ViewPager wird häufig ein Pagerindikator mit einer Zeichenfolge begleitet. Die Zeichenfolge kann der Bildtitel, ein Untertitel oder einfach die Position der aktuellen Ansicht innerhalb des Datasets sein.

Es gibt zwei Ansichten, die diese Navigationsinformationen für Sie erzeugen können: PagerTabStrip Und PagerTitleStrip. jede zeigt eine Zeichenfolge am oberen Rand eines ViewPager, und jeder zieht seine Daten aus dem ViewPagerAdapter , sodass sie immer mit der aktuell angezeigten Viewsynchronisiert bleibt. Der Unterschied zwischen ihnen besteht darin, dass PagerTabStrip ein visueller Indikator für die "aktuelle" Zeichenfolge enthalten ist, während PagerTitleStrip dies nicht der Fall ist (wie in diesen Screenshots dargestellt):

Screenshots der TreePager-App mit PagerTitleStrip und PagerTabStrip

In diesem Handbuch wird veranschaulicht, wie Sie Komponenten ViewPagerder Gestiknavigation, Adapter und Indikator-App implementieren und integrieren.