Creating en innloggingsskjerm Bruke TextInputLayout
37
Del
12
Del
Dette Cyber ​​mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
Hva du skal lage
Innledning

I denne opplæringen, vil jeg snakke igjen om Material Design. Google I /O 2 015 var en viktig begivenhet very Android-utvikler og design var selvfølgelig en del av diskusjonen.

Google har innsett at bakoverkompatibilitet er den vanskeligste delen av materialet utforming implementering. Jada, støtte biblioteker, for eksempel appcompat-v4 og appcompat-v7, er partof løsningen. Men det betyr Theme.AppCompat ikke implementere alle materiale itemused i Googles offisielle applikasjoner. En av funksjonene som er notpresent i AppCompat tema er muligheten til å plassere en flytende etikett ontop av en EditText widget. Du kan se hva jeg mener i eksempelet nedenfor.

DuringGoogle I /O 2015, Android-teamet lansert en helt ny støtte biblioteket, DesignSupport Biblioteket. Den kommer i veldig nyttig for denne typen problem. Dette tutorialwill vise deg hvordan du bruker den nye TextInputLayout widget som er inkludert i Design Support Library.

1. Implementering TextInputLayout

Trinn 1: Opprett et nytt prosjekt

I Android Studio, velger du Nytt > Nytt prosjekt
fra Fil-menyen. Skriv inn den nødvendige informasjonen for å konfigurere prosjektet og lag prosjektet. I myexample, målrettet jeg prosjektet til API 7, som er minimum API nivå støttes av Design Support Library. Ved å målrette en så lav API nivå, vil din app kjøre på nesten alle Android-enhet. Jeg har kalt den viktigste aktiviteten LoginActivity og dens layout fil activity_login.xml.

Etter å ha satt opp prosjektet, fjern i hovedaktiviteten på onCreateOptionsMenu Hotell og onOptionsItemSelected metode som genereres automatisk av Android Studio. Innloggingsbildet vi er i ferd med å skape trenger ikke en meny så det er greit å slette disse metodene. Husk også å slette XML-menyen fil som bor i res /meny
mappe

Trinn 2:. Importer støtte biblioteker

touse den TextInputLayout widgeten, må du importere to biblioteker. Den første isappcompat-v7, som sikrer at de materielle stiler er bakoverkompatible. Den andre er den Design Support Library

I prosjektets build.gradle fil, legge til følgende linjer i prosjektets avhengigheter.
Avhengig {kompilere fileTree (dir: 'libs', inkluderer: [' * .jar ']) kompilere' com.android.support:design:22.2.0 "kompilere" com.android.support:appcompat-v7:22.2.0'}

If Gradle ikke automatisk be deg om å synkronisere prosjektet, velger Make modul 'app' fra Build-menyen eller trykk på F9
. Ved å gjøre dette, det AndroidStudio bygge systemet automatisk hente de nødvendige ressurser, og du willbe stand til å importere noen nødvendige klasser

Trinn 3:. Design brukergrensesnittet

Brukergrensesnittet i dette prosjektet er veldig enkelt. Det viser en velkommen etikett (som lett kan erstattes av en logo hvis du har en) og to EditText elementer, onefor brukernavn og ett for passordet. Oppsettet inkluderer også en knapp som utløser påloggingssekvensen. Bakgrunnsfargen er en fin, flat, lys grå.

En annen viktig detalj verdt å huske er den riktige innstillingen av inputType egenskap av de EditText elementer. Den inputType av første EditText element bør settes til textEmail mens det av den andre bør settes til textPassword. Dette er hva oppsettet skal se ut
< LinearLayout xmlns:. Android = "http://schemas.android.com/apk/res/android~~number=plural" xmlns: verktøy = "http://schemas.android.com /verktøy "android: bakgrunn =" # e3e3e3 "android: layout_width =" match_parent "android: layout_height =" match_parent "android: padding =" @ dimen /activity_horizontal_margin "verktøy: kontekst =" LoginActivity. "android: orientering =" vertikal " > < RelativeLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "0.5" android: orientering = "vertikal" > < TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_centerInParent = "true" android: vekt = "center" android: text = "Velkommen" android: Tekststørrelse = "30sp" android: textcolor = " # 333333 "/> < /RelativeLayout > < LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "0.5" android: orientering = "vertikal" > < EditText android: id = "+ id /brukernavn" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: inputType = "textEmailAddress" /> < EditText android: id = "+ id /passord" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: inputType = "textPassword" /> < Button android: id = "+ id /btn" android: layout_marginTop = "4DP" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "Logg inn" /> < /LinearLayout > < /LinearLayout >.

Du kan også være lurt å kvitte seg med den appbar, tidligere kjent som handlingsfeltet, ved å redigere style.xml
fil som vist nedenfor
< style name = "AppTheme" forelder = "Theme.AppCompat.Light.NoActionBar" > < /style >
Trinn 4: Bruke TextInputLayout

Vi har finallyarrived på den mest interessante delen av denne opplæringen. En TextInputLayout widget behavesexactly som LinearLayout gjør, det er bare en wrapper. TextInputLayout bare acceptsone barnet element, ligner på en ScrollView. Barnet element må være en EditText element
< android.support.design.widget.TextInputLayout android. Id = "+ id /usernameWrapper" android: layout_width = "match_parent" android: layout_height = "wrap_content" > < EditText android: id = "+ id /brukernavn" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: inputType = "textEmailAddress" android: hint = "brukernavn" /> < /android. support.design.widget.TextInputLayout >

Merk at Ispecified annen parameter i EditText element, et hint. Som du allerede vet, dette attributtet kan du vise en egendefinert hint når det er noe innhold i theEditText. Når brukeren begynner å skrive, forsvinner hint. Dette er ikke bra, fordi de mister sammenheng med den informasjonen de går inn.

Takk toTextInputLayout, vil dette ikke være noe problem lenger. Mens EditText alene willhide hintet etter det første tegnet er skrevet, når innpakket i aTextInputLayout hintet vil bli en flytende etiketten over EditText. En fin materialet animasjon er inkludert også

Neste, la oss gjøre det samme for passordfeltet
< android.support.design.widget.TextInputLayout android:.. Id = "+ id /passwordWrapper" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_below = "@ id /usernameWrapper" android: layout_marginTop = "4DP" > < EditText android: id = "+ id /passord" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: inputType = "textPassword" android: hint = "Passord" /> < /android. support.design.widget.TextInputLayout >

Hvis du runthe søknaden nå, ingenting vil skje. Jada, attributewill den EditText hint oppfører seg som forventet. Men det er ingen vesentlige animasjon og ingen flytende etiketter. Hvorfor det? Vi mangler fortsatt noen kode for å gjøre alt arbeidet

Trinn 5:. Innstilling Hints

Under setContentView metoden, initial referansene til theTextInputLayout utsikt
endelige TextInputLayout usernameWrapper = (TextInputLayout. ) findViewById (R.id.usernameWrapper), slutt TextInputLayout passwordWrapper = (TextInputLayout) findViewById (R.id.passwordWrapper);.

Toanimate flyte etiketten, du trenger bare å sette et hint ved å bruke setHintmethod
usernameWrapper .setHint ("brukernavn"); passwordWrapper.setHint ("passord");

Og du er ferdig. Din innloggingsbildet nå riktig følger de materielle designguidelines. Kjøre programmet for å se ditt vakre innloggingsbildet.

2. Håndtere feil

Anothernice trekk TextInputLayout er måten den kan håndtere feil. Ved å validere input, hindrer du brukere fra feilstaving sin e-postadresse orentering et passord som er for kort.

Med validering av inndata, uriktige legitimasjons vil bli behandlet av backend, feil ville bli generert og sendt til klienten, og vist til (venter) bruker. Aconsiderable tap av tid og en dårlig brukeropplevelse. Du bør sjekke brukerens input før du sender den til backend

Trinn 1:. Implementere onClick Method

Du må først håndtere knapp klikk. Det er mange måter tohandle knapp klikk. En av dem er ved å skrive en tilpasset metode og spesifisere det inyour XML-fil via onClick attributt. Jeg foretrekker setOnClickListener, men it'sreally bare et spørsmål om personlig smak
btn.setOnClickListener (ny View.OnClickListener () {Override public void onClick (Vis v) {//STUB}});.

knowthat hvis denne metoden kalles, ikke brukeren trenger ikke tastaturet anymore.Unfortunately, betyr Android ikke skjule det virtuelle tastaturet automatisk, unlessyou fortelle det til. . Ring hideKeyboard i onClick metoden kroppen
private void hideKeyboard () {Vis view = getCurrentFocus (); if (utsikt! = null) {((InputMethodManager) getSystemService (Context.INPUT_METHOD_SERVICE)). hideSoftInputFromWindow (view.getWindowToken (), InputMethodManager.HIDE_NOT_ALWAYS); }}
Trinn 2: Validere Input

Før du feil etiketter, må vi definere hva som er en feil, og hva som ikke. Vi antar at brukernavnet må være en e-postadresse og vi wantto hindre brukere fra å komme inn en ugyldig e-postadresse.

Validating en e-postadresse er litt komplisert. Vi må stole på regulære uttrykk. Du kan bruke Apache Commons biblioteket også hvis du ønsker det.

Jeg har skrevet følgende regulære uttrykk, ved hjelp av retningslinjer foreslått av Wikipedia om e-post validity.
/^[a-zA-Z0-9#_~!$&'()*+,;=:."(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$/

The meaningof dette regulært uttrykk er ganske enkel. Det består av tre fange grupper. Den første kamper bokstavene i alfabetet (store og små bokstaver), tall, og en seriesof akseptert symboler. På grunn av den + kvantifikator, kamper denne gruppen en stringthat er sammensatt av minst ett tegn.

Deretter er det @ -symbolet, som selvsagt er nødvendig i alle e-postadresse. Den andre gruppen godtar kun bokstaver, tall og bindestrek. Lengden må også være minst én (] +).

Til slutt er det den siste gruppen, som inneholder en prikk, og hvis formål er samsvar subdomener og TLD. Dens quantifier er en stjerne, *, som betyr at thisgroup ser for en streng hvis lengde kan være lik null eller mer. Faktisk, e-postadresser med et domene, men ingen TLD, er faktisk gyldig.

Siden wewant å validere en streng, må vi stole onPattern og Matcher klasser, inkludert i java.util.regex pakken. Importthese klasser i aktiviteten og deretter iverksette følgende metode:
private static endelige String EMAIL_PATTERN = "^[a-zA-Z0-9#_~!$&'()*+,;=:.\\"(),:;<>@\\\\[\\\\]\\\\\\\\]+@[a-zA-Z0-9-]+(\\\\.[a-zA-Z0-9-]+)*$";private Mønster mønster = Pattern.compile (EMAIL_PATTERN); privat Matcher Matcher; public boolean validateEmail (String e) {matcher = pattern.matcher (e); returnere matcher.matches ();}

Thevalidation av passordfeltet er mye enklere. De fleste organisasjoner implementdifferent reglene for passord gyldighet, men alle pålegger en minimumlength. En rimelig tommelfingerregel er at passordet aldri bør være shorterthan seks tegn
public boolean validatePassword (String passord) {return password.length () >.; 5;}
Trinn 3: Hente data

Som jeg sa, TextInputLayoutis bare en wrapper, men i motsetning til LinearLayout og ScrollView, kan du få sin childelement å bruke en bestemt metode, getEditText. Det er ikke nødvendig å bruke findViewById

Hvis TextInputLayout ikke inneholder en EditText, getEditText returnerer null så vær forsiktig med en NullPointException
public void onClick (Vis v) {hideKeyboard ()..; String brukernavn = usernameWrapper.getEditText () GetText () toString ()..; String passord = usernameWrapper.getEditText () GetText () toString ()..; //TODO: Sjekker //TODO: Logg}
Trinn 4: Viser feil

TextInputLayout feilhåndtering er enkel og rask. De nødvendige metoder setErrorEnabled og setError.

setErrorsets en rød feilmelding som vises under EditText. Hvis parameterpassed er null, blir feilmeldingen fjernet. Det endrer også fargen på thewhole EditText widget til rødt.

setErrorEnabled gjør at errorfunctionality. Denne direkte påvirker størrelsen av oppsettet, og øker thelower polstring for å gi plass for feilen etiketten. Aktivering av denne functionalitybefore sette en feilmelding via setError betyr at dette oppsettet willnot endre størrelse når en feil vises. Du bør gjøre noen tester som kombinerer disse to metodene, slik at du faktisk se
hva jeg snakker om.

Anotherinteresting faktum er at hvis feilen funksjonaliteten ikke er aktivert yetand du kaller setError passerer en ikke-null parameter, så setErrorEnabled (sant) vil automatisk bli kalt.

Nå som Vihar definert hva som er rett og hva som er galt, og vi vet hvordan å retrievedata og vise mulige feil, gjennomføringen av onClick metoden becomestrivial.
public void onClick (Vis v) {hideKeyboard (); String brukernavn = usernameWrapper.getEditText () GetText () toString ()..; String passord = usernameWrapper.getEditText () GetText () toString ()..; if (validateEmail (brukernavn)) {usernameWrapper.setError ("Ikke en gyldig e-postadresse!"); } Else if {passwordWrapper.setError ("Ikke et gyldig passord!") (ValidatePassword (passord)!); } Else {usernameWrapper.setErrorEnabled (false); passwordWrapper.setErrorEnabled (false); doLogin (); }}

Jeg har lagt en doLogin metode, men det er for øyeblikket tom siden dette er utenfor omfanget av denne opplæringen.
public void doLogin () {Toast.makeText (getApplicationContext (), "OK! Jeg er . utfører login ", Toast.LENGTH_SHORT) .vis (); //TODO: innloggingsprosedyre; ikke innenfor rammen av denne opplæringen.}
3. Styling

Du mightwant å gjøre en siste ting, endre fargen på TextInputLayout widget. Bydefault, den AppCompact tema setter det til grønt, men ganske ofte denne fargen conflictswith fargepaletten.

Google skrev Design Support Library veldig godt. Everywidget farge er trukket direkte fra temaets farger, spesifisert i yourstyle.xml fil. Bare åpne den og legge den colorAccent elementet til din aktive tema å endre form fargevalget
. ≪ style name = "AppTheme" forelder = "Theme.AppCompat.Light.NoActionBar" > < element name = "colorAccent" > # 3498db < /element > < /style >

Konklusjon

I denne opplæringen, vi så hvordan å implementere ny layout element TextInputLayout, takket være nettopp introdusert Design Support Library.

Utformingen paradigme som denne widgeten redskaper tillater brukere å aldri aldri miste sammenheng med den informasjonen de er på vei inn, og det ble faktisk introdusert av Google i fjor, sammen med Material Design.

På den tiden Det var ingen støtte bibliotek som gir utviklere muligheten til å sette denne widgeten til handling i sine prosjekter, før Google I /O 2015. Nå, hvis søknaden forventer en slags data input, du vil til slutt bli virkelig materialdesign kompatibel.