DevCorner620

DevCorner: definiamo gli attributi di una View

Roberto Orgiu

Durante il DroidCon di Berlino, tenutosi la scorsa settimana nella capitale tedesca, abbiamo avuto modo di assistere al talk di Tim Messerschmidt di PayPal che, con la sua presentazione, ha ispirato in qualche modo l’argomento di oggi.

L’ipotesi di Tim era infatti quella di aiutare gli utenti nell’evitare di scrivere le password troppe volte su schermi di dimensioni ridotte e, magari, in piedi sui mezzi pubblici: con qualche ora di lavoro siamo quindi riusciti ad implementare questi concetti in una View personalizzata, che potete reperire su GitHub.

LEGGI ANCHE: Sviluppiamo un semplice Widget.

Prima di cominciare a parlare del componente in sé (il cui comportamento è esemplificato dal video che trovate qui sotto o dall’app scaricabile tramite il link in fondo all’articolo), spieghiamo in cosa consiste il processo di creazione di un nuovo Widget: normalmente si estende View oppure uno dei suoi figli, si fa l’override di alcuni metodi (ad esempio, i costruttori) e si accettano dei parametri per modificarne il comportamento.

Vediamo quindi subito il punto centrale di questo episodio, ovvero come accettare dei parametri specificati tramite il tag XML nel Layout: per prima cosa, dovremo creare nella cartella res/values del progetto, un file attrs.xml, che andremo a riempire come mostrato qui sotto

<resources>
<declare-styleable name="PasswordView">
<attr name="buttonBackground" format="reference"/>
<attr name="securePasswordIcon" format="reference"/>
<attr name="unsecurePasswordIcon" format="reference"/>
<attr name="minButtonWidth" format="integer|reference"/>
<attr name="minButtonHeight" format="integer|reference"/>
<attr name="maxButtonWidth" format="integer|reference"/>
<attr name="maxButtonHeight" format="integer|reference"/>
<attr name="passwordValidator" format="enum|reference">
<enum name="noValidator" value="0"/>
<enum name="defaultValidator" value="1"/>
<enum name="customValidator" value="2"/>
</attr>
<attr name="passwordMessagesStrings" format="reference"/>
<attr name="passwordMessagesColors" format="reference"/>
<attr name="passwordMessageSidePadding" format="dimension|reference"/>
</declare-styleable>
</resources>

Possiamo notare come, per prima cosa, dichiariamo come stilabile un oggetto chiamato PasswordView: questo sarà il prefisso che accompagnerà tutti gli altri attributi quando andremo a recuperarli dal Java. Passiamo quindi alla riga successiva e notiamo come un attributo buttonBackground sia nel formato reference: grazie a questa istruzione, saremo in grado di accettare come valore del metatag un qualsiasi riferimento ad un Drawable esistente (nella forma @drawable/nome_componente) mentre, quando questa parola chiave è accompagnata da un altro valore (ad esempio integer, come nelle linee successive), indichiamo al compilatore che, oltre al riferimento ad una risorsa già dichiarata, ci aspettiamo anche che la tale risorsa venga inserita in maniera diretta.

Evidenziamo inoltre l’attributo passwordValidator, che ci permette di specificare uno tra i tre valori indicati dall’enum che racchiude: in questo modo, quando andremo a dichiarare questo metatag nel layout, l’IDE ci chiederà quale dei tre valori vogliamo assegnare, in modo da non doverci preoccupare di ricordare quale costante corrisponde ad una determinata funzione.

Una volta creati gli attributi nel file XML, possiamo occuparci di recuperarli da Java, iniziando col creare un TipedArray che contenga i riferimenti ai valori che abbiamo dichiarato

final TypedArray styledData = context.obtainStyledAttributes(attrs,R.styleable.PasswordView, defStyle, 0);

Ora, per ogni attributo che vogliamo recuperare, dovremo anteporre al nome il prefisso PasswordView_: in questo modo, ogni View ha le proprie impostazioni salvate in una sezione dedicata di R e sia possibile avere più View che contengano parametri con lo stesso nome senza che essi vadano in conflitto:

mSecuredPasswordDrawable = styledData.getDrawable(R.styleable.PasswordView_securePasswordIcon);

Come mostrato nel sorgente, la parte complessa si è rivelata essere quella inerente la creazione degli attributi lato XML, mentre la procedura per il recupero è sostanzialmente guidata da Android Studio stesso.

Concludiamo la puntata odierna dando un’occhiata a come si uniscano queste due parti per la creazione di una View personalizzata, andando ad esemplificare l’utilizzo di questo componente in un normale Layout

<tiwiz.passwordview.PasswordView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/layout"
app:buttonBackground="@drawable/button_background"
app:securePasswordIcon="@drawable/ic_action_secure"
app:unsecurePasswordIcon="@drawable/ic_action_not_secure"
app:passwordValidator="defaultValidator">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"/>
</tiwiz.passwordview.PasswordView>

Anche per questa settimana, siamo giunti all’epilogo della nostra rubrica: se volete provare con mano questa libreria, potete scaricare l’app cliccando sul badge qui sotto mentre, se siete curiosi di vedere come è stata implementata, vi basta un salto sul thread ufficiale del nostro forum, su cui potrete richiedere tutto l’aiuto di cui avete bisogno e ripercorrere tutte le precedenti puntate di DevCorner.

Google Play Badge