Share
In questo tutorial, parlerò di nuovo di Material Design. Google I / O 2015 è stato un evento importante per ogni sviluppatore Android e il design è stato ovviamente parte della discussione.
Google ha capito che la compatibilità con le versioni precedenti è la parte più difficile dell'implementazione della progettazione dei materiali. Certo, supporta le librerie, come appcompat-v4 e appcompat-V7, sono parte della soluzione. però, Theme.AppCompat non implementa tutti gli elementi materiali utilizzati nelle applicazioni ufficiali di Google. Una delle funzionalità che non è presente nel AppCompat il tema è la possibilità di posizionare un'etichetta mobile sopra a Modifica il testo widget di. Puoi vedere cosa intendo nell'esempio qui sotto.
Durante Google I / O 2015, il team di Android ha rilasciato una nuova libreria di supporto, il Libreria di supporto progettuale. È molto utile per questo tipo di problema. Questo tutorial ti mostrerà come usare il nuovo TextInputLayout widget incluso in Libreria di supporto progettuale.
Accentsconagua
TextInputLayout In Android Studio, scegli Nuovo> Nuovo progetto dal File menu. Inserire le informazioni richieste per configurare il progetto e creare il progetto. Nel mio esempio, ho indirizzato il progetto a API 7, che è il livello API minimo supportato dalla libreria di supporto di progettazione. Puntando a un livello API così basso, la tua app funzionerà su quasi tutti i dispositivi Android. Ho chiamato l'attività principale LoginActivity e il suo file di layout activity_login.xml.
Dopo aver impostato il progetto, rimuovere nell'attività principale il file onCreateOptionsMenue onOptionsItemSelected metodo che viene generato automaticamente da Android Studio. La schermata di accesso che stiamo per creare non ha bisogno di un menu, quindi è bene cancellare questi metodi. Ricorda anche di cancellare il file di menu XML che vive in res / menù cartella.
Per usare il TextInputLayout widget, devi importare due librerie. Il primo è appcompat-V7, che garantisce che gli stili dei materiali siano compatibili con le versioni precedenti. Il secondo è il Libreria di supporto progettuale.
Nel tuo progetto build.gradle file, aggiungi le seguenti linee nelle dipendenze del progetto:
dependencies compile fileTree (dir: 'libs', include: ['* .jar']) compila 'com.android.support:design:22.2.0' compile 'com.android.support:appcompat-v7:22.2.0 '
Se Gradle non ti chiede automaticamente di sincronizzare il tuo progetto, scegli Crea modulo 'app' dal Costruire menu o premere F9. In questo modo, il sistema di build di Android Studio recupererà automaticamente le risorse necessarie e sarà possibile importare qualsiasi classe richiesta.
L'interfaccia utente di questo progetto è molto semplice. Mostra un'etichetta di benvenuto (che può essere facilmente sostituita da un logo se ne hai uno) e due Modifica il testo elementi, uno per il nome utente e uno per la password. Il layout include anche un pulsante che attiva la sequenza di accesso. Il colore di sfondo è un bel, piatto, grigio chiaro.
Un altro importante dettaglio che vale la pena ricordare è l'impostazione corretta di InputType attributo del Modifica il testo elementi. Il InputType del primo Modifica il testo elemento dovrebbe essere impostato su textEmail mentre quello del secondo dovrebbe essere impostato su textPassword. Questo è come dovrebbe apparire il layout.
Potresti anche voler eliminare la barra delle applicazioni, precedentemente nota come barra delle azioni, modificando il file style.xml file come mostrato di seguito.
TextInputLayoutSiamo finalmente arrivati alla parte più interessante di questo tutorial. UN TextInputLayout il widget si comporta esattamente come a LinearLayout fa, è solo un involucro. TextInputLayout accetta solo un elemento figlio, simile a a ScrollView. L'elemento figlio deve essere un Modifica il testo elemento.
Si noti che ho specificato un altro parametro nel Modifica il testo oggetto, a suggerimento. Come già sai, questo attributo ti consente di mostrare un suggerimento personalizzato quando non ci sono contenuti nel file Modifica il testo. Quando l'utente inizia a digitare, il suggerimento scompare. Questo non è eccezionale, perché perdono il contesto delle informazioni che stanno inserendo.
Grazie a TextInputLayout, questo non sarà più un problema. Mentre il Modifica il testo da solo nasconderà il suggerimento dopo che il primo carattere è stato digitato, quando avvolto in a TextInputLayout il suggerimento diventerà un'etichetta mobile sopra il Modifica il testo. È inclusa anche una bella animazione materiale.
Quindi, facciamo lo stesso per il campo della password.
Se esegui l'applicazione ora, non succederà nulla. Certo, il Modifica il testo l'attributo hint si comporterà come previsto. Tuttavia, non ci sono animazioni di materiali e etichette fluttuanti. Perché? Manca ancora del codice per far funzionare tutto.
Sotto il setContentView metodo, inizializza i riferimenti al TextInputLayout visualizzazioni.
final TextInputLayout usernameWrapper = (TextInputLayout) findViewById (R.id.usernameWrapper); final TextInputLayout passwordWrapper = (TextInputLayout) findViewById (R.id.passwordWrapper);
Per animare l'etichetta mobile, devi solo impostare un suggerimento, usando il setHint metodo.
usernameWrapper.setHint ( "Nome utente"); passwordWrapper.setHint ( "Password");
E hai finito. La schermata di accesso ora segue correttamente le linee guida sulla progettazione dei materiali. Esegui l'applicazione per vedere la tua bellissima schermata di accesso.
Un'altra bella caratteristica di TextInputLayout è il modo in cui può gestire gli errori. Convalidando l'input, si impedisce agli utenti di digitare erroneamente il proprio indirizzo e-mail o di inserire una password troppo breve.
Con la convalida dell'input, le credenziali errate sarebbero state elaborate dal back-end, gli errori sarebbero stati generati e inviati al client e mostrati all'utente (in attesa). Una notevole perdita di tempo e una scarsa esperienza utente. Dovresti controllare l'input dell'utente prima di inviarlo al back-end.
al clic MetodoDevi prima gestire il clic del pulsante. Esistono molti modi per gestire i clic sui pulsanti. Uno di questi è scrivendo un metodo personalizzato e specificandolo nel file XML tramite il al clic attributo. preferisco setOnClickListener, ma è solo una questione di gusto personale.
btn.setOnClickListener (new View.OnClickListener () @ Override public void onClick (View v) // STUB);
Sappiamo che se viene chiamato questo metodo, l'utente non ha più bisogno della tastiera. Sfortunatamente, Android non nasconde la tastiera virtuale automaticamente, a meno che tu non lo dica. Chiamata hideKeyboard nel al clic metodo corpo.
private void hideKeyboard () Visualizza view = getCurrentFocus (); if (view! = null) ((InputMethodManager) getSystemService (Context.INPUT_METHOD_SERVICE)). hideSoftInputFromWindow (view.getWindowToken (), InputMethodManager.HIDE_NOT_ALWAYS);
Prima di impostare le etichette di errore, è necessario definire cos'è un errore e cosa no. Supponiamo che il nome utente debba essere un indirizzo email e vogliamo impedire agli utenti di inserire un indirizzo email non valido.
Convalidare un indirizzo email è un po 'complesso. Dobbiamo fare affidamento su espressioni regolari. Puoi anche usare la libreria Apache Commons se lo desideri.
Ho scritto la seguente espressione regolare, utilizzando le linee guida suggerite da Wikipedia sulla validità dell'e-mail.
/^[a-zA-Z0-9#_~!$&'()*+,;=:."(),:;<>@\[\]\\]+@[a-zA-Z0 -9 -] + (\ [a-zA-Z0-9 -.] +) * $ /
Il significato di questa espressione regolare è piuttosto semplice. Comprende tre gruppi di cattura. Il primo corrisponde alle lettere dell'alfabeto (maiuscole e minuscole), numeri e una serie di simboli accettati. A causa del + quantificatore, questo gruppo corrisponde a una stringa composta da almeno un carattere.
Avanti, c'è il @ simbolo, che è ovviamente richiesto in ogni indirizzo email. Il secondo gruppo accetta solo lettere, numeri e trattini. Anche la lunghezza deve essere almeno una (]+).
Infine, c'è l'ultimo gruppo, che contiene un punto e il cui scopo è quello di abbinare sottodomini e TLD. Il suo quantificatore è una stella, *, il che significa che questo gruppo cerca una stringa la cui lunghezza può essere zero o superiore. In effetti, gli indirizzi email con un dominio, ma nessun TLD, sono effettivamente validi.
Dal momento che vogliamo convalidare a Stringa, dobbiamo fare affidamento su Modello e Matcher classi, incluse nel java.util.regex pacchetto. Importa queste classi nella tua attività e quindi implementa il seguente metodo:
stringa finale statica privata EMAIL_PATTERN = "^ [a-zA-Z0-9 # _ ~! $ & '() * +,; =:. \" (),:; <> @ \\ [\\] \\ \\] + @ [a-zA-Z0-9 -] + (\\. [a-zA-Z0-9 -] +) * $ "pattern pattern privato = Pattern.compile (EMAIL_PATTERN); Matcher matcher privato ; public booleano validateEmail (String email) matcher = pattern.matcher (email); return matcher.matches ();
La convalida del campo della password è molto più semplice. La maggior parte delle organizzazioni implementa politiche diverse per la validità della password, ma ognuno impone una lunghezza minima. Una ragionevole regola empirica è che la password non dovrebbe mai essere più breve di sei caratteri.
public boolean validatePassword (String password) return password.length ()> 5;
Come ho detto, TextInputLayout è solo un involucro, ma a differenza LinearLayout e ScrollView, puoi ottenere il suo elemento figlio usando un metodo specifico, getEditText. Non c'è bisogno di usare findViewById.
Se TextInputLayout non contiene un Modifica il testo, getEditText ritorna nullo quindi fai attenzione a a NullPointException.
public void onClick (Visualizza v) hideKeyboard (); String username = usernameWrapper.getEditText (). GetText (). ToString (); String password = usernameWrapper.getEditText (). GetText (). ToString (); // TODO: Controlla // TODO: Accedi
TextInputLayout la gestione degli errori è facile e veloce. I metodi richiesti sono setErrorEnabled e setError.
setError imposta un messaggio di errore rosso che verrà visualizzato sotto il Modifica il testo. Se il parametro passato è nullo, il messaggio di errore è cancellato. Cambia anche il colore del tutto Modifica il testo widget a rosso.
setErrorEnabled abilita la funzionalità di errore. Questo influenza direttamente le dimensioni del layout, aumentando il riempimento inferiore per lasciare spazio all'etichetta di errore. Abilitare questa funzionalità prima di impostare un messaggio di errore tramite setError significa che questo layout non cambierà dimensione quando viene visualizzato un errore. Dovresti fare alcuni test combinando questi due metodi in modo che tu possa vederedi cosa sto parlando.
Un altro fatto interessante è che se la funzionalità di errore non è stata ancora abilitata e si chiama setError passando un parametro non null, quindi setErrorEnabled (vero) verrà automaticamente chiamato.
Ora che abbiamo definito ciò che è giusto e ciò che è sbagliato, e sappiamo come recuperare i dati e visualizzare possibili errori, l'implementazione del al clic il metodo diventa banale.
public void onClick (Visualizza v) hideKeyboard (); String username = usernameWrapper.getEditText (). GetText (). ToString (); String password = usernameWrapper.getEditText (). GetText (). ToString (); if (! validateEmail (username)) usernameWrapper.setError ("Not a valid email address!"); else if (! validatePassword (password)) passwordWrapper.setError ("Not a valid password!"); else usernameWrapper.setErrorEnabled (false); passwordWrapper.setErrorEnabled (false); doLogin (); Ho aggiunto un doLogin metodo, ma è attualmente vuoto poiché questo è oltre lo scopo di questo tutorial.
public void doLogin () Toast.makeText (getApplicationContext (), "OK! Sto eseguendo il login.", Toast.LENGTH_SHORT) .show (); // TODO: procedura di login; non nell'ambito di questo tutorial.
Potresti voler fare un'ultima cosa, cambiando il colore del TextInputLayout widget di. Di default, il AppCompact il tema lo imposta in verde, ma molto spesso questo colore è in conflitto con la tavolozza dei colori.
Google ha scritto la libreria di supporto del design molto bene. Il colore di ogni widget viene disegnato direttamente dai colori del tema, specificati nel tuo style.xml file. Basta aprirlo e aggiungere il colorAccent elemento al tema attivo per modificare la combinazione di colori del modulo.
In questo tutorial, abbiamo visto come implementare il nuovo elemento di layout TextInputLayout, grazie alla libreria di supporto di progettazione appena presentata.
Il paradigma del design che questo widget implementa consente agli utenti di non perdere mai il contesto delle informazioni che stanno inserendo e che è stato effettivamente introdotto da Google lo scorso anno, insieme a Material Design.
A quel tempo, non esisteva alcuna libreria di supporto che offrisse agli sviluppatori la possibilità di mettere questo widget in azione nei loro progetti, fino all'I / O 2015 di Google. Ora, se la tua applicazione si aspetta qualche input di dati, sarai finalmente conforme al design del materiale.
