Android@Tulug #2By Ivan Gualandri

Cosa vedremo oggi

Ecco gli argomenti che tratteremo stasera● Come funziona il layout in android, dal punto

di vista xml e java● Vedremo alcuni tipi di layout:

○ RelativeLayout○ LinearLayout○ TableLayout

● Vedremo alcune componenti dell'interfaccia grafica:○ Button○ EditText○ Slider, etc...

Riassunto delle lezioni precedenti

Abbiamo visto:● Da cosa è composto l'sdk● Come è strutturata un applicazione● Cosa è un Activity e il suo ciclo di vita● I primi rudimenti su cosa è un layout

Riassunto delle lezioni precedenti/2

L'SDK Android è composto da tre componenti:1. L'SDK Manager - una specie di gestori

pacchetti per installare/rimuovere le varie versioni dell'sdk e alcune componenti aggiuntive

2. L'AVD Manager - Per creare e gestire gli emulatori android

3. L'ADB - Android debug bridge, l'interfaccia fra la nostra macchina e lo smartphone.

Riassunto delle lezioni precedenti/3

L'Activity é il componente fondamentale di una app android. Normalmente è associata ad una schermata dell'applicazione.

Normalmente una applicazione android viene lacniata eseguento una activity. Il punto di ingresso (aka metodo main) è il metodo onCreate(Bundle savedInstancestate)

Ha un suo ciclo di vita (che parte con onCreate)

Riassunto delle lezioni precedenti/4

Riptere non fa mai male...:)

Riassunto delle lezioni precedenti/5

Il file AndroidManifest.xml é un pò la scheda informativa dell'applicazione per il sistema operativo. Gli dice ● quale è l'activity principale da chiamare.● quali sono i permessi usati dall'applicazione● informazioni sul nome, versione, package● le activity che la compongono● etc.

L'argomento di oggi

Layout e componenti grafiche di un app

Un schermata a colpo d'occhio

Una schermata di una app android è composta da varie componenti:Bottoni, Etichette, oggetti grafici, caselle di testo, etc....

Ma come gestire tutte queste cose?

Come si fanno?

Esistono tre modi per creare una finestra, che molte volte ci capiterá di usarli tutti

● Il primo modo è quello di farci guidare dall'ambiente di sviluppo che contiene un editor WYSIWYG che scrive per noi il codice xml.

● Il secondo è direttamente utilizzando l'xml ● Il terzo invece è disegnare l'interfaccia

tramite codice java.

Del primo modo solo un immagine...

Un layout xml... e come appare...<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <TextView android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> <Button android:id="@+id/buttonExample" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dip" android:layout_below="@+id/label" android:text="Press me..." /></RelativeLayout>

Cosa abbiamo?

Tutto quello che vediamo (a destra) è stato specificato all'interno del codice XML (a sinistra). In questo esempio molto semplice l'interfaccia grafica è composta da: ● Una TextView● Un bottone

Che sono facilmente identificabili nel codice xml.

Cosa abbiamo?/2

I tag <RelativeLayout ...></RelativeLayout>

● Specificano come il sistema dovrá posizionare gli oggetti all'interno dell'interfaccia grafica.

● Ne esistono diversi tipi, quali: RelativeLayout, TableLayout, LinearLayout

● I Layout si possono annidare.

Cosa abbiamo?/3

● Come vedete per ogni oggetto che inseriamo nel file XML abbiamo anche degli attributi (alcuni comuni a tutti, altri specifici del singolo oggetto).

● Ovviamente con questi attributi andiamo a modellare apparenza e comportamento dell'oggetto.

Cosa abbiamo?/4

● Vediamo brevemente gli attributi comuni: android:layout_width="match_parent"android:layout_height="match_parent"

Questi servono per specificare i margini (larghezza e altezza) esistono tre possibilitá: 1. match_parent: prendi la dimensione

dell'ogetto che la contiene2. wrap_content: adatta la dimensione al

contenuto3. Oppure si possono specificare le dimensioni

in termini assoluti (pixel, dip, etc.)

Il RelativeLayout

● Il RelativeLayout permette di posizionare gli oggetti relativamente gli uni rispetto gli altri,

● Quindi possiamo dire la che l'oggetto button si trova "sotto" l'oggetto TextView

● Gli attributi utilizzabili sono:android:layout_below="@+id/upperobjectname"android:layout_above="@+id/rightobjectname" android:layout_toLeftOf="@+id/leftobjectname"android:layout_toRightOf="@+id/rightobjectname"

Dove l'argomento è l'id dell'oggetto che si trova appunto sopra/sotto/a destra/a sinistra

La TextView

● L'Abbiamo gia incontrata nella lezione precedente

● É una etichetta, che possiamo usare per mostrare del testo (statico, o generato dal codice java).

<TextView android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" />

Il Button

● Si tratta del classico bottone da premere. ● Possiamo aggiungergli del testo (o una

immagine) come etichetta. ● Il codice è: <Button android:id="@+id/buttonExample" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dip" android:layout_below="@+id/label" android:text="Press me..." />

Fra poco vedremo come far interagire fra di loro gli oggetti.

L'EditText

● È simile alla textview, ma in questo caso l'utente può scriverci all'interno.

● Se l'utente la seleziona, compare una tastiera

● Il codice è: <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/buttonExample" android:layout_marginTop="40dp" android:text="Example Edit" android:layout_toRightOf="@+id/buttonExample" android:ems="10" > <requestFocus /> </EditText>

Proviamo a farli interagire...

Esercizio:Creare un programma android composta da:● Una casella di testo (EditText)● Un pulsante (Button)● Una TextViewLa TextView quando viene lanciata può avere un qualsiasi testo. Se viene premuto il pulsante, e la casella di testo non è vuota, allora il testo all'interno della TextView verrà sostituito con quello che si trova nella casella di testo.

Esercizio - Passo 1 (Layout)

Ecco come potrebbe apparire l'applicazione...

Esercizio - Passo 2

Cosa sappiamo fare? (per chi ha seguito la lezione precedente):1. Accedere agli oggetti definiti nel layout xml2. Modificarne alcuni attributi

Cosa non sappiamo fare? 1. Come gestire il click sul bottone.

Esercizio - Il clickListener

Uno dei modi di android per gestire le interazioni dell'utente con lo smartphone è quello dei Listener.

I listener sono delle interfaccie, che contengono normalmente un metodo di callback, ovvero un metodo che viene chiamato al verificarsi di un certo evento. In questo caso del click

Esercizio - Il clickListener/2

Per il bottone l'interfaccia da utilizzare è: android.view.View.OnClickListener

Questa interfaccia è composta di un solo metodo:abstract void onClick(View v)

Facciamo si che la nostra MainActivity implementi onClickListener.

Implementare l'interfaccia, vuol dire implementare i metodi "abstract"

Esercizio - Il clickListener/3

Quindi avremo:

public class MainActivity extends Activity implements OnClickListener {//...//...@Override

public void onClick(View v) {// TODO Auto-generated method stub

}}

Che è il metodo che viene chiamato quando si clicka sul bottone.

Esercizio - Il clickListener/4

E di cosa si occuperá?

Esercizio - Il clickListener/5

1. Leggere il contenuto della EditText2. Inserirlo nella TextView

Indizi:1. Ricordate findViewById(R.blablabla)2. La EditText si comporta in maniera identica

alla TextView, dal punto di vista del Java.

Esercizio - Il clickListener/5

Dopo che abbiamo implementato il metodo onClick dobbiamo informarne il bottone, quindi: ● Ottengo un istanza del bottone con

findViewById● Gli setto l'onClickListener mediante il metodo

setOnClickListener(OnClickListener l), ● Dove l'argomento sará la classe Activity

(ricordate: estende l'interfaccia OnClickListener)!

Aggiungere oggetti via codice

Android permette di inserire oggetti nel layout anche direttamente via codice java.

L'idea è molto semplice:● Utilizzando sempre la findViewById ottengo

l'istanza del layout al quale voglio aggiungere i miei oggetti (o ne creo uno nuovo e poi lo setto con setContentView)

● Creo gli oggetti da aggiungere e li inserisco con il metodo add(View v) del Layout.

● Per esempio vogliamo aggiungere un nuovo elemento: una seconda TextView.

● Prima di tutto, creiamone una, e aggiungiamoci del testo:

TextView secondTv = new TextView(this);secondTv.setText("TEST");

● Se necessario gli impostiamo il layout. Trattandosi di un RelativeLayout abbiamo un oggetto chiamato RelativeLayoutParams

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);params.addRule(RelativeLayout.RIGHT_OF, resid-1)

Aggiungere oggetti via codice/2

● Associamo i parametri del layout alla TextView:

secondTv.setLayoutParams(params);

● Prendiamo l'istanza del layout:

RelativeLayout layout = (RelativeLayout) findViewById(R.id.layout1);

● Aggiungiamo l'oggetto al layout:

layout.addView(secondTv)

Aggiungere oggetti via codice/3

● Dispone gli oggetti in maniera lineare (orizzontale o verticale), uno per linea

Gli altri Layout - LinearLayout

● Permette di creare una tabella di Layout.

● Ogni riga contiene un oggetto di tipo: TableRow

● All'interno di ogni TableRow possiamo aggiungere un layout specifico

Gli altri Layout - TableLayout

● Possiamo usare layout speciali per gestire alcune categorie particolari, quali per esempio:○ WebView per le pagine web○ ListView per visualizzare delle liste

di

● E poi esistono oggetti di tutti i tipi: bottoni, slider, checkbox, menu a tendina, etc.

● Ovviamente possiamo crearne di nostri.

E poi?....

Grazie per l'attenzione...

Fine...