Lezione 5 Widget e Layout (XML)

Transcript

1 A cura di Carlo Pelliccia Con la precedente lezione abbiamo imparato a disporre sullo schermo i principali widget messi a disposizione da Android: bottoni, caselle di testo, check box e via discorrendo. La logica che permea la loro creazione ed il loro utilizzo, come abbiamo potuto osservare, non si discosta di molto da quella adottata da altre librerie Java per le interfacce utente, come AWT e Swing. Questo modo di creare le GUI è potente, ma anche estremamente tedioso. Ogni volta che si deve utilizzare un widget, lo si deve creare, personalizzare ed inserire in un contenitore predisposto in precedenza. Per ogni componente e per ogni contenitore ci vogliono diverse righe di codice, anche nei casi più semplici. La programmazione di interfacce complesse, di conseguenza, è poco intuitiva e piuttosto noiosa. Sin dalle origini delle interfacce basate sui widget, i creatori delle piattaforme di sviluppo hanno cercato di porre rimedio a questo difetto. Nella maggior parte dei casi si è fatto ricorso ad editor visuali: il programmatore, anziché scrivere codice, trascina i componenti sull editor, dimensionandoli ad occhio ed impostandone le caratteristiche salienti mediante delle procedure guidate. Il lavoro sporco lo fa l editor in sottofondo, generando ed interpretando il codice di programmazione necessario. Questo approccio è valido, ma da solo non costituisce una vera e propria soluzione del problema. Il codice prolisso e difficile da gestire, infatti, è ancora lì: l ambiente di sviluppo non ha fatto altro che nascondere la sporcizia sotto il tappeto. Gli editor visuali, poi, sono molto difficili da realizzare, perché devono interpretare e generare del codice complesso, ed infatti ne esistono davvero pochi di buona qualità. Il codice generato automaticamente, infine, è spesso un obbrobrio. L ambiente, infatti, non ha l intelligenza sufficiente per scrivere e mantenere un codice leggibile e performante. Apriamo ora una parentesi, per ricollegarci all argomento più tardi. Un tempo si riteneva che la programmazione Web fosse, in qualche misura, meno pregiata della programmazione di applicazioni native. Molti puristi hanno creduto (ed alcuni credono ancora oggi) che fare software per il Web significhi lavorare con piattaforme inferiori e di scarsa qualità, ed hanno guardato con sdegno strumenti quali HTML, XML e JavaScript. I fatti, invece, hanno poi dimostrato il contrario. Oggi lo sviluppo delle applicazioni Web è complesso tanto quanto quello delle applicazioni desktop, se non addirittura di più. Con l avvento dei browser moderni, di AJAX e degli interpreti di nuova concezione, si sono portate sul Web molte applicazioni che, fino a ieri, erano appannaggio esclusivo degli ambienti desktop e dei linguaggi compilati. I client di posta elettronica, ad esempio, stanno scomparendo a favore delle webmail. Il proliferare delle applicazioni Web sta facendo maturare velocemente gli strumenti di sviluppo propri di questo ambito. All inizio la programmazione Web sottraeva idee alla programmazione delle applicazioni native, emulandone approcci e strumenti; ora, invece, si assiste ad un inversione di tendenza. La programmazione Web, ad esempio, ha dimostrato quanto sia più facile gestire un interfaccia utente descrivendone i componenti con un linguaggio a marcatori, anziché con un linguaggio di programmazione. I linguaggi a marcatori come HTML ed XML ben si prestano a questo genere di operazioni: sono più facili da leggere e da scrivere, sia per l uomo sia per la macchina (cioè per gli editor visuali). Così oggi le piattaforme moderne applicano alla programmazione di applicazioni native il medesimo principio, fornendo agli sviluppatori framework ed editor basati perlopiù su XML. Uno dei primi tentativi in tal senso ad aver avuto successo è stato XUL, nato in casa Mozilla ed impiegato per le GUI di Firefox e di altre applicazioni della fondazione, poi importato anche in altri ambiti ed ambienti (ad esempio ne esiste un implementazione per Swing). Torniamo ora ad Android, ed ancora una volta constatiamo come esso sia un sistema operativo di moderna concezione. Come abbiamo imparato nella lezione precedente, le GUI possono essere realizzate con un approccio classico, basato sul codice di programmazione. Spesso e volentieri, però, è più semplice ricorrere all approccio moderno, basato su XML, che Android rende disponibile nativamente.

2 Layout XML Veniamo al dunque. Avrete sicuramente notato che la struttura predefinita di un progetto Android creato in Eclipse contiene sempre la directory res/layout. Abbiamo già conosciuto alcune fra le sottodirectory di res e, in tutti i casi, abbiamo osservato come la piattaforma di sviluppo gestisse in maniera speciale le differenti categorie di risorse possibili. La cartella layout non fa eccezione. Al suo interno possono essere disposti dei file XML che il sistema interpreterà come descrizioni dichiarative dei layout e dei widget che saranno poi usati in una o più attività dell applicazione. Un esempio, in questo caso, vale più di mille parole. La lezione precedente abbiamo chiuso con questo codice: TextView label1 = new TextView(this); label1.settext("nome:"); EditText edit1 = new EditText(this); TextView label2 = new TextView(this); label2.settext("cognome:"); EditText edit2 = new EditText(this); TextView label3 = new TextView(this); label3.settext("sesso:"); RadioButton radio1 = new RadioButton(this); radio1.settext("m"); RadioButton radio2 = new RadioButton(this); radio2.settext("f"); RadioGroup radiogroup1 = new RadioGroup(this); radiogroup1.setorientation(linearlayout.horizontal); radiogroup1.setgravity(gravity.center); radiogroup1.addview(radio1); radiogroup1.addview(radio2); Button button1 = new Button(this); button1.settext("salva"); Button button2 = new Button(this); button2.settext("annulla"); TableRow row1 = new TableRow(this); row1.setgravity(gravity.center); row1.addview(label1); edit1.setgravity(gravity.fill); row1.addview(edit1); TableRow row2 = new TableRow(this); row2.setgravity(gravity.center); row2.addview(label2); row2.addview(edit2); TableRow row3 = new TableRow(this); row3.setgravity(gravity.center); row3.addview(label3); row3.addview(radiogroup1); TableLayout tablelayout = new TableLayout(this); tablelayout.setgravity(gravity.center_horizontal Gravity.TOP); tablelayout.addview(row1); tablelayout.addview(row2); tablelayout.addview(row3); tablelayout.setcolumnshrinkable(0, true); tablelayout.setcolumnstretchable(1, true); LinearLayout linearlayout1 = new LinearLayout(this); linearlayout1.setgravity(gravity.center); linearlayout1.setorientation(linearlayout.horizontal); linearlayout1.addview(button1); linearlayout1.addview(button2); LinearLayout linearlayout2 = new LinearLayout(this); linearlayout2.setgravity(gravity.center); linearlayout2.setorientation(linearlayout.vertical); linearlayout2.setpadding(5, 5, 5, 5); linearlayout2.addview(tablelayout); linearlayout2.addview(linearlayout1); setcontentview(linearlayout2); Si tratta del codice necessario per assemblare un modulo per l inserimento dei dati anagrafici di una persona (nome, cognome, sesso). È stato un buon espediente per mostrare l utilizzo combinato di Pagina 2

3 alcuni layout (LinearLayout, TableLayout) ed alcuni widget (TextView, EditText, Button, RadioButton). Figura 1 - Un form che permette all utente l inserimento dei suoi dati anagrafici di base. L esempio ha l effetto collaterale di dimostrare come sia poco naturale usare Java per assemblare un interfaccia utente: il codice è poco leggibile, i nomi delle variabili poco significativi, e bisogna concentrarsi molto per capire chi contiene cosa. È il classico caso in cui il formato XML è vantaggioso: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:padding="5px" android:gravity="center" android:orientation="vertical" android:layout_gravity="center"> <TableLayout android:gravity="center" android:layout_gravity="top center_horizontal" android:shrinkcolumns="0" android:stretchcolumns="1"> <TableRow android:gravity="fill_horizontal center_vertical"> <TextView android:layout_height="fill_parent" android:text="nome:" /> <EditText android:layout_height="fill_parent" /> </TableRow> <TableRow android:gravity="fill_horizontal center_vertical"> <TextView android:layout_height="fill_parent" android:text="cognome:" /> <EditText android:layout_height="fill_parent" /> </TableRow> <TableRow android:gravity="fill_horizontal center_vertical"> <TextView android:text="sesso:" /> Pagina 3

4 <RadioGroup android:orientation="horizontal" android:layout_gravity="center"> <RadioButton android:text="m" /> <RadioButton android:text="f" /> </RadioGroup> </TableRow> </TableLayout> <LinearLayout > <Button android:text="salva" /> <Button android:text="annulla" /> </LinearLayout> </LinearLayout> Questo XML, dopo averci fatto l occhio, risulta molto più semplice da gestire del suo corrispettivo Java. Anzitutto, per quanto riguarda la composizione dei layout, l utilizzo dell indentatura permette di individuare immediatamente chi è il contenitore e chi il contenuto. Gli attributi di XML, poi, sono molto più semplici ed intuitivi, rispetto ai metodi del tipo setproprietà() di Java. Con gli attributi è più semplice impostare le proprietà di ogni singolo componente, come il testo visualizzato, il padding, la gravità e così via. Creare un editor visuale in grado di leggere e scrivere questo XML, inoltre, è estremamente più facile che realizzare un editor in grado di fare lo stesso con del codice Java. In Eclipse, insieme con il plug-in ADT per lo sviluppo dei progetti Android, ne avete già installato uno. Provate a creare un file di layout in un progetto Android, sotto il percorso res/layout. Facendo doppio clic sul file l ambiente lo aprirà nel suo editor visuale. Figura 2 - L editor visuale compreso con ADT per la creazione guidata dei layout XML in ambiente Eclipse. Pagina 4

5 Qui è possibile aggiungere layout e widget semplicemente pescandoli dal menù sulla sinistra e trascinandoli sulla schermata al centro, che rappresenta l interfaccia grafica così come apparirà nello smartphone. Selezionando un componente è possibile accedere all elenco delle sue proprietà, mostrate nella scheda Properties in basso. Da qui è possibile manipolare i parametri del componente. Con un po di pratica si riesce a costruire velocemente qualsiasi tipo di interfaccia. È comunque possibile lavorare a mano sul codice XML, attivando la linguetta in basso che riporta il nome del file aperto. L ambiente, anche in questo caso, fornisce alcune utili agevolazioni, come l auto-completamento dei tag, degli attributi e dei valori, con tanto di aiuto in linea, come mostrato in figura. Figura 3 - Anche passando all editing manuale dei layout XML è possibile usufruire di alcune agevolazioni in ambiente Eclipse ADT, come l auto-completamento e l help in linea per tag ed attributi. Richiamare un layout XML Nella directory res/layout si possono memorizzare quanti file si desidera. L ambiente li compila e genera automaticamente un riferimento verso ciascuno di essi nella classe R, nel gruppo layout. Ad esempio il file res/layout/miolayout.xml avrà il suo riferimento in R.layout.mioLayout. Questo riferimento, passando al codice Java, può essere utilizzato per invocare ed adoperare il layout realizzato. La classe Activity, ad esempio, dispone di una versione di setcontentview() che accetta come argomento un riferimento ad un oggetto di tipo layout. Continuando con l esempio XML del paragrafo precedente (che va salvato al percorso res/layout/main.xml), realizziamo un attività in grado di caricare e mostrare il layout realizzato: package mieapplicazioni.test; import android.app.activity; import android.os.bundle; public class TestActivity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } } Regole generali Entriamo un po più nel dettaglio del formato XML usato per descrivere un layout. Come è facile intuire, i tag adoperabili al suo interno corrispondono ai nomi dei widget e dei layout manager Pagina 5

6 descritti nella lezione precedente. In pratica al widget Java android.widget.textview corrisponde il tag XML <TextView>, al layout manager android.widget.linearlayout corrisponde <LinearLayout>, e così via. Potete riprendere la lezione precedente e desumere da voi le corrispondenze fra classi e tag. È invece importante sapere che il namespace da utilizzare è: Normalmente lo si fa dichiarando il namespace nel primo tag utilizzato (quello di ordine superiore), abbinandogli lo shortname android. In breve, il modello da seguire è il seguente: <tag1 xmlns:android=" android:attr1="val1" android:attr2="val2"> <tag2 android:attr1="val1" android:attr2="val2" /> <tag2 android:attr1="val1" android:attr2="val2" /> </tag1> Là dove gli attributi sono utilizzati per immettere un valore libero, ad esempio un testo, una dimensione, un colore, un immagine e così via, è possibile sfruttare i riferimenti ad altri materiali conservati nella gerarchia della cartella res. Quando è stato trattato lo speciale file AndroidManifest.xml abbiamo imparato ad usare i riferimenti del Ad esempio, per richiamare la stringa titoloapplicazione definita in un XML sotto res/values, è possibile Bene, la stessa identica cosa può essere fatta in un XML di layout. Ad esempio, si può ricorrere a questa funzionalità quando si imposta il testo mostrato in un bottone. Invece di scrivere: <Button android:text="salva" /> Si può scrivere: <Button android:text="@string/etichettabottonesalva" /> A patto, ovviamente, di aver creato in res/values un file XML che definisca la risorsa stringa etichettabottonesalva, come ad esempio: <?xml version="1.0" encoding="utf-8"?> <resources> <string name="etichettabottonesalva">salva</string> </resources> La regola vale non soltanto per le stringhe, ma per tutte le categorie di risorse. per gli per i per le per i valori drawable, ma anche per le immagini messe in per richiamare altri layout. Pagina 6

7 @raw, per i file nella cartella per le per gli stili. Laboratorio di Ingegneria del Software A.A 2009/2010 Assegnare un ID ai componenti A ciascun componente dichiarato nell XML, sia esso un contenitore o un widget, è possibile assegnare un identificativo, utile per rintracciare successivamente il componente. Per assegnare un identificativo si deve utilizzare l attributo id: <Tag android:id="..." /> Per assegnare l ID è necessario seguire una particolare sintassi, basata sul seguente Questa sintassi fa sì che nella classe R venga introdotto, se non esiste già, il gruppo nomegruppo, e che al suo interno venga memorizzato il riferimento all ID nomeid. Sarà pertanto possibile ricorrere all ID, nel codice Java, usando il riferimento: R.nomeGruppo.nomeId Facciamo il caso di questo bottone: <Button android:id="@+idbottoni/salva" android:text="salva" /> In Java sarà possibile richiamarlo adoperando il riferimento: R.idBottoni.salva Le attività dispongono del metodo findviewbyid(), che come il nome lascia presupporre, ricercano nel layout caricato un componente avente l ID specificato come argomento. Il bottone può a questo punto essere recuperato e manipolato (ad esempio per aggiungere un gestore di evento, come impareremo prossimamente): Button button = (Button) findviewbyid(r.idbottoni.salva); Attributi comuni Gli attributi applicabili ad un tag variano a seconda del componente cui fanno riferimento. Ad esempio il tag <Button> dispone dell attributo text con il quale è possibile impostare il testo visualizzato all interno del bottone, mentre il tag <LinearLayout> ha l attributo orientation che serve per stabilire la direzione in cui disporre i widget. In alcuni casi gli attributi sono obbligatori, mentre in altri sono opzionali. La maggior parte dei componenti, poi, dispone davvero di molti attributi. Per esplorare tutti gli attributi di ogni specifico widget, di conseguenza, è meglio affidarsi alle procedure guidate di un editor visuale, come quello di Eclipse ADT descritto sopra. Gli stessi attributi, naturalmente, sono esaustivamente riportati anche nella documentazione ufficiale. Tutto ciò per dire che, in generale, non ci inalbereremo nello studio di tutti gli attributi possibili. Ci concentreremo invece su quelli comuni o comunque più interessanti. I primi due che esaminiamo sono sempre obbligatori, e si chiamano layout_width e layout_height. Servono per decretare come si relazioni l oggetto rispetto alle dimensioni del suo contenitore. Due sono i valori possibili: Pagina 7

8 Ad esempio: Laboratorio di Ingegneria del Software A.A 2009/2010 wrap_content Rende il componente grande tanto quanto impongono i suoi sotto-componenti. In pratica tutti i sotto-componenti vengono dimensionati rispetto, possibilmente, alla loro dimensione ideale, e poi il contenitore che li contiene viene dimensionato di conseguenza. fill_parent Allarga il componente fino a fargli occupare tutto lo spazio a sua disposizione concessogli dal suo contenitore d ordine superiore. <Button android:text="salva" /> Questo bottone sarà grande tanto quanto basta a mostrare la scritta Salva. Quest altro invece: <Button android:layout_height="fill_parent" android:text="salva" /> Sarà allargato, sia in orizzontale sia in verticale, fino ad occupare tutto lo spazio messo a sua disposizione. Figura 4 - Le quattro differenti maniere di dimensionare un componente rispetto al suo contenitore. Da sinistra a destra: wrap_content su layout_width e layout_height; wrap_content su layout_width e fill_parent su layout_height; fill_parent su layout_width e wrap_content su layout_height; fill_parent su layout_width e su layout_height. Altri attributi condivisi da tutti i componenti sono quelli definiti nella classe View, ereditati poi da tutti i widget e tutti i layout. Fra questi si segnalano: minwidth e minheight Permettono di specificare una dimensione minima per il componente. La misura deve essere espressa letteralmente, specificando l unità di misura, oppure riferendo una dimensione definita sotto res/values. paddingleft, paddingtop, paddingright, paddingbottom e padding Pagina 8

9 Permettono di specificare il padding (margine interno) del componente. I primi quattro attributi permettono di distinguere la misura di padding assegnata in ogni direzione, mentre il quinto permette di assegnare a tutte e quattro le direzioni il medesimo padding con un istruzione sola. I valori espressi devono essere dotati di unità di misura, o in alternativa fare riferimento ad una dimensione nota in res/values. visibility Accetta tre possibili valori: 0 (visibile), 1 (invisibile), 2 (scomparso). Nel primo caso, che è quello di default, il componente è visibile. Nel secondo caso il componente non è visibile, ma lo spazio spettante viene riservato e mantenuto vuoto. Nel terzo caso il componente è invisibile e nessuno spazio gli viene assegnato durante il disegno del layout, proprio come non fosse mai esistito. La visibilità di un componente può essere poi manipolata a runtime da codice, con il metodo setvisibility(). Esistono poi dei tag non comuni a tutti i widget, ma molto diffusi. Tra questi: width e height Permettono di stabilire una dimensione precisa del componente, attraverso una misura scritta letteralmente o riferita da res/values. maxwidth e maxheight Permettono di stabilire una dimensione massima del componente, attraverso una misura scritta letteralmente o riferita da res/values. gravity Stabilisce la gravità applicata al componente. I valori possibili sono: top, bottom, left, right, center_vertical, center_horizontal, center, fill_horizontal, fill_vertical, fill, clip_vertical e clip_horizontal. Più valori compatibili possono essere concatenati con un carattere di pipe. Ad esempio: gravity="top center_horizontal". I tanti componenti che derivano da TextView (tra cui i diversi tipi di bottoni) hanno a loro disposizione: text Permette di impostare il testo visualizzato, attraverso un valore letterale o un riferimento a stringa memorizzata sotto res/values. Una particolare estensione di TextView è EditText. Con EditText si realizza una casella di input, che permette all utente di immettere del testo. In questo caso possono tornare utili i seguenti attributi: hint Un suggerimento da visualizzare quando non c è del testo visualizzato. password Un booleano (true o false) che indica se il campo contiene una password. In questo caso il testo viene camuffato in modo da non risultare leggibile ad un occhio indiscreto. Pagina 9

10 numeric Rende il campo di tipo numerico. Si deve specificare uno o più valori (separandoli con pipe) fra integer, signed e decimal. Il primo indica un valore intero, il secondo un valore numerico con segno, il terzo di un valore decimale. In questa maniera, in un campo EditText o derivato, è possibile controllare l input dell utente, in modo che il valore inserito sia sempre della natura che ci si aspetta. digits Da usare se il campo è numerico. Permette di specificare quali cifre è possibile utilizzare. Ad esempio il valore 123 farà sì che l utente possa inserire nel campo sono le cifre 1, 2 e 3. Consultando la documentazione ufficiale si può completare in autonomia la panoramica. XML Se non siete pratici di XML e di linguaggi a marcatori correte il rischio di non condividere quanto ribadito in questa lezione, e di considerare più semplice il design delle interfacce utente a mezzo di un linguaggio di programmazione come Java. Se la pensate così è solo perché ancora non siete riusciti a cogliere l essenza di XML e del suo utilizzo. Non dovete farvi spaventare: XML è nato per essere semplice, e dunque è anche facile. Ecco alcuni link per studiare cosa sia XML e come funzioni: Namespace I namespace di XML, per semplificare, sono l equivalente dei package in Java. Chi inventa un nuovo gruppo di tag, per regola, deve inserirli in un namespace, in modo che possano essere utilizzati senza andare in collisione con eventuali altri tag omonimi di un altro autore. I package di Java hanno la forma aaa.bbb.ccc, mentre i namespace di XML sono un URL del tipo Benché questo sia un indirizzo Web a tutti gli effetti, non è detto che debba per forza esserci un file da scaricare a quel percorso, anche se in genere l autore ci mette la definizione dei tag e degli attributi previsti dal namespace. A ciascuno dei namespace importati in un tag XML è possibile associare uno shortname, cioè un nome breve, utile per richiamare tag ed attributi del namespace senza ambiguità. Per approfondire i namespace e per qualche esempio pratico: Pagina 10

11 Attributi XML sulla documentazione Android eredita dalle piattaforme Java la maniera di organizzare la documentazione delle sue API. L indirizzo deve essere sempre tra i preferiti di ogni programmatore Android. Proprio come la documentazione javadoc di Java, la reference di Android riporta l elenco dei package e delle classi disponibili nel sistema. Per ciascuna classe sono riportate proprietà e metodi. In più, per tutte le classi che corrispondono a widget e layout manager richiamabili anche da XML, la documentazione riporta inoltre anche gli attributi previsti. Si veda, ad esempio, android.widget.textview: Pagina 11