Erstellen eines Anmeldebildschirms mit TextInputLayout

Was du erschaffen wirst

Einführung

In diesem Tutorial werde ich noch einmal auf Material Design eingehen. Google I / O 2015 war ein großes Ereignis für jeden Android-Entwickler und natürlich war Design Teil der Diskussion.

Google hat erkannt, dass die Abwärtskompatibilität der schwierigste Teil bei der Implementierung des Hardware-Designs ist. Unterstützt natürlich Bibliotheken wie appcompat-v4 und appcompat-v7sind Teil der Lösung. jedoch, Theme.AppCompat implementiert nicht alle in offiziellen Google-Anwendungen verwendeten Hardwareelemente. Eine der Funktionen, die in der nicht vorhanden ist AppCompat Das Thema ist die Möglichkeit, ein schwebendes Etikett über a zu positionieren EditText Widget. Sie können im folgenden Beispiel sehen, was ich meine.

Offizielles Materialdesign TextInputLayout-Implementierung

Während der Google I / O 2015 veröffentlichte das Android-Team eine brandneue Support-Bibliothek, die Design Support Library. Es ist sehr praktisch für diese Art von Problem. Dieses Tutorial zeigt Ihnen, wie Sie das neue verwenden TextInputLayout Widget in der enthalten Design-Support-Bibliothek.

1. Ausführung TextInputLayout

Schritt 1: Erstellen Sie ein neues Projekt

Wählen Sie in Android Studio Neu> Neues Projekt von Datei Speisekarte. Geben Sie die Informationen ein, die zum Konfigurieren des Projekts und zum Erstellen des Projekts erforderlich sind. In meinem Beispiel habe ich das Projekt ins Visier genommen API 7Dies ist die Mindest-API-Ebene, die von der Design Support Library unterstützt wird. Durch die Ausrichtung auf eine so niedrige API-Ebene funktioniert Ihre App auf fast jedem Android-Gerät. Ich habe die Hauptaktivität benannt LoginActivity und seine Layoutdatei activity_login.xml.

Löschen Sie nach der Konfiguration des Projekts in der Hauptaktivität die onCreateOptionsMenu und onOptionsItemSelected Methode, die automatisch von Android Studio generiert wird. Der Anmeldebildschirm, den wir erstellen möchten, benötigt kein Menü, sodass Sie diese Methoden entfernen können. Vergessen Sie auch nicht, die XML-Menüdatei zu löschen, die sich in der res / menu Dossier.

Schritt 2: Importieren Sie die Support-Bibliotheken

So verwenden Sie die TextInputLayout Widget müssen Sie zwei Bibliotheken importieren. Das erste ist
appcompat-v7Dies stellt sicher, dass die Materialstile abwärtskompatibel sind. Der zweite ist der Design Support Library.

In Ihrem Projekt build.gradle Datei, fügen Sie die folgenden Zeilen in die Projektabhängigkeiten ein:

Wenn Gradle Sie nicht automatisch auffordert, Ihr Projekt zu synchronisieren, wählen Sie Erstellen Sie das App-Modul von Bauen Menü oder drücken F9. Auf diese Weise greift das Build-System von Android Studio automatisch auf die erforderlichen Ressourcen zu und Sie können alle erforderlichen Klassen importieren.

Schritt 3: Entwerfen Sie die Benutzeroberfläche

Die Benutzeroberfläche dieses Projekts ist sehr einfach. Es zeigt ein Willkommenstag (das leicht durch ein Logo ersetzt werden kann, wenn Sie eines haben) und zwei EditText Elemente, eines für den Benutzernamen und eines für das Passwort. Das Layout enthält auch eine Schaltfläche, die die Anmeldesequenz auslöst. Die Hintergrundfarbe ist ein schönes helles, flaches Grau.

Ein weiteres wichtiges Detail, an das Sie sich erinnern sollten, ist die korrekte Einstellung des inputType Attribut du EditText Elemente. das inputType des Premierministers EditText Element muss auf gesetzt sein textEmail während die zweite auf eingestellt sein sollte textPassword. So sollte das Layout aussehen.

Sie können die App-Leiste, die früher als Aktionsleiste bezeichnet wurde, auch entfernen, indem Sie die ändern style.xml

Datei wie unten gezeigt.

Schritt 4: Verwenden TextInputLayout

Wir sind endlich zum interessantesten Teil dieses Tutorials gekommen. EIN TextInputLayout Widget verhält sich genau wie ein LinearLayout Eigentlich ist es nur ein Wrapper. TextInputLayout akzeptiert nur ein untergeordnetes Element, ähnlich wie a ScrollView. Das untergeordnete Element muss a sein EditText Element.

Beachten Sie, dass ich einen anderen Parameter in der angegeben habe EditText Artikel, einer hint. Wie Sie bereits wissen, können Sie mit diesem Attribut einen benutzerdefinierten Hinweis anzeigen, wenn der Inhalt keinen enthält
EditText. Sobald der Benutzer mit der Eingabe beginnt, verschwindet die Anzeige. Dies ist nicht großartig, da sie den Kontext der eingegebenen Informationen verlieren.

Dank an
TextInputLayout, das wird kein Problem mehr sein. Während EditText Die Anzeige wird erst nach Eingabe des ersten Zeichens ausgeblendet, wenn es in a eingeschlossen ist
TextInputLayout Die Anzeige wird zu einem schwebenden Etikett über dem EditText. Eine schöne Materialanimation ist ebenfalls enthalten.

Machen Sie dasselbe für das Passwortfeld.

Wenn Sie die App jetzt ausführen, geschieht nichts. Natürlich die EditText Das Hinweisattribut verhält sich wie erwartet. Es gibt jedoch keine Hardware-Animation oder schwebende Beschriftungen. Warum ist das so? Wir haben immer noch keinen Code, damit alles funktioniert.

Schritt 5: Definition der Beratung

Unter dem setContentView Methode, initialisieren Sie die Verweise auf die
TextInputLayout Ansichten.

Um das schwebende Label zu animieren, müssen Sie lediglich einen Index mit dem definieren setHint

Methode.

Und du bist fertig. Ihr Anmeldebildschirm folgt nun korrekt den Richtlinien für das Materialdesign. Führen Sie die App aus, um Ihren schönen Anmeldebildschirm anzuzeigen.

Anmeldebildschirm

2. Fehlerbehandlung

Ein weiteres cooles Feature von TextInputLayout So kann er mit Fehlern umgehen. Durch die Überprüfung des Eintrags verhindern Sie, dass Benutzer ihre E-Mail-Adresse falsch schreiben oder ein zu kurzes Kennwort eingeben.

Bei der Eingabevalidierung würden falsche Anmeldeinformationen vom Backend verarbeitet, Fehler generiert und an den Client gesendet und dem Benutzer angezeigt (ausstehend). Beträchtliche Zeitverschwendung und schlechte Benutzererfahrung. Sie müssen die Benutzereingaben überprüfen, bevor Sie sie an das Backend senden.

Schritt 1: Implementierung von onClick Methode

Zuerst müssen Sie den Klick auf die Schaltfläche verwalten. Es gibt viele Möglichkeiten, mit Tastenklicks umzugehen. Eine davon besteht darin, eine benutzerdefinierte Methode zu schreiben und diese in Ihrer XML-Datei über das anzugeben onClick Attribut. ich bevorzuge setOnClickListener, aber es ist wirklich nur eine Frage des persönlichen Geschmacks.

Wir wissen, dass der Benutzer die Tastatur nicht mehr benötigt, wenn diese Methode aufgerufen wird. Leider versteckt Android die virtuelle Tastatur nicht automatisch, es sei denn, Sie sagen es. Anruf hideKeyboard in dem onClick Hauptteil der Methode.

Schritt 2: Validierung des Eintrags

Bevor wir die Fehlerbezeichnungen definieren, müssen wir definieren, was ein Fehler ist und was nicht. Wir gehen davon aus, dass der Benutzername eine E-Mail-Adresse sein muss, und möchten verhindern, dass Benutzer eine ungültige E-Mail-Adresse eingeben.

Das Überprüfen einer E-Mail-Adresse ist etwas komplex. Wir müssen uns auf reguläre Ausdrücke verlassen. Sie können auch die Apache Commons-Bibliothek verwenden, wenn Sie möchten.

Ich habe den folgenden regulären Ausdruck unter Verwendung der von vorgeschlagenen Richtlinien geschrieben Wikipedia zur Gültigkeit von E-Mails.

Die Bedeutung dieses regulären Ausdrucks ist recht einfach. Es besteht aus drei Erfassungsgruppen. Der erste entspricht den Buchstaben des Alphabets (Groß- und Kleinbuchstaben), Zahlen und einer Reihe akzeptierter Symbole. Wegen + Quantifizierer, diese Gruppe entspricht einer Zeichenfolge, die aus mindestens einem Zeichen besteht.

Dann ist da noch die @ Symbol, das natürlich in jeder E-Mail-Adresse benötigt wird. Die zweite Gruppe akzeptiert nur Buchstaben, Zahlen und Bindestriche. Die Länge muss auch mindestens eins betragen (]+).

Schließlich gibt es die letzte Gruppe, die einen Punkt enthält und deren Zweck darin besteht, die Subdomänen und die TLD abzugleichen. Sein Quantifizierer ist ein Stern, *Dies bedeutet, dass diese Gruppe nach einer Zeichenfolge sucht, deren Länge gleich oder größer als Null sein kann. Tatsächlich sind E-Mail-Adressen mit einer Domain, aber ohne TLD tatsächlich gültig.

Da wollen wir a validieren Stringmüssen wir uns verlassen
Pattern und Matcher Natürlich in der java.util.regex Paket. Importieren Sie diese Klassen in Ihre Aktivität und implementieren Sie die folgende Methode:

Das Überprüfen des Kennwortfelds ist viel einfacher. Die meisten Organisationen haben unterschiedliche Richtlinien für die Gültigkeit von Kennwörtern, aber jeder erzwingt eine Mindestlänge. Eine vernünftige Faustregel ist, dass das Passwort niemals kürzer als sechs Zeichen sein darf.

Schritt 3: Datenwiederherstellung

Wie ich sagte, TextInputLayout

ist nur ein Wrapper, aber anders als LinearLayout und ScrollViewkönnen Sie das untergeordnete Element mit einer bestimmten Methode abrufen. getEditText. Es besteht keine Notwendigkeit zu verwenden findViewById.

Und TextInputLayout beinhaltet nicht EditText, getEditText Rückkehr null Achten Sie also auf a NullPointException.

Schritt 4: Anzeigen von Fehlern

TextInputLayout Die Fehlerbehandlung ist schnell und einfach. Die erforderlichen Methoden sind setErrorEnabled und setError.

setError

definiert eine rote Fehlermeldung, die unter dem angezeigt wird EditText. Wenn der übergebene Parameter ist nullwird die Fehlermeldung gelöscht. Es ändert auch die Farbe des Sets EditText rotes Widget.

setErrorEnabled Fehlerfunktionalität aktivieren. Dies wirkt sich direkt auf die Größe des Layouts aus und vergrößert die untere Polsterung, um Platz für die Fehlerbezeichnung zu schaffen. Aktivieren Sie diese Funktion, bevor Sie eine Fehlermeldung über einstellen setError bedeutet, dass dieses Layout die Größe nicht ändert, wenn ein Fehler angezeigt wird. Sie sollten einige Tests durchführen, bei denen diese beiden Methoden kombiniert werden, damit Sie tatsächlich sehen können Worüber rede ich?

Eine weitere interessante Tatsache ist, dass wenn die Fehlerfunktion noch nicht aktiviert wurde und Sie anrufen setError Übergeben eines Parameters ungleich Null setErrorEnabled(true)

wird automatisch aufgerufen.

Nachdem wir definiert haben, was richtig und was falsch ist, wissen wir, wie Daten wiederhergestellt und Fehler angezeigt werden können onClick Die Methode wird trivial.

Ich habe a hinzugefügt doLogin Methode, aber es ist derzeit leer, da es den Rahmen dieses Tutorials sprengt.

3. Styling

Vielleicht möchten Sie eine letzte Sache tun, die Farbe der ändern TextInputLayout Widget. Standardmäßig ist die AppCompact Das Thema setzt es auf Grün, aber diese Farbe widerspricht häufig Ihrem Farbschema.

Google hat die Design-Support-Bibliothek sehr gut geschrieben. Die Farbe jedes Widgets wird direkt aus den in Ihrem Programm angegebenen Themenfarben gezeichnet
style.xml Datei. Öffnen Sie es einfach und fügen Sie das hinzu colorAccent Element zu Ihrem aktiven Thema, um das Farbschema des Formulars zu ändern.

Anmeldebildschirm mit unterschiedlicher Farbe

Fazit

In diesem Tutorial haben wir gesehen, wie das neue Layoutelement implementiert wird. TextInputLayoutDank der neu eingeführten Design Support Library.

Das Design-Paradigma, das dieses Widget implementiert, ermöglicht es Benutzern, den Kontext der eingegebenen Informationen nie zu verlieren. Es wurde letztes Jahr von Google mit Material Design eingeführt.

Zu diesem Zeitpunkt gab es bis Google I / O 2015 keine Support-Bibliothek, mit der Entwickler dieses Widget in ihren Projekten in die Tat umsetzen konnten. Wenn Ihre Anwendung nun eine Dateneingabe erwartet Sie werden endlich wirklich im Einklang mit dem Materialdesign sein.

verbunden :  5 Android-Apps zum Versenden von Massen-SMS
Moyens Staff
Moyens I/O-Personal. motivierte Sie und gab Ratschläge zu Technologie, persönlicher Entwicklung, Lebensstil und Strategien, die Ihnen helfen werden.
We would like to show you notifications for the latest news and updates.
Dismiss
Allow Notifications