Durchblättern von Seiten: Ein praktisches Tutorial zu Android ViewPager

Entdecken Sie alles über die Implementierung von Android ViewPagers in unserem neuesten Blogpost! Tauchen Sie ein in ein interaktives Tutorial, das Sie Schritt für Schritt durch die Einrichtung eines ViewPager und die Erstellung benutzerdefinierter Bildschirme mit Beispielen führt.

Was ist Android ViewPager?

Das Android ViewPager-Widget, das sich in der Support-Bibliothek befindet, ermöglicht es Benutzern, nach links oder rechts zu wischen, um einen völlig neuen Bildschirm zu sehen. Heute implementieren wir einen ViewPager mit Ansichten und PagerAdapters. Während wir dasselbe auch mit Fragmenten implementieren könnten, werden wir dies in einem späteren Tutorial besprechen. Der ViewPager verwendet einen PagerAdapter, dessen Aufgabe es ist, Ansichten für das MainActivity bereitzustellen, ähnlich wie ein ListAdapter dies für ein ListView tut.

Beispielcode für Android ViewPager

Die activity_main.xml besteht ausschließlich aus dem ViewPager, wie unten gezeigt:

        <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
        xmlns:tools="https://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

        </RelativeLayout>

MainActivity.java

MainActivity.java sieht folgendermaßen aus:

        package com.journaldev.viewpager;

        import android.support.v4.view.ViewPager;
        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;
        import android.view.Menu;
        import android.view.MenuItem;

        public class MainActivity extends AppCompatActivity {

            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);

                ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
                viewPager.setAdapter(new CustomPagerAdapter(this));
            }

        }

Die Rolle von MainActivity im obigen Code besteht einfach darin, auf den ViewPager zu verweisen und den CustomPagerAdapter festzulegen, der den PagerAdapter erweitert. Bevor wir die CustomPagerAdapter-Klasse besprechen, sehen wir uns die ModelObject-Klasse an.

Die ModelObject-Klasse

Das oben aufgeführte Enum listet alle Seiten des ViewPagers auf. Es gibt drei Seiten mit ihren jeweiligen Layouts. Das Layout einer einzelnen Seite sieht wie folgt aus:

        <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:background="@android:color/holo_blue_dark"
        android:layout_height="match_parent">

        <!-- TextViews go here -->

        </RelativeLayout>

Die verbleibenden zwei Seiten haben ähnliche Layouts und sind im Quellcode dieses Projekts enthalten.

Die CustomPagerAdapter-Klasse

        package com.journaldev.viewpager;

        import android.content.Context;
        import android.support.v4.view.PagerAdapter;
        import android.view.LayoutInflater;
        import android.view.View;
        import android.view.ViewGroup;

        public class CustomPagerAdapter extends PagerAdapter {

        // Methoden kommen hier hin

        }

1. CustomPagerAdapter(Context context): Der Konstruktor erfordert einen Kontext-Verweis. Der Kontext wird als Klassenvariable gespeichert, da er später verwendet wird, um auf einzelne Seitenvorlagen aus der Enum-Klasse zuzugreifen.

2. instantiateItem: In diesem Fall verwenden wir das Enum und blasen das spezifische Layout auf, das mit dem Enum-Wert verknüpft ist. Dann fügen wir das neu aufgeblasene Layout zur ViewGroup (Sammlung von Ansichten) hinzu, die vom PagerAdapter verwaltet wird, und geben dieses Layout dann zurück. Das von dieser Methode zurückgegebene Objekt wird später auch als zweiter Parameter in der Methode isViewFromObject verwendet.

3. destroyItem: Diese Methode entfernt eine bestimmte Ansicht aus der ViewGroup, die vom PagerAdapter verwaltet wird.

4. getCount: Es gibt einfach die Anzahl der vom ViewPager verwalteten Ansichten zurück. In diesem Beispiel entspricht es der Anzahl der Enum-Werte im Modellobjekt.

5. isViewFromObject: Diese Methode überprüft, ob ein bestimmtes Objekt zu einer bestimmten Position gehört, was recht einfach ist. Wie bereits erwähnt, ist der zweite Parameter vom Typ Object und entspricht dem Rückgabewert der Methode instantiateItem.

6. getPageTitle: An einer bestimmten Position müssen wir einen Titel an den PagerAdapter liefern. Dieser manifestiert sich normalerweise in der ActionBar als Titel der Aktivität, oder manchmal greifen Tabs auf diese Methode zu, um jede Registerkarte zu kennzeichnen. In diesem Fall haben wir es einfach zur Kennzeichnung behalten.

Das folgende Bild zeigt die App in Aktion. Damit ist das Tutorial zu Android ViewPager abgeschlossen. Sie können das Android ViewPager-Projekt über den unten stehenden Link herunterladen.

Fazit

Android ViewPager ist ein leistungsstarkes Tool zum Erstellen von Bildschirmen, die horizontal gewischt werden können. Mit der richtigen Einrichtung und der Verwendung von PagerAdapters können Entwickler ansprechende und interaktive Benutzeroberflächen erstellen.

Das war’s für heute! Wir hoffen, dass Ihnen dieses Tutorial geholfen hat, Android ViewPager besser zu verstehen und es in Ihren eigenen Projekten zu verwenden. Bis zum nächsten Mal!