Sistemi Mobili e Wireless
Android – Interfacce utente:
Widget e Layout (2)
Stefano Burigat
Dipartimento di Matematica e Informatica
Università di Udine
www.dimi.uniud.it/burigat
[email protected]
Layout
• I Layout sono classi derivate da ViewGroup che permettono
di definire la struttura di un'interfaccia
• Android fornisce 5 tipi di Layout principali
–
–
–
–
–
FrameLayout
LinearLayout
RelativeLayout
TableLayout
GridLayout (da Android 4.0)
• Numerose altre sottoclassi di ViewGroup sono disponibili per
situazioni più specifiche (es: ScrollView, GridView,
TabLayout, ...)
2
Layout parameters
• Ogni classe di tipo ViewGroup implementa una classe
innestata che estende ViewGroup.LayoutParams
• Tale sottoclasse contiene proprietà che definiscono
dimensioni e posizione di ogni View figlia
3
Layout: FrameLayout
• FrameLayout è il tipo di Layout più semplice
• Tutti gli elementi figli di FrameLayout sono normalmente
vincolati all'angolo in alto a sinistra dello schermo
– Un controllo parziale del posizionamento può essere ottenuto
utilizzando l'attributo android:layout_gravity
• Le View figlie vengono disegnate una sopra l'altra,
oscurandosi parzialmente o totalmente a seconda del loro
livello di trasparenza
4
Layout: FrameLayout
• FrameLayout.LayoutParams
5
Layout: FrameLayout
6
Layout: LinearLayout
• LinearLayout allinea tutti i propri figli orizzontalmente o
verticalmente a seconda del valore dell'attributo
android:orientation
– android:orientation="vertical": una View per riga,
indipendentemente dalla loro larghezza
– android:orientation="horizontal": una sola riga di View,
disposte una accanto all'altra
• Un LinearLayout rispetta i margini tra le View figlie e il valore
di gravità (allineamento dx, sx, centro) di ogni View
• Al contrario di FrameLayout, LinearLayout supporta l'attributo
android:gravity per determinare la posizione del proprio
contenuto (e quindi di tutti i propri figli)
7
Layout: LinearLayout
• LinearLayout.LayoutParams
8
Layout: LinearLayout
9
Layout: LinearLayout
• E' possibile attribuire un peso ai figli di un LinearLayout
tramite l'attributo android:layout_weight
• Il peso permette di assegnare lo spazio su schermo in modo
proporzionale tra i vari widget
Peso 0 a tutti
(default)
Peso 1 a tutti
Peso 2 a Button2 e
peso 1 agli altri
10
Layout: TableLayout
• TableLayout posiziona i propri figli in righe e colonne, senza
mostrare bordi
• Una singola riga è rappresentata da un oggetto di tipo
TableRow
• Una riga può avere 0 o più celle (anche vuote) e contenere
qualunque tipo di View (incluso ViewGroup)
• Le View vengono inserite nell'ordine in cui sono definite
• La tabella avrà tante colonne quante sono le celle della riga
più lunga
• LinearLayout.TableParams ha gli stessi attributi di
LinearLayout.LayoutParams
11
Layout: TableLayout
12
Layout: TableLayout
• android:layout_span permette ad un singolo widget di
occupare più di una colonna mentre android:layout_column
permette di posizionare un widget in una particolare colonna
13
Layout: TableLayout
• Ogni colonna occupa uno spazio che dipende dalla
dimensione del widget più grande in essa contenuto
• android:stretchColumns permette di espandere le colonne in
modo che occupino più spazio a schermo
14
Layout: RelativeLayout
• RelativeLayout consente ai figli di specificare la propria
posizione relativamente alla View genitore o ad altri figli
• L'ordine degli elementi è importante
– Se un elemento è centrato sullo schermo, gli elementi che
specificano la loro posizione relativamente a tale elemento
saranno allineati rispetto al centro
– A causa di ciò, nei file di layout XML è possibile fare riferimento
solo ad elementi già definiti (cioè a cui è stato assegnato un ID)
in precedenza
• Es: assegnare l'attributo
ad una TextView, posiziona la TextView a sinistra della View
che ha lD “my_button”
15
Layout: RelativeLayout
• RelativeLayout.LayoutParams
16
Layout: RelativeLayout
17
Layout: GridLayout
• GridLayout offre funzionalità simili a TableLayout,
consentendo di specificare una griglia di elementi
• Il numero di righe e colonne può essere specificato grazie
alle proprietà rowCount e columnCount
• E' possibile posizionare manualmente le View figlie grazie
alle proprietà layout_row e layout_column
• Le proprietà rowSpan e columnSpan possono essere usate
per determinare quante celle occupa ogni View figlia
• Per il posizionamento del contenuto di una cella si utilizza la
proprietà layout_gravity
• La proprietà layout_weight non è supportata e layout_width e
layout_height (nei figli) non vengono tipicamente specificate
(sono WRAP_CONTENT di default)
18
Layout: GridLayout
Per espandere le celle
bisogna impostarne la
proprietà layout_gravity
19
Layout: GridLayout
Space è una
View leggera
introdotta in
Android 4.0
20
Layout: ScrollView
• ScrollView permette di visualizzare più View di quelle visibili
su una singola schermata
• L'utente può accedere alla parte “nascosta” del contenuto
attraverso il meccanismo dello scrolling
• ScrollView deriva da FrameLayout e dovrebbe quindi avere
una unica View figlia (tipicamente un LinearLayout)
• ScrollView supporta solo lo scrolling verticale
21
Layout: ScrollView
22
Layout: esempio
Versione portrait. Se si mette in modalità landscape, il menu viene tagliato.
23
Layout: esempio
Versione landscape. Inserendo
questo file nella cartella layout-land,
il cambio di layout è automatico .
24
Connettere file di layout e codice Java
• Per manipolare gli elementi di un'interfaccia da codice, è
necessario poter accedere ai corrispondenti elementi
presenti nei file di layout XML
25
Connettere file di layout e codice Java
• Il file di layout res/layout/main.xml può essere chiamato da
codice tramite
• I singoli widget, come myButton, possono essere acceduti
attraverso il metodo findViewById()
dove R è una classe automaticamente generata che tiene
traccia di tutte le risorse disponibili ad un'applicazione. In
particolare, R.id è l'insieme dei widget definiti nel file XML
(tramite la sintassi @+id/idlabel)
26
Connettere file di layout e codice Java
• Una volta ottenuto un riferimento ad un widget definito in un
file di layout XML, è possibile svolgere operazioni come la
modifica delle sue proprietà oppure la gestione di eventi
• Esempio: aggiungere un ascoltatore (listener) ad un Button
per svolgere un'operazione quando il pulsante viene premuto
27
Connettere file di layout e codice Java
Ottengo i riferimenti alle View
(definite in XML) che voglio
modificare via codice Java
main.xml
28
Definire l'intera interfaccia via Java
Stesso esempio della slide
precedente
Definizione delle
dimensioni di una View
29
Definire l'intera interfaccia via Java
Si passa la View
principale
30