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