Erstellen von Onboarding-Bildschirmen für Android-Anwendungen

Einführung

Es braucht kein Genie, um herauszufinden, dass eine App, mit der sich neue Benutzer willkommen und wohl fühlen, wahrscheinlich viel beliebter ist als eine App, die sie verloren und verwirrt macht. Infolgedessen gibt es heutzutage viele Entwickler, die versuchen, ihren Benutzern ein gutes Onboarding-Erlebnis zu bieten.

Wenn Sie eine innovative App entwickeln, deren Funktionen und Verwendungszwecke für neue Benutzer möglicherweise nicht offensichtlich sind, sollten Sie erwägen, Ihrer App einige Onboarding-Bildschirme hinzuzufügen. In diesem Tutorial zeige ich Ihnen eine einfache Möglichkeit, solche Bildschirme schnell zu erstellen und zu Ihrer Android-App hinzuzufügen.

1. Fügen Sie Gradle-Abhängigkeiten hinzu

Fügen Sie zuerst die hinzu Material Design Library wie ein compile Sucht nach build.gradle Datei von App Modul, damit Sie die UI-Elemente von Android L in älteren Versionen von Android verwenden können.

Fügen Sie dann a hinzu compile Sucht nach SmartTabLayout
, eine Bibliothek, die ein benutzerdefiniertes Titelstreifenelement für das bietet ViewPager Komponente.

Wir werden auch Klassen verwenden, die zur Android Support v4-Bibliothek gehören. Sie müssen es jedoch nicht manuell hinzufügen, da Android Studio es standardmäßig hinzufügt.

2. Definieren Sie das Layout der Integration Activity

Die Integration Activity ist für die Anzeige aller Integrationsbildschirme verantwortlich. Deshalb dies Activity wird die folgenden Widgets haben:

  • EIN ViewPager Instanz, mit der Benutzer mit der Wischgeste zwischen Onboarding-Bildschirmen wechseln können.
  • EIN ButtonFlat beschriftet SpringenSo können ungeduldige Benutzer den Onboarding-Prozess überspringen.
  • EIN ButtonFlat beschriftet Nächster, der den Benutzer zum nächsten Startbildschirm führt.
  • EIN SmartTabLayout Dies dient als Seitenanzeige für die ViewPager Komponente.

Nach dem Platzieren dieser Widgets in einem RelativeLayout und durch Positionieren den Code in der XML-Integrationslayoutdatei Activity sollte so aussehen:

Sie können das Layout jederzeit an Ihre Vorlieben anpassen. Ich werde diese Layoutdatei aufrufen activity_onboarding.xml.

3. Definieren Sie das Layout der Integrationsbildschirme

Für dieses Tutorial erstellen Sie drei Onboarding-Bildschirme. Um das Tutorial zu vereinfachen, haben die Bildschirme nur zwei TextView Widgets. In einer echten App sollten Sie sich auch bemühen, die Onboarding-Bildschirme so einfach wie möglich zu halten, um zu verhindern, dass neue Benutzer beim ersten Öffnen Ihrer App überfordert werden.

Die Layout-XML-Datei für den ersten Bildschirm wird benannt onboarding_screen1.xml und hat folgenden Inhalt:

Verwenden Sie dasselbe XML in den Layoutdateien der beiden anderen Bildschirme und benennen Sie sie onboarding_screen2.xml und onboarding_screen3.xml. Natürlich muss man das ändern text jedermanns Eigentum TextView Widget, so dass jeder Integrationsbildschirm einzigartig ist.

4. Erstellen Sie eine Fragment für jeden Integrationsbildschirm

Erstellen Sie eine neue Java-Klasse und benennen Sie sie OnboardingFragment1.java. Machen Sie es zu einer Unterklasse von Fragment und ersetzen seine onCreateView Methode. Dann rufen Sie die inflate Methode zum Erstellen eines View mit dem Layout, das wir in definiert haben onboarding_screen1.xml und senden Sie es zurück View. Ihre Klasse sollte folgendermaßen aussehen:

das Fragment Ihr erster Onboarding-Bildschirm ist jetzt fertig. Gehen Sie genauso vor, um zwei weitere zu erstellen Fragment Unterklassen, OnboardingFragment2.java und OnboardingFragment3.java, die die in onboarding_screen2.xml und onboarding_screen3.xml beziehungsweise.

5. Erstellen Sie die Integration Activity

Erstellen Sie eine neue Java-Klasse und benennen Sie sie OnboardingActivity.java. Machen Sie es zu einer Unterklasse von FragmentActivity und ersetzen seine onCreate Methode.

Dann deklarieren Sie a ViewPager, ein SmartTabLayout, Und zwei ButtonFlat Widgets als Klassenmitgliedsvariablen.

in dem onCreate Methode, aufrufen setContentView um das in definierte Layout anzuzeigen activity_onboarding.xml und benutze die findViewById Methode zum Initialisieren von Mitgliedsvariablen.

Sie müssen jetzt eine erstellen FragmentStatePagerAdapter dass die ViewPager kann verwendet werden, um Integrationsbildschirme anzuzeigen. Erstellen Sie eine neue Typvariable FragmentStatePagerAdapter und nenne es Adapter. Initialisieren Sie es, indem Sie das Ergebnis von übergeben getSupportFragmentManager Methode zu seinem Konstruktor. Da dies eine abstrakte Klasse ist, generiert Android Studio automatisch Code für die abstrakten Methoden, wie unten gezeigt.

in dem getCount Methode, gibt die Anzahl der Integrationsbildschirme zurück.

Füge eins hinzu switch Erklärung an die getItem Methode, um die richtige zurückzugeben Fragment basierend auf dem Wert von position.

Immer noch in der onCreate Methode, assoziieren die FragmentStatePagerAdapter mit dem ViewPager indem Sie die anrufen setAdapter Methode.

Nun, da die ViewPager ist bereit, zeigen Sie es SmartTabLayout zu ihm durch den Anruf der setViewPager Methode.

Jetzt ist es an der Zeit, Klick-Manager zum hinzuzufügen ButtonFlat Widgets. Sie können dies mit dem tun setOnClickListener Methode, eine neue Instanz von übergeben View.OnClickListener Klasse dazu.

Im Manager von skip Schaltfläche, rufen Sie eine benannte Methode auf finishOnboarding. Wir werden diese Methode im nächsten Schritt implementieren.

Im Manager von next Taste benutzen setCurrentItem auf die gleiche Weise getCurrentItem um zum nächsten Startbildschirm zu gelangen. Auch wenn getCurrentItem Gibt den letzten Integrationsbildschirm zurück und ruft eine benannte Methode auf finishOnboarding. Wir werden diese Methode gleich implementieren.

Der Code für die Schaltflächenhandler sollte folgendermaßen aussehen:

Möglicherweise möchten Sie einige Änderungen am Integrationslayout vornehmen Activity, wie die Entfernung von skip und ändern Sie den Wortlaut der next Taste für Fertig wenn der Benutzer den letzten Onboarding-Bildschirm erreicht. Sie können dies tun, indem Sie a hinzufügen SimpleOnPageChangeListener zum SmartTabLayout und überschreibe seine onPageSelected Methode.

6. Ende der Integrationserfahrung

Wenn der Benutzer alle Onboarding-Bildschirme gesehen oder ignoriert hat, sollten Sie die Onboarding-Erfahrung beenden, indem Sie die finishOnboarding Methode (dies ist der Name, den wir im vorherigen Schritt verwendet haben).

in dem finishOnboarding Methode, erhalten Sie einen Verweis auf die SharedPreferences Objekt der Anwendung und definieren a boolean für den Schlüssel onboarding_complete beim true Verwendung der putBoolean Methode. Wir werden diesen Schlüssel im nächsten Schritt verwenden, um sicherzustellen, dass Benutzer Onboarding-Bildschirme nur sehen, wenn sie den Onboarding-Prozess nicht abgeschlossen haben.

Dann erstellen Sie eine neue Intent und ruf ihn an startActivity Methode zum Starten der Haupt Activity (das Activity die sich öffnen soll, wenn der Benutzer auf das App-Symbol klickt).

Rufen Sie zum Schluss an finish schließen OnboardingActivity. Dies ist, was die Implementierung von finishOnboarding Die Methode sollte folgendermaßen aussehen:

7. Beginn der Integration Activity

Die Integration Activity sollte so schnell wie möglich gestartet werden, wenn ein Benutzer, der den Onboarding-Vorgang nicht abgeschlossen hat, die App öffnet. Dies bedeutet, dass Sie den Code hinzufügen, um neue Benutzer zu erkennen und zu starten OnboardingActivity in dem onCreate Hauptmethode Ihrer Bewerbung Activity.

Durch Überprüfen, ob die SharedPreferences Das Objekt hat einen Schlüssel namens onboarding_complete dessen Wert ist truekönnen Sie feststellen, ob der Benutzer den Onboarding-Vorgang abgeschlossen hat. Wenn der Wert des Schlüssels ist falseSchließen Sie die Hauptleitung Activity sofort und erstellen Sie eine neue Intent Lancer OnboardingActivity. Schauen Sie sich den folgenden Codeblock an, um dieses Konzept besser zu verstehen.

8. Aktualisieren Sie das App-Manifest

Wenn Sie es noch nicht getan haben, erklären Sie es OnboardingActivity im Anwendungsmanifest.

9. Kompilieren und ausführen

Sie können Ihre App jetzt kompilieren und auf einem Android-Gerät ausführen. Da dies Ihr erster Lauf ist, sollten Sie die Onboarding-Bildschirme anstelle des Hauptbildschirms sehen Activity.

Fazit

In diesem Tutorial haben Sie gelernt, wie Sie einfache Onboarding-Bildschirme erstellen und zu Ihrer Android-App hinzufügen. Verwenden Sie diese Bildschirme, um Fragen sehr kurz zu beantworten, z. B. was Ihre Anwendung kann und wann sie verwendet werden sollte.

Für eine optimale Benutzererfahrung sollte der Onboarding-Prozess so kurz wie möglich sein und der Benutzer sollte ihn jederzeit überspringen können.

verbunden :  So erhalten Sie tägliche Fotos von Bing als Hintergrundbild für Android
Moyens Staff
Moyens I/O-Personal. motivierte Sie und gab Ratschläge zu Technologie, persönlicher Entwicklung, Lebensstil und Strategien, die Ihnen helfen werden.