Sistemi Mobili e Wireless Android Interfacce utente: Widget e Layout (1)

Transcript

1 Sistemi Mobili e Wireless Android Interfacce utente: Widget e Layout (1) Stefano Burigat Dipartimento di Matematica e Informatica Università di Udine stefano.burigat@uniud.it

2 La classe View La classe View è il mattone fondamentale per la costruzione di interfacce utente in Android Una View rappresenta ( occupa ) un'area rettangolare di schermo ed è responsabile del disegno e della gestione eventi in tale area View è la classe base dei widget, i tipici componenti grafici delle interfacce utente (pulsanti, etichette, campi,...) La sottoclasse ViewGroup è la classe base per i layout, elementi invisibili che possono contenere altre View (o ViewGroup) e definirne la struttura (cioè come appaiono complessivamente sullo schermo) 2

3 Esempi di widget Android fornisce diversi widget più o meno comuni 3

4 Esempi di layout Android mette a disposizione diversi layout predefiniti per organizzare i widget sullo schermo 4

5 Il package android.widget Il package android.widget contiene la maggior parte delle classi per la costruzione di UI in Android Nota: la lista non è aggiornata, fare sempre riferimento alla documentazione Google 5

6 La gerarchia delle View Tutte le View di una finestra sono organizzate tramite una struttura ad albero Ogni elemento è un oggetto (derivato da) View o ViewGroup 6

7 La gerarchia delle View Il sistema Android gestisce la visualizzazione dell'interfaccia utente di un'applicazione attraversando l'albero delle View e chiedendo ad ogni View di disegnarsi Ogni View disegna se stessa e poi chiede ai propri figli di disegnarsi 7

8 Esempio di gerarchia delle View 8

9 Esempio di gerarchia delle View L'utility HierarchyViewer mostra la gerarchia delle View della schermata correntemente visualizzata sull'emulatore 9

10 Utilizzare la classe View E' possibile aggiungere View da codice oppure attraverso dei file di layout in formato XML E' anche possibile costruire View custom (ad esempio, per creare i propri widget) Tipiche operazioni effettuabili sulle View Configurare proprietà: ad esempio, configurare il testo di un'etichetta. Le proprietà che sono note a tempo di compilazione possono essere configurate nei file di layout XML. Configurare ascoltatori: le View espongono dei listener per permettere ai client di essere notificati quando succede qualche evento. 10

11 File di layout XML Un file di layout XML contiene la specifica dei vari componenti di una UI (widget e contenitori) e delle loro relazioni, scritta in formato XML Android considera i file di layout XML come delle risorse, contenute nella cartella res/layout dei progetti Android 11

12 File di layout XML Gli elementi nei file di layout XML sono organizzati secondo la gerarchia delle View Gli attributi degli elementi XML sono le proprietà che descrivono l'aspetto di un widget o il comportamento dei contenitori Esempio: Se un elemento Button contiene un attributo android:textstyle="bold" allora il testo del pulsante sarà visualizzato in grassetto Nota: tutti gli attributi definiti dal sistema Android iniziano con android: 12

13 File di layout XML Il nodo radice nei file di layout XML deve dichiarare il namespace XML Android Tutti gli altri elementi sono figli della radice ed ereditano la dichiarazione del namespace L'attributo android:id consente di identificare un elemento e di potervi fare riferimento da codice Gli attributi android:layout_width e android:layout_height consentono di specificare le dimensioni di una View rispetto alla View contenitore Possono assumere i valori match_parent, fill_parent o wrap_content oppure dei valori numerici 13

14 File di layout XML Altri attributi comunemente utilizzati android:layout_gravity determina la posizione della View rispetto al proprio contenitore android:gravity determina la posizione del contenuto di una View android:padding determina lo spazio tra il bordo di una View ed il suo contenuto android:layout_margin determina uno spazio aggiuntivo all'esterno del bordo della View (tale spazio non viene conteggiato nelle dimensioni della View) 14

15 File di layout XML padding vs. layout_margin 15

16 File di layout XML Tutti gli attributi di tipo layout_ definiscono parametri che dipendono dal tipo di Layout utilizzato (cioè del ViewGroup in cui la View è contenuta) Nota: attraverso i file di layout XML è possibile specificare attributi di una view che a volte non è possibile specificare direttamente via codice Ad esempio, non esistono metodi diretti per modificare layout_width e layout_height, è necessario istanziare un oggetto della classe LayoutParams e passarlo alla view 16

17 Dimensioni: unita' di misura Android supporta diverse unità di misura per la definizione delle dimensioni degli elementi di un'interfaccia px (pixels): pixel sullo schermo in (inches) mm (millimeters) pt (points): 1/72 di un inch dp o dip (density-independent pixels): unità di misura astratta basata sulla densità dello schermo (su un display da 160dpi abbiamo 1dp = 1px) sp (scale-independent pixels): simile a dp ma scalato in base alla dimensione predefinita dei font Tip: usare sp per la dimensione dei testi e dp per tutto il resto 17

18 Widget: TextView TextView è il widget che si utilizza per definire etichette 18

19 Widget: TextView 19

20 Widget: TextView 20

21 Widget: TextView 21

22 Widget: TextView 22

23 Widget: TextView wrap_content vs. match_parent wrap_content stabilisce le dimensioni di un widget a seconda del suo contenuto match_parent espande un widget fino ad occupare le dimensioni del suo contenitore 23

24 Widget: TextView android:layout_gravity vs. android:gravity android:layout_gravity posiziona una View rispetto alla View contenitore android:gravity posiziona il contenuto di una View all'interno della View stessa 24

25 Widget: TextView android:padding vs. android:layout_margin android:padding determina lo spazio tra il bordo di una View ed il suo contenuto android:layout_margin determina uno spazio aggiuntivo lungo il lato specificato 25

26 Widget: Button Button è il widget che permette di definire pulsanti Button è una sottoclasse di TextView 26

27 Widget: Images ImageView e ImageButton sono due widget che consentono la gestione di immagini Sono i corrispondenti di TextView e Button Ogni widget utilizza un attributo android:src o android:background per specificare l'immagine da usare Le immagini sono tipicamente risorse esterne di tipo drawable (contenute nella cartella res/drawable della struttura di ogni progetto) ImageButton è una sottoclasse di ImageView che aggiunge la gestione degli eventi tipici dei Button 27

28 Widget: Images 28

29 Widget: EditText EditText è un'estensione di TextView che consente la modifica del testo EditText ha diverse proprietà aggiuntive rispetto a TextView come android:autotext, android:hint, android:capitalize,... 29

30 Widget: EditText Una proprietà molto utile di EditText è android:inputtype il valore di questa proprietà determina il tipo di testo accettato dall'edittext ed il tipo di tastiera virtuale che appare all'utente 30

31 Widget: CheckBox CheckBox permette di definire pulsanti a due stati (checked o unchecked) Si possono anche usare ToggleButton e Switch 31

32 Widget: RadioButton RadioButton permette di definire pulsanti a due stati come CheckBox Una volta spuntato, un RadioButton non può tornare nello stato unchecked I RadioButton vengono normalmente raggruppati in RadioGroup All'interno di un RadioGroup, solo un RadioButton può essere checked (gli altri diventano unchecked in automatico) 32

33 Widget: RadioButton 33