DevCorner: l'importanza del contesto

Sull'onda dell'interesse suscitato in questi giorni su Google+ da un nuovo pattern implementato prima da Cyril Mottier e poi da Chris Banes in versione open source, vi proponiamo una puntata leggermente diversa dal solito ma, speriamo, non meno interessante.

Facciamo un passo indietro ed introduciamo la domanda da cui ha avuto origine il tutto: l'utente è sempre consapevole di cosa sta inserendo in un form? Prendiamo ad esempio una registrazione: quante volte ci è capitato di non ricordarci cosa stiamo inserendo? Era la via, la città o il numero civico?

Potremmo obbiettare che esistono gli hint: vero, ma solamente quando l'EditText bersaglio è vuota. E se, nel frattempo, ci dimenticassimo? Proprio per questo motivo, lo sviluppatore francese ha pensato di costruire un pattern che permetta all'utente di ricordarsi con facilità cosa stia digitando: tramite una label a scomparsa, l'hint viene ripetuto sopra la casella di testo, in modo da ricordare all'utente il tipo di dato richiesto dal campo, come avviene nell'animazione seguente.

Cyril Mottier non ha però potuto pubblicare il suo codice, ci ha pensato però Chris Banes, sviluppatore presso Google, ad introdurre la versione che andremo ad implementare velocemente nell'esempio di questo episodio.

La base di tutto è un FrameLayout che può avere come unico figlio una EditText, di cui preleverà l'hint e ci mostrerà del colore e dello stile che abbiamo deciso in una label a scomparsa.

Vediamo però l'implementazione vera e propria: scarichiamo da GitHub il gist di Chris e creiamo un nuovo progetto Android. Dallo zip estraiamo la classe Java che andremo ad incollare nei nostri sorgenti, avendo cura di specificarne il package all'inizio (altrimenti Android Studio potrebbe lamentarsi), sistemando il file attrs.xml nella cartella res/values. All'interno di questo file troveremo gli attributi personalizzati che lo sviluppatore ha implementato per il suo layout, ovvero il padding laterale della label e lo stile del testo in essa contenuto.

Nel caso Gradle vi desse un errore strano durante la compilazione, è sufficiente cancellare il tag iniziale relativo alla versione dell'XML per evitare ulteriori problemi.

Abbiamo detto che però possiamo inserire uno stile per la label e andiamo quindi a definirne il colore (tramite un selector, che ne cambierà i valori a seconda dello stato)
e salviamo il file nella cartella Drawable: quando la EditText sarà attiva, la label sarà verde, altrimenti rimarrà grigia, nel nostro esempio.

Passiamo quindi a definire lo stile vero e proprio, selezionando il colore della label (che abbiamo appena definito), la dimensione ed il tipo di carattere.

Ora che abbiamo tutte le risorse, possiamo usare il nostro layout per introdurre questa feature, semplicemente racchiudendo la EditText all'interno del FrameLayout, come mostrato nei sorgenti.

Come ogni settimana, potrete trovare tutte le risorse sul nostro forum. Buona programmazione a tutti!