Android

Layout

diegozabot@yahoo.it

Interfaccia grafica

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

TextView ImageView

ViewGroup

Button EditText

RelativeLayout LinearLayout FrameLayout

TableLayout

Widget

Layout

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

FrameLayout

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 | rightcenter_horizontal | center_verticaletc.

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"

Esercizio FrameLayout

Ricreare il seguente layout:

RelativeLayout

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_alignParentTopandroid:layout_alignParentLeftandroid:layout_alignParentBottomandroid:layout_alignParentRightandroid:layout_centerHorizontalandroid:layout_centerVerticalandroid:layout_centerInParent

RelativeLayout (2)

Attributi per l'aggancio agli altri elementi:

android:layout_alignLeft="@id/..."android:layout_alignRight="@id/..."android:layout_alignTop="@id/..."android:layout_alignBottom="@id/..."

android:layout_alignAbove="@id/..."android:layout_alignBelow="@id/..."android:layout_alignToLeft="@id/..."android:layout_alignToRight="@id/..."

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"

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.

LinearLayout

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 | rightcenter_horizontal | center_verticaletc.

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.

Esercizio Linear

Provare a riprodurre il seguente layout utilizzando il linear Layout.

TableLayout

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.

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.

Esercizio Tabella

Creare una delle seguenti strutture utilizzando il TableLayout.

ScrollView

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.

Esercizio Scrolling

Creare un layout con scrolling con elementi che escono dallo schermo.