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

Transcript

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

2 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

3 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

4 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

5 Layout: FrameLayout FrameLayout.LayoutParams 5

6 Layout: FrameLayout 6

7 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

8 Layout: LinearLayout LinearLayout.LayoutParams 8

9 Layout: LinearLayout 9

10 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

11 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

12 Layout: TableLayout 12

13 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

14 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

15 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

16 Layout: RelativeLayout RelativeLayout.LayoutParams 16

17 Layout: RelativeLayout 17

18 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

19 Layout: GridLayout Per espandere le celle bisogna impostarne la proprietà layout_gravity 19

20 Layout: GridLayout Space è una View leggera introdotta in Android

21 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

22 Layout: ScrollView 22

23 Layout: esempio Versione portrait. Se si mette in modalità landscape, il menu viene tagliato. 23

24 Layout: esempio Versione landscape. Inserendo questo file nella cartella layout-land, il cambio di layout è automatico. 24

25 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

26 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 26

27 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

28 Connettere file di layout e codice Java Ottengo i riferimenti alle View (definite in XML) che voglio modificare via codice Java main.xml 28

29 Definire l'intera interfaccia via Java Stesso esempio della slide precedente Definizione delle dimensioni di una View 29

30 Definire l'intera interfaccia via Java Si passa la View principale 30