Share
În acest tutorial, voi vorbi din nou despre Material Design. Google I / O 2015 a fost un eveniment important pentru fiecare dezvoltator de Android și designul a fost, desigur, o parte a discuției.
Google a realizat că compatibilitatea înapoi este cea mai dificilă parte a implementării designului material. Sigur, bibliotecile de sprijin, cum ar fi appcompat-v4 și appcompat-V7, fac parte din soluție. in orice caz, Theme.AppCompat nu implementează toate elementele materiale utilizate în aplicațiile oficiale ale Google. Una dintre caracteristicile care nu există în AppCompat temă este posibilitatea de a poziționa o etichetă plutitoare în partea de sus a unui Editează textul widget. Puteți vedea ce vreau să spun în exemplul de mai jos.
În timpul programului Google I / O 2015, echipa Android a lansat o bibliotecă de suport nou nouă Design Library Support. Este foarte util pentru această problemă. Acest tutorial vă va arăta cum să utilizați noul TextInputLayout widget care este inclus în Design Library Support.
Accentsconagua
TextInputLayout În Android Studio, alegeți Nou> Proiect nou de la Fişier meniul. Introduceți informațiile necesare pentru a configura proiectul și a crea proiectul. În exemplul meu, am vizat proiectul API 7, care este nivelul minim al API susținut de Biblioteca de suport pentru proiectare. Prin direcționarea unui astfel de nivel redus de API, aplicația dvs. va funcționa pe aproape fiecare dispozitiv Android. Am numit activitatea principală LoginActivity și fișierul de aspect activity_login.xml.
După configurarea proiectului, eliminați din activitatea principală onCreateOptionsMenuși onOptionsItemSelected metodă care este generată automat de Android Studio. Ecranul de conectare pe care urmează să-l creăm nu are nevoie de un meniu, deci este bine să ștergeți aceste metode. Amintiți-vă, de asemenea, să ștergeți fișierul de meniu XML care trăiește în res / meniu pliant.
Pentru a utiliza TextInputLayout widget, trebuie să importați două biblioteci. Primul este appcompat-V7, care asigură faptul că stilurile materiale sunt compatibile înapoi. Al doilea este Design Library Support.
În proiectul tău build.gradle fișier, adăugați următoarele linii în dependențele proiectului:
dependente compile fileTree (dir: 'libs', include: ['* .jar']) compile 'com.android.support:design:22.2.0' compile 'com.android.support:appcompat-v7:22.2.0 '
Dacă Gradle nu vă cere automat sincronizarea proiectului, alegeți Asigurați-modul "app" de la Construi meniu sau apăsați F9. Procedând astfel, sistemul de creație Android Studio va prelua automat resursele necesare și veți putea importa toate clasele necesare.
Interfața de utilizare a acestui proiect este foarte simplă. Acesta arată o etichetă binevenită (care poate fi ușor înlocuită cu un logo dacă aveți unul) și două Editează textul elemente, unul pentru numele de utilizator și unul pentru parolă. De asemenea, aspectul include un buton care declanșează secvența de autentificare. Culoarea de fundal este un aspect frumos, plat, deschis.
Un alt detaliu important care merită amintit este setarea corectă a tip de introducere atributul Editează textul elemente. tip de introducere din primul Editează textul element ar trebui să fie setat la textEmail în timp ce cel al celui de-al doilea ar trebui să fie stabilit la textPassword. Acesta ar trebui să arate aspectul.
De asemenea, este posibil să doriți să scăpați de bara de aplicații, cunoscută anterior sub numele de bara de acțiune, editând style.xml fișier după cum se arată mai jos.
TextInputLayoutAm ajuns în sfârșit la cea mai interesantă parte a acestui tutorial. A TextInputLayout widget-ul se comportă exact ca a LinearLayout este, este doar un înveliș. TextInputLayout acceptă doar un element de copil, similar unui element ScrollView. Elementul copil trebuie să fie un element Editează textul element.
Rețineți că am specificat un alt parametru în Editează textul element, a aluzie. După cum deja știți, acest atribut vă permite să afișați un indiciu personalizat atunci când nu există conținut în Editează textul. Odată ce utilizatorul începe să scrie, sugestia dispare. Acest lucru nu este minunat, deoarece acestea pierd contextul informațiilor pe care le introduc.
Mulțumită TextInputLayout, acest lucru nu va mai fi o problemă. In timp ce Editează textul singurul va ascunde sugestia după introducerea primului caracter, atunci când este înfășurat într-un TextInputLayout sugestia va deveni o etichetă plutitoare deasupra Editează textul. Este inclusă și o animație frumoasă.
Apoi, să facem același lucru pentru câmpul de parolă.
Dacă executați aplicația acum, nu se va întâmpla nimic. Sigur că Editează textul atributul hint se va comporta conform așteptărilor. Cu toate acestea, nu există animație materială și nici etichete plutitoare. De ce este asta? Mai lipsește încă un cod pentru a face totul să funcționeze.
Sub setContentView , inițializați referințele la TextInputLayout vizualizari.
final TextInputLayout numeUtilizatorWrapper = (TextInputLayout) findViewById (R.id.usernameWrapper); finală TextInputLayout passwordWrapper = (TextInputLayout) findViewById (R.id.passwordWrapper);
Pentru a anima eticheta plutitoare, trebuie doar să setați un indiciu, folosind setHint metodă.
usernameWrapper.setHint ( "Utilizator"); passwordWrapper.setHint ( "Parola");
Și ați terminat. Ecranul dvs. de conectare respectă în mod corespunzător regulile de proiectare a materialelor. Rulați aplicația pentru a vedea ecranul de conectare frumos.
O altă trăsătură frumoasă a lui TextInputLayout este modul în care poate gestiona erorile. Validând intrarea, împiedicați utilizatorii să introducă o greșeală în scrisoarea lor de e-mail sau să introducă o parolă prea scurtă.
Cu validarea intrării, acreditările incorecte ar fi procesate de backend, erorile vor fi generate și trimise clientului și afișate utilizatorului (în așteptare). O pierdere considerabilă de timp și o experiență slabă a utilizatorului. Ar trebui să verificați intrarea utilizatorului înainte de a o trimite în backend.
onClick MetodăMai întâi trebuie să rezolvați clic pe buton. Există numeroase moduri de a gestiona clicurile pe butoane. Unul dintre acestea este prin scrierea unei metode personalizate și specificarea acesteia în fișierul XML prin intermediul onClick atribut. eu prefer setOnClickListener, dar este într-adevăr doar o chestiune de gust personal.
btn.setOnClickListener (noul View.OnClickListener () @Override public void onClick (Vizualizare v) // STUB);
Știm că dacă această metodă este apelată, utilizatorul nu mai are nevoie de tastatură. Din păcate, Android nu ascunde automat tastatura virtuală, decât dacă îi spui. Apel hideKeyboard în onClick metoda de corp.
private void hideKeyboard () Vizualizare vedere = getCurrentFocus (); dacă (vizualizați! = null) ((InputMethodManager) getSystemService (Context.INPUT_METHOD_SERVICE)). hideSoftInputFromWindow (view.getWindowToken (), InputMethodManager.HIDE_NOT_ALWAYS);
Înainte de a stabili etichetele de eroare, trebuie să definim ce este o eroare și ce nu este. Presupunem că numele de utilizator trebuie să fie o adresă de e-mail și dorim să împiedică utilizatorii să introducă o adresă de e-mail nevalidă.
Validarea unei adrese de e-mail este un pic cam complexă. Trebuie să ne bazăm pe expresii regulate. Puteți folosi biblioteca Apache Commons dacă doriți.
Am scris următoarea expresie regulată, folosind indicațiile sugerate de Wikipedia cu privire la validitatea e-mailului.
/^[a-zA-Z0-9#_~!$&'()*+,;=:."(),:;<>@\[\]\\]+@[a-zA-Z0 -9 -] + (\ [a-zA-Z0-9 -.] +) * $ /
Semnificația acestei expresii regulate este destul de simplă. Se compune din trei grupuri de capturare. Primul se potrivește cu literele alfabetului (litere mici și mici), numere și o serie de simboluri acceptate. Din cauza + cuantificator, acest grup se potrivește cu un șir compus din cel puțin un caracter.
Mai departe, există @ simbol, care este, desigur, necesar în fiecare adresă de e-mail. Al doilea grup acceptă numai litere, numere și cratime. De asemenea, lungimea trebuie să fie cel puțin una (]+).
În sfârșit, există ultimul grup, care conține un punct și al cărui scop este potrivirea subdomeniilor și TLD. Cuantificatorul său este o stea, *, ceea ce înseamnă că acest grup caută un șir a cărui lungime poate fi zero sau mai mare. De fapt, adresele de e-mail cu un domeniu, dar fără TLD, sunt de fapt valide.
Deoarece vrem să validăm o Şir, trebuie să ne bazăm Model și Matcher clase, incluse în java.util.regex pachet. Importați aceste clase în activitatea dvs. și apoi implementați următoarea metodă:
static final static EMAIL_PATTERN = "^ [a-zA-Z0-9 # _ ~! $ & '() * +;; =. \\] + @ [a-zA-Z0-9 -] + (\\. [a-zA-Z0-9 -] +) * $ " ; public boolean validateEmail (e-mail de corespondență) matcher = pattern.matcher (email); return matcher.matches ();
Validarea câmpului de parolă este mult mai simplă. Cele mai multe organizații implementează politici diferite pentru validitatea parolei, dar toată lumea impune o lungime minimă. O regulă rezonabilă este că parola nu trebuie să fie niciodată mai mică de șase caractere.
public boolean validatePassword (parola de coarda) return password.length ()> 5;
Așa cum am spus, TextInputLayout este doar un înveliș, dar spre deosebire de el LinearLayout și ScrollView, puteți obține elementul său copil folosind o metodă specifică, getEditText. Nu este nevoie să folosiți findViewById.
Dacă TextInputLayout nu conține un Editează textul, getEditText se intoarce nul așa că fii atent la a NullPointException.
public void onClick (Vizualizare v) hideKeyboard (); String nume utilizator = usernameWrapper.getEditText (). GetText (). ToString (); String parola = usernameWrapper.getEditText (). GetText (). ToString (); // TODO: Controale // TODO: Login
TextInputLayout gestionarea erorilor este ușoară și rapidă. Metodele necesare sunt setErrorEnabled și setError.
setError setează un mesaj roșu de eroare care va fi afișat sub Editează textul. Dacă parametrul trecut este nul, mesajul de eroare este șters. Se schimbă și culoarea întregului Editează textul widgetul roșu.
setErrorEnabled permite funcția de eroare. Acest lucru afectează în mod direct mărimea aspectului, mărind capacul inferior pentru a face loc etichetei de eroare. Activarea acestei funcționalități înainte de a seta un mesaj de eroare prin setError înseamnă că acest aspect nu va schimba mărimea când se afișează o eroare. Ar trebui să faceți niște teste care combină aceste două metode astfel încât să vedeți de faptdespre ce vorbesc.
Un alt fapt interesant este că dacă funcția de eroare nu a fost activată încă și ați sunat setError trecând apoi un parametru non-null setErrorEnabled (true) va fi automat numit.
Acum că am definit ceea ce este bine și ce este greșit și știm cum să preluăm datele și să afișăm eventuale erori, implementarea onClick metoda devine trivială.
public void onClick (Vizualizare v) hideKeyboard (); String nume utilizator = usernameWrapper.getEditText (). GetText (). ToString (); String parola = usernameWrapper.getEditText (). GetText (). ToString (); dacă (! validateEmail (username)) usernameWrapper.setError ("Nu este o adresă de e-mail valabilă!"); altfel dacă (! validatePassword (password)) passwordWrapper.setError ("Nu este o parolă validă!"); altceva usernameWrapper.setErrorEnabled (false); passwordWrapper.setErrorEnabled (false); doLogin (); Am adăugat o doLogin , dar este în prezent gol, deoarece aceasta este dincolo de scopul acestui tutorial.
public void doLogin () Toast.makeText (getApplicationContext (), "OK! Sunt conectat la login", Toast.LENGTH_SHORT) .show (); // TODO: procedură de conectare; nu fac obiectul acestui tutorial.
S-ar putea să doriți să faceți un ultim lucru, schimbând culoarea TextInputLayout widget. În mod implicit, funcția AppCompact tema îl pune în verde, dar destul de des această culoare este în conflict cu paleta dvs. de culori.
Google a scris foarte bine Biblioteca de suport pentru proiectare. Culorile fiecărui widget sunt extrase direct din culorile temei, specificate în textul dvs. style.xml fişier. Doar deschideți-l și adăugați colorAccent pentru a schimba schema de culori a formularului.
În acest tutorial, am văzut cum să implementăm noul element de aspect TextInputLayout, mulțumită bibliotecii de suport a proiectului introdusă.
Paradigma de proiectare pe care acest widget o implementează permite utilizatorilor să nu piardă niciodată contextul informațiilor pe care le introduc și a fost introdusă de Google anul trecut, împreună cu materialele de design.
În acel moment, nu exista o bibliotecă de suport care să ofere dezvoltatorilor posibilitatea de a pune acest widget în acțiune în proiectele lor, până la Google I / O 2015. Acum, dacă aplicația dvs. se așteaptă la un fel de date, veți fi într-adevăr conform cu designul material.
