Share
I denne veiledningen vil jeg snakke om Material Design. Google I / O 2015 var en viktig begivenhet for hver Android-utvikler og design var selvfølgelig en del av diskusjonen.
Google har innsett at bakoverkompatibilitet er den vanskeligste delen av materialdesign implementeringen. Sikker, støtte biblioteker, for eksempel appcompat-v4 og appcompat-v7, er en del av løsningen. derimot, Theme.AppCompat implementerer ikke alle materielle elementer som brukes i Googles offisielle applikasjoner. En av funksjonene som ikke er til stede i AppCompat temaet er muligheten til å plassere en flytende etikett på toppen av en EditText widget. Du kan se hva jeg mener i eksemplet nedenfor.
Under Google I / O 2015 lanserte Android-teamet et helt nytt støttebibliotek, Design Support Library. Det kommer veldig praktisk for denne typen problem. Denne opplæringen vil vise deg hvordan du bruker den nye TextInputLayout widget som er inkludert i Design Support Library.
Accentsconagua
TextInputLayout I Android Studio velger du Nytt> Nytt prosjekt fra Fil Meny. Skriv inn den nødvendige informasjonen for å konfigurere prosjektet og opprett prosjektet. I mitt eksempel målrettet jeg prosjektet til API 7, som er det minste API-nivået støttet av Design Support Library. Ved å målrette mot et så lavt API-nivå, kjører appen din på nesten alle Android-enheter. Jeg har kalt hovedaktiviteten LoginActivity og dens layoutfil activity_login.xml.
Etter å ha satt opp prosjektet, fjern i hovedaktiviteten onCreateOptionsMenuog onOptionsItemSelected Metode som automatisk genereres av Android Studio. Påloggingsskjermen vi skal skape trenger ikke en meny, så det er greit å slette disse metodene. Husk også å slette XML-menyfilen som lever i res / meny mappe.
For å bruke TextInputLayout widget, må du importere to biblioteker. Den første er appcompat-v7, som sikrer at materialstilene er bakoverkompatible. Den andre er Design Support Library.
I prosjektets build.gradle fil, legg til følgende linjer i prosjektets avhengigheter:
avhengigheter compile fileTree (dir: 'libs', inkluderer: ['* .jar']) kompilere 'com.android.support:design:22.2.0' compile 'com.android.support:appcompat-v7:22.2.0 '
Hvis Gradle ikke automatisk spør deg om å synkronisere prosjektet, velger du Lag modulen 'app' fra Bygge meny eller trykk F9. Ved å gjøre det, vil Android Studio-byggesystemet automatisk hente de nødvendige ressursene, og du vil kunne importere noen nødvendige klasser.
Brukergrensesnittet til dette prosjektet er veldig enkelt. Det viser en velkommen etikett (som lett kan erstattes med en logo hvis du har en) og to EditText elementer, ett for brukernavnet og ett for passordet. Oppsettet inneholder også en knapp som utløser innloggingssekvensen. Bakgrunnsfargen er en fin, flat, lysegrå.
En annen viktig detalj som er verdt å huske er riktig innstilling av input attributten til EditText elementer. De input av den første EditText elementet bør settes til textEmail mens den av den andre skal settes til textPassword. Dette er hvordan oppsettet skal se ut.
Du vil kanskje også bli kvitt applinjen, tidligere kjent som handlingslinjen, ved å redigere style.xml filen som vist nedenfor.
TextInputLayoutVi har endelig kommet til den mest interessante delen av denne opplæringen. EN TextInputLayout widget oppfører seg som en LinearLayout gjør det, det er bare en wrapper. TextInputLayout aksepterer bare ett barnelement, ligner a ScrollView. Barnelementet må være en EditText element.
Legg merke til at jeg angav en annen parameter i EditText element, a hint. Som du allerede vet, lar denne attributtet deg vise et tilpasset hint når det ikke er noe innhold i EditText. Når brukeren begynner å skrive, forsvinner hinten. Dette er ikke bra, fordi de mister sammenhengen med informasjonen de kommer inn på.
Takk til TextInputLayout, Dette vil ikke være et problem lenger. Mens EditText alene vil skjule hint etter at det første tegnet er skrevet, når det er pakket inn i a TextInputLayout hint vil bli en flytende etikett over EditText. En fin materiale animasjon er inkludert også.
Deretter la oss gjøre det samme for passordfeltet.
Hvis du kjører programmet nå, skjer ingenting. Jo, det EditText hintattributt vil oppføre seg som forventet. Det er imidlertid ingen materiell animasjon og ingen flytende etiketter. Hvorfor det? Vi mangler fortsatt noen kode for å få alt til å fungere.
Under setContentView metode, initialiser referansene til TextInputLayout visninger.
siste TextInputLayout brukernavnWrapper = (TextInputLayout) findViewById (R.id.usernameWrapper); siste TextInputLayout passwordWrapper = (TextInputLayout) findViewById (R.id.passwordWrapper);
For å animere den flytende etiketten trenger du bare å sette et hint ved hjelp av setHint metode.
usernameWrapper.setHint ( "brukernavn"); passwordWrapper.setHint ( "passord");
Og du er ferdig. Innloggingsskjermen følger nå riktig retningslinjer for materialeutforming. Kjør programmet for å se din vakre påloggingsskjerm.
En annen fin funksjon av TextInputLayout er måten det kan håndtere feil på. Ved å validere inngangen, forhindrer du at brukerne feilsøker sin e-postadresse eller skriver inn et passord som er for kort.
Ved inndata validering, vil feil legitimasjon bli behandlet av backend, feil vil bli generert og sendt til klienten, og vist til (venter) brukeren. Et betydelig tap av tid og en dårlig brukeropplevelse. Du bør sjekke brukerens innspill før du sender den til backend.
ved trykk MetodeDu må først håndtere knappeklikk. Det er mange måter å håndtere knappeklikk på. En av dem er ved å skrive en tilpasset metode og spesifisere den i XML-filen din via ved trykk Egenskap. jeg foretrekker setOnClickListener, men det er egentlig bare et spørsmål om personlig smak.
btn.setOnClickListener (ny View.OnClickListener () @Overtrid offentlig tomgang påClick (Vis v) // STUB);
Vi vet at brukeren ikke trenger tastaturet lenger hvis denne metoden kalles. Dessverre skjuler Android ikke det virtuelle tastaturet automatisk, med mindre du forteller det til. Anrop hideKeyboard i ved trykk metode legeme.
privat ugyldig skjult tastatur () Vis visning = getCurrentFocus (); hvis (se! = null) ((InputMethodManager) getSystemService (Context.INPUT_METHOD_SERVICE)). hideSoftInputFromWindow (view.getWindowToken (), InputMethodManager.HIDE_NOT_ALWAYS);
Før du angir feiletikettene, må vi definere hva som er en feil og hva som ikke er. Vi antar at brukernavnet må være en e-postadresse, og vi vil forhindre at brukerne angir en ugyldig e-postadresse.
Validering av en e-postadresse er litt kompleks. Vi må stole på regulære uttrykk. Du kan også bruke Apache Commons biblioteket hvis du ønsker det.
Jeg har skrevet følgende regulære uttrykk, ved hjelp av retningslinjene foreslått av Wikipedia om e-postgyldighet.
/^[a-zA-Z0-9#_~!$&'()*+,;=:."(),:;<>@\[\]\\]+@[a-zA-Z0 -9 -] + (\ [a-za-Z0-9 -.] +) * $ /
Betydningen av dette regulære uttrykket er ganske enkelt. Den består av tre fangstgrupper. Den første passer til bokstavene i alfabetet (store og små bokstaver), tall og en serie aksepterte symboler. På grunn av + kvantifierer, samsvarer denne gruppen med en streng som består av minst ett tegn.
Deretter er det @ symbol, som selvfølgelig kreves i hver e-postadresse. Den andre gruppen aksepterer bare bokstaver, tall og bindestreker. Lengden må også være minst en (]+).
Til slutt er det den siste gruppen, som inneholder en prikk, og hvis formål er samsvarende underdomener og toppdomænet. Kvantifiseringen er en stjerne, *, som betyr at denne gruppen ser etter en streng hvis lengde kan være null eller mer. Faktisk er e-postadresser med et domene, men ingen toppdomæne, faktisk gyldige.
Siden vi vil validere en string, vi må stole på Mønster og Matcher klasser, inkludert i java.util.regex pakke. Importer disse klassene i aktiviteten din, og implementer deretter følgende metode:
privat statisk sluttstreng EMAIL_PATTERN = "^ [a-zA-Z0-9 # _ ~! $ & '() * +,; =:. \" (),:; <> @ \\ [\\] \\ \\] + @ [a-zA-Z0-9 -] + (\\. [a-zA-Z0-9 -] +) * $ "; Privat mønster mønster = Pattern.compile (EMAIL_PATTERN); privat Matcher matcher ; offentlig boolean validateEmail (String email) matcher = pattern.matcher (email); returner matcher.matches ();
Valideringen av passordfeltet er mye enklere. De fleste organisasjoner implementerer ulike retningslinjer for passordgyldighet, men alle pålegger en minimumslengde. En rimelig tommelfingerregel er at passordet aldri skal være kortere enn seks tegn.
offentlig boolean validatePassword (String passord) return password.length ()> 5;
Som jeg sa, TextInputLayout er bare en wrapper, men i motsetning til LinearLayout og ScrollView, du kan få barnets element ved hjelp av en bestemt metode, getEditText. Det er ikke nødvendig å bruke findViewById.
Hvis TextInputLayout inneholder ikke en EditText, getEditText avkastning null så vær forsiktig med a NullPointException.
Offentlig ugyldig onClick (Vis v) hideKeyboard (); String brukernavn = brukernavnWrapper.getEditText (). GetText (). ToString (); String passord = brukernavnWrapper.getEditText (). GetText (). ToString (); // TODO: Sjekker // TODO: Logg inn
TextInputLayout Feilbehandling er enkelt og raskt. De nødvendige metodene er setErrorEnabled og setError.
setError setter en rød feilmelding som vil bli vist under EditText. Hvis parameteren er bestått er null, Feilmeldingen slettes. Det endrer også fargen til hele EditText Widget til rødt.
setErrorEnabled aktiverer feilfunksjonaliteten. Dette påvirker størrelsen på oppsettet direkte, og øker den nederste polstringen for å gjøre rom for feiletiketten. Aktiverer denne funksjonaliteten før du angir en feilmelding via setError betyr at dette oppsettet ikke vil endre størrelse når en feil vises. Du bør gjøre noen tester som kombinerer disse to metodene slik at du faktisk serhva jeg snakker om.
Et annet interessant faktum er at hvis feilfunksjonaliteten ikke er aktivert enda, og du ringer setError passerer en ikke-null parameter, da setErrorEnabled (sann) vil bli automatisk kalt.
Nå som vi har definert hva som er riktig og hva som er galt, og vi vet hvordan du henter data og viser mulige feil, vil implementeringen av ved trykk metoden blir trivial.
Offentlig ugyldig onClick (Vis v) hideKeyboard (); String brukernavn = brukernavnWrapper.getEditText (). GetText (). ToString (); String passord = brukernavnWrapper.getEditText (). GetText (). ToString (); hvis (! validateEmail (brukernavn)) usernameWrapper.setError ("Ikke en gyldig e-postadresse!"); ellers hvis (! validere Passord (passord)) passwordWrapper.setError ("Ikke et gyldig passord!"); else usernameWrapper.setErrorEnabled (false); passwordWrapper.setErrorEnabled (false); doLogin (); Jeg har lagt til en doLogin metode, men det er for øyeblikket tomt siden dette er utenfor omfanget av denne opplæringen.
offentlig tomgang doLogin () Toast.makeText (getApplicationContext (), "OK! Jeg utfører innlogging.", Toast.LENGTH_SHORT) .show (); // TODO: innloggingsprosedyre; ikke innenfor rammen av denne opplæringen.
Du vil kanskje gjøre en siste ting, endre fargen på TextInputLayout widget. Som standard er AppCompact temaet setter det til grønt, men ganske ofte er denne fargen i konflikt med fargepaletten din.
Google skrev Designbiblioteket veldig bra. Hver widget er farget direkte fra temaets farger, spesifisert i din style.xml fil. Bare åpne den og legg til colorAccent element til ditt aktive tema for å endre skjemaets fargevalg.
I denne veiledningen så vi hvordan du implementerer det nye layoutelementet TextInputLayout, takket være det nettopp introduserte Design Support Library.
Designparadigmet som denne widgeten implementerer, tillater brukerne aldri å miste sammenheng med informasjonen de kommer inn, og det ble faktisk introdusert av Google i fjor, sammen med Material Design.
På det tidspunktet var det ikke noe støttebibliotek som ga utviklere muligheten til å sette denne widgeten til virkelighet i prosjektene deres, til Google I / O 2015. Nå, hvis din søknad forventer en slags datainngang, vil du til slutt være virkelig materiell design kompatibel.
