Android. Layout.

Транскрипт

1 Android Layout

2 Interfaccia grafica

3 Interfaccia grafica (1) Esistono due tipi di componenti che ereditano da View: widget (Button, ImageView, TextView, etc.) e layout, sottoclassi di ViewGroup, una specializzazione di View, che servono a contenere widget o altri layout. View Widget ViewGroup ImageView TextView Layout RelativeLayout Button LinearLayout EditText TableLayout FrameLayout

4 Interfaccia grafica (2) FrameLayout: posiziona gli elementi a partire dell angolo in alto a sinistra. Gestisco le posizioni mediante Margin e Gravity. Classe padre di ScrollView. RelativeLayout: posiziona gli elementi uno in relazione all'altro LinearLayout: organizza i componenti in gruppi orizzontali o verticali TableLayout: sistema i componenti organizzandoli in righe e colonne

5 FrameLayout

6 FrameLayout (1) Nel FrameLayout tutti gli elementi hanno origine nell angolo in alto a sinitra del layout. Mediante il parametro layout_gravity, ogni elemento può decidere il suo allineamento rispetto al layout: android:layout_gravity="center_horizontal" La gravity può essere: top bottom left right center_horizontal center_vertical etc.

7 FrameLayout (2) Per effettuare uno scostamento dalle posizioni predefinite viene utilizzato il margine: android:layout_margintop="20dp" android:layout_marginleft="10dp" android:layout_marginbottom="20dp" android:layout_marginright="10dp"

8 Esercizio FrameLayout Ricreare il seguente layout:

9 RelativeLayout

10 RelativeLayout (1) Il Relative layout sistema i componenti agganciandoli l'uno in relazione all'altro o al layout stesso. Attributi per l'aggancio al layout (di tipo true o false): android:layout_alignparenttop android:layout_alignparentleft android:layout_alignparentbottom android:layout_alignparentright android:layout_centerhorizontal android:layout_centervertical android:layout_centerinparent

11 RelativeLayout (2) Attributi per l'aggancio agli altri elementi:

12 RelativeLayout (3) Anche in questo layout per distanziare gli elementi tra di loro viene aumentato il margine: android:layout_margintop="20dp" android:layout_marginleft="10dp" android:layout_marginbottom="20dp" android:layout_marginright="10dp"

13 Esercizio Relative Creare il seguente layout composto da una immagine, un testo e un pulsante come elementi di intestazione. Agganciarli in maniera tale da rispettare il layout anche se ruotiamo l orientamento del dispositivo.

14 LinearLayout

15 LinearLayout (1) A seconda dell'attributo orientation gli elementi sono disposti in verticale o orizzontale. Al posto dei parametri di layout del RelativeLayout, il LinearLayout ha layout_gravity, mediante il quale ogni elemento può decidere il suo allineamento rispetto al layout: android:layout_gravity="center_horizontal" La gravity può essere: top bottom left right center_horizontal center_vertical etc.

16 LinearLayout (2) Possiamo specificare pesi diversi per ogni elemento visuale: android:layout_weight="3" Se non specificato un componente ha peso 0. Possiamo dare ad un componente un peso di 1 per fargli occupare tutto lo spazio rimanente dello schermo. Se diamo diversi valori di peso allora lavoreremo in proporzione percentuale: es. Assegnando al primo componente il peso 2, al secondo e terzo componente il peso 1 raggiunguamo un totale di 4 (che corrisponde al 100%). In questo caso il primo componente occuperà il 50% della view e gli altri due il 25% ciascuno.

17 Esercizio Linear Provare a riprodurre il seguente layout utilizzando il linear Layout.

18 TableLayout

19 TableLayout (1) La TableLayout viene usata in assieme alla TableRow (che è una sottoclasse di linearlayout) per organizzare gli elementi in righe e colonne. Alcuni attributi xml che possiamo utilizzare sono: android:stretchcolumns="colonne" per indicare la colonna o le colonne che devono occupare lo spazio rimasto disponibile nella schermata, e android:shrinkcolumns="colonne" per specificare le colonne che devono essere sempre completamente visibili (nel caso in cui il testo vada fuori la schermata.

20 TableLayout (2) Per posizionare le View all'interno di una TableRow possiamo utilizzare gli attributi xml (dobbiamo scriverli nel codice xml!): android:layout_column="colonna" per indicare che l'elemento parta da una precisa colonna e android:layout_span="numero" per far stare la view su più colonne.

21 Esercizio Tabella Creare una delle seguenti strutture utilizzando il TableLayout.

22 ScrollView

23 ScrollView La Classe ScrollView è una sottoclasse di FrameLayout e come essa può essere utilizzata con un altro elemento che va ad occupare tutto lo spazio disponibile (di solito un altro layout che contiene diverse view). Viene utilizzata quando di prevede che i componenti non resteranno tutti sulla schermata.

24 Esercizio Scrolling Creare un layout con scrolling con elementi che escono dallo schermo.