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

Kotlin Reactive Programming für einen Android-Anmeldebildschirm

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

RxJava 2.0 ist eine beliebte reaktive Programmierbibliothek, mit der unzählige Android-Entwickler äußerst reaktionsschnelle Apps mit weniger Code und weniger Komplexität erstellen konnten, insbesondere bei der Verwaltung mehrerer Threads.

Wenn Sie einer der vielen Entwickler sind, die zu Kotlin gewechselt sind, bedeutet dies nicht, dass Sie RxJava aufgeben müssen!

Im ersten Teil dieser Serie habe ich Ihnen gezeigt, wie Sie von der Programmierung mit RxJava 2.0 in Java zur Programmierung mit RxJava in Kotlin übergehen. Wir haben uns auch damit befasst, wie Sie Boilerplate aus Ihren Projekten verbannen können, indem Sie die Erweiterungsfunktionen von RxKotlin nutzen, und das Geheimnis, um dem SAM-Konvertierungsproblem auszuweichen, auf das viele Entwickler stoßen, wenn sie RxJava 2.0 zum ersten Mal mit Kotlin verwenden.

In diesem zweiten Teil konzentrieren wir uns darauf, wie RxJava bei der Lösung der Probleme helfen kann, die in realen Android-Projekten auftreten, indem wir eine reaktive Android-Anwendung mit RxJava 2.0, RxAndroid und RxBinding erstellen.

Wie kann ich RxJava in realen Projekten verwenden?

In unserem Artikel Reaktive Programmierung mit RxJava und RxKotlin haben wir einige einfache Observables und Observers erstellt, die Daten auf dem Logcat von Android Studio drucken. In der realen Welt wird RxJava jedoch nicht so verwendet.

In diesem Artikel werde ich Ihnen zeigen, wie Sie mit RxJava einen Bildschirm erstellen, der in unzähligen Android-Anwendungen verwendet wird: den klassischen Anmelden-Bildschirm.

A typical Sign Up screen that youll find in countless Android applicationsA typical Sign Up screen that youll find in countless Android applicationsA typical Sign Up screen that youll find in countless Android applications

Wenn Ihre App irgendeine Art von Anmeldungserfahrung hat, gelten in der Regel strenge Regeln für die Art der akzeptierten Informationen. Beispielsweise muss das Kennwort möglicherweise eine bestimmte Anzahl von Zeichen überschreiten, oder die E-Mail-Adresse muss in einem gültigen E-Mail-Format vorliegen.

Sie können zwar die Benutzereingaben überprüfen, sobald sie auf die Schaltfläche Anmelden klicken, dies ist jedoch nicht die beste Benutzererfahrung, da sie Informationen übermitteln können, die von Ihrer Bewerbung eindeutig nie akzeptiert werden.

Es ist weitaus besser, den Benutzer während der Eingabe zu überwachen und ihm dann ein Heads-up zu geben, sobald klar wird, dass er Informationen eingibt, die nicht den Anforderungen Ihrer App entsprechen. Indem Sie diese Art von Live- und laufendem Feedback bereitstellen, geben Sie dem Benutzer die Möglichkeit, seine Fehler zu korrigieren, bevor Sie auf die Schaltfläche Anmelden klicken.

Während Sie die Benutzeraktivität mit Vanilla Kotlin überwachen können, können wir diese Funktionalität mit viel weniger Code bereitstellen, indem Sie die Hilfe von RxJava sowie einige andere verwandte Bibliotheken in Anspruch nehmen.

Erstellen der Benutzeroberfläche

Beginnen wir mit dem Aufbau unserer Benutzeroberfläche. Ich werde Folgendes hinzufügen:

  • Zwei EditTexts, bei denen der Benutzer seine E-Mail-Adresse (enterEmail) und sein Passwort (enterPassword) eingeben kann.
  • Zwei TextInputLayout-Wrapper, die unsere EditTexts enterEmail und enterPassword umgeben. Diese Wrapper zeigen eine Warnung an, wenn der Benutzer eine E-Mail-Adresse oder ein Passwort eingibt, die nicht den Anforderungen unserer App entsprechen.
  • Eine Schaltfläche zur Sichtbarkeit von Passwörtern, mit der der Benutzer zwischen dem Maskieren des Passworts und dem Anzeigen als Klartext wechseln kann.
  • Eine Schaltfläche zum Anmelden. Um dieses Beispiel auf RxJava zu konzentrieren, werde ich diesen Teil der Anmeldeerfahrung nicht implementieren. Daher werde ich diese Schaltfläche als deaktiviert markieren.

Hier ist mein fertiges Layout:

Sie können dies kopieren/in Ihre App einfügen, wenn Sie möchten, oder Sie können einfach den Projektquellcode von unserem GitHub-Repo herunterladen.

Erstellen einer reaktiven Anmeldeerfahrung mit Kotlin

Schauen wir uns nun an, wie wir RxJava und einige verwandte Bibliotheken verwenden können, um Benutzereingaben zu überwachen und in Echtzeit Feedback zu geben.

Ich werde den Anmelden-Bildschirm in zwei Teilen behandeln. Im ersten Abschnitt werde ich Ihnen zeigen, wie Sie die RxBinding-Bibliothek zum Registrieren und Reagieren auf Textänderungsereignisse verwenden. Im zweiten Abschnitt erstellen wir einige Transformationsfunktionen, die die Benutzereingaben validieren, und zeigen dann gegebenenfalls eine Fehlermeldung an.

Erstellen Sie ein neues Projekt mit den Einstellungen Ihrer Wahl. Wenn Sie jedoch dazu aufgefordert werden, aktivieren Sie das Kontrollkästchen Kotlin-Support einschließen.

Reagieren auf Textänderungsereignisse

In diesem Abschnitt implementieren wir die folgenden Funktionen:

  • Erkennen Sie, wann der Benutzer in das Feld enterEmail eingibt.
  • Ignorieren Sie alle Textänderungsereignisse, die innerhalb kurzer Zeit auftreten, da dies darauf hinweist, dass der Benutzer noch tippt.
  • Führen Sie eine Aktion aus, wenn der Benutzer die Eingabe beendet. In unserer fertigen App überprüfen wir hier die Benutzereingaben. In diesem Abschnitt wird jedoch nur ein Toast angezeigt.

1. RxBinding

RxBinding ist eine Bibliothek, die es einfacher macht, eine Vielzahl von UI-Ereignissen in Observables zu konvertieren. Ab diesem Zeitpunkt können Sie sie wie jeden anderen RxJava-Datenstrom behandeln.

Wir werden Textänderungsereignisse überwachen, indem wir das widget.RxTextView von RxBinding mit der afterTextChangeEvents-Methode kombinieren, zum Beispiel:

Das Problem bei der Behandlung von Textänderungsereignissen als Datenströme besteht darin, dass anfangs sowohl enterEmail als auch enterPassword EditTexts leer sind und wir nicht möchten, dass unsere App auf diesen leeren Zustand reagiert, als wäre es die erste Datenemission im Stream. RxBinding löst dieses Problem, indem es eine skipInitialValue()-Methode bereitstellt, mit der jeder Observer angewiesen wird, den Anfangswert seines Streams zu ignorieren.

Ich schaue mir die RxBinding-Bibliothek in meinem Artikel zu RxJava 2 für Android Apps genauer an.

2. RxJavas .debounce()-Operator 

Um die bestmögliche Benutzererfahrung zu erzielen, müssen alle relevanten Kennwort- oder E-Mail-Warnungen angezeigt werden, nachdem der Benutzer die Eingabe beendet hat, aber bevor er auf die Schaltfläche Anmelden klickt.

Ohne RxJava müssten wir zur Identifizierung dieses engen Zeitfensters normalerweise einen Timer implementieren. In RxJava müssen wir jedoch nur den debounce()-Operator  auf unseren Datenstrom anwenden.

Ich werde den debounce()-Operator verwenden, um alle Textänderungsereignisse herauszufiltern, die schnell hintereinander auftreten, d. h. Wenn der Benutzer noch tippt. Hier ignorieren wir alle Textänderungsereignisse, die innerhalb desselben 400-Millisekunden-Fensters auftreten:

3. AndroidSchedulers.mainThread() von RxAndroid

Mit AndroidSchedulers.mainThread der RxAndroid-Bibliothek können wir auf einfache Weise zum wichtigsten Haupt-UI-Thread von Android wechseln.

Da es nur möglich ist, die Benutzeroberfläche von Android über den Haupt-UI-Thread zu aktualisieren, müssen wir sicherstellen, dass wir uns in diesem Thread befinden, bevor wir versuchen, E-Mail- oder Kennwortwarnungen anzuzeigen und bevor wir unseren Toast anzeigen.

4. Abonnieren

Um die von enterEmail ausgegebenen Daten zu erhalten, müssen wir sie abonnieren:

5. Zeigen Sie den Toast an

Schließlich möchten wir, dass unsere Anwendung auf Textänderungsereignisse reagiert, indem sie die Benutzereingaben überprüft. Um die Dinge jedoch einfach zu halten, werde ich an dieser Stelle einfach einen Toast anzeigen.

Ihr Code sollte ungefähr so aussehen:

6. Aktualisieren Sie Ihre Abhängigkeiten

Da wir einige verschiedene Bibliotheken verwenden, müssen wir die build.gradle-Datei unseres Projekts öffnen und RxJava, RxBinding und RxAndroid als Projektabhängigkeiten hinzufügen:

Sie können diesen Teil Ihres Projekts testen, indem Sie ihn auf Ihrem physischen Android-Smartphone oder -Tablet oder Android Virtual Device (AVD) installieren. Wählen Sie den enterEmail EditText aus und beginnen Sie mit der Eingabe. Ein Toast sollte erscheinen, wenn Sie aufhören zu tippen.

Test your projects enterEmail EditTextTest your projects enterEmail EditTextTest your projects enterEmail EditText

Überprüfen der Benutzereingabe mit Transformationsfunktionen

Als Nächstes müssen wir einige Grundregeln für die Art der Eingabe festlegen, die unsere Anwendung akzeptiert, und dann die Eingabe des Benutzers anhand dieser Kriterien überprüfen und gegebenenfalls eine Fehlermeldung anzeigen.

Das Überprüfen der E-Mails oder des Kennworts des Benutzers erfolgt in mehreren Schritten. Um das Lesen unseres Codes zu vereinfachen, werde ich alle diese Schritte in einer eigenen Transformationsfunktion kombinieren.

Hier ist der Start der validateEmail-Transformationsfunktion:

Im obigen Code verwenden wir den filter()-Operator, um die Ausgabe des Observable basierend darauf zu filtern, ob sie mit dem Muster Patterns.EMAIL_ADDRESS von Android übereinstimmt.

Im nächsten Teil der Transformationsfunktion müssen wir angeben, was passiert, wenn die Eingabe nicht mit dem Muster EMAIL_ADDRESS übereinstimmt. Standardmäßig löst jeder nicht behebbare Fehler einen Aufruf von onError() aus, wodurch der Datenstrom beendet wird. Anstatt den Stream zu beenden, soll in unserer Anwendung eine Fehlermeldung angezeigt werden. Daher verwende ich onErrorResumeNext, mit dem das Observable angewiesen wird, auf einen Fehler zu reagieren, indem die Steuerung an ein neues Observable übergeben wird, anstatt onError() aufzurufen. Dadurch können wir unsere benutzerdefinierte Fehlermeldung anzeigen.

Der letzte Schritt besteht darin, diese Transformationsfunktion mit dem .compose()-Operator  auf den E-Mail-Datenstrom anzuwenden. Zu diesem Zeitpunkt sollte Ihre MainActivity.kt ungefähr so aussehen:

Wenn Sie dieses Projekt auf Ihrem Android-Gerät oder AVD installieren, werden Sie feststellen, dass der E-Mail-Teil des Anmelden-Bildschirms Ihre Eingabe jetzt erfolgreich überprüft. Versuchen Sie, etwas anderes als eine E-Mail-Adresse einzugeben. Die App warnt Sie, dass dies keine gültige Eingabe ist.

Enter anything other than a valid email address and the app will display a warning messageEnter anything other than a valid email address and the app will display a warning messageEnter anything other than a valid email address and the app will display a warning message

Spülen und wiederholen: Überprüfen des Benutzerpassworts

Zu diesem Zeitpunkt verfügen wir über ein voll funktionsfähiges enterEmail-Feld. Bei der Implementierung von enterPassword werden meist nur dieselben Schritte wiederholt.

Tatsächlich besteht der einzige große Unterschied darin, dass unsere validatePassword-Transformationsfunktion nach verschiedenen Kriterien suchen muss. Ich werde angeben, dass die Passworteingabe des Benutzers mindestens 7 Zeichen lang sein muss:

Nachdem Sie alle vorherigen Schritte wiederholt haben, sollte die abgeschlossene Datei MainActivity.kt ungefähr so aussehen:

Installieren Sie dieses Projekt auf Ihrem Android-Gerät oder AVD und experimentieren Sie mit der Eingabe in die Felder enterEmail und enterPassword. Wenn Sie einen Wert eingeben, der nicht den Anforderungen der App entspricht, wird die entsprechende Warnmeldung angezeigt, ohne dass Sie auf die Schaltfläche Anmelden tippen müssen.

Sie können dieses komplette Projekt von GitHub herunterladen.

Schlussfolgerung

In diesem Artikel haben wir uns angesehen, wie RxJava dazu beitragen kann, die realen Probleme zu lösen, die bei der Entwicklung Ihrer eigenen Android-Anwendungen auftreten, indem RxJava 2.0, RxBinding und RxAndroid zum Erstellen eines Anmelden-Bildschirms verwendet werden.

Weitere Hintergrundinformationen zur RxJava-Bibliothek finden Sie in unserem Artikel Erste Schritte mit RxJava 2.0.

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.