Introduzione alla programmazione android - Android@tulug lezione 2
- 1. Android@Tulug #2 By Ivan Gualandri
- 2. 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 際際滷r, etc...
- 3. 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
- 4. 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.
- 5. 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)
- 6. Riassunto delle lezioni precedenti/4 Riptere non fa mai male... :)
- 7. 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.
- 8. L'argomento di oggi Layout e componenti grafiche di un app
- 9. 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?
- 10. 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.
- 11. Del primo modo solo un immagine...
- 12. 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>
- 13. 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.
- 14. 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.
- 15. 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.
- 16. 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 contiene 2. wrap_content: adatta la dimensione al contenuto 3. Oppure si possono specificare le dimensioni in termini assoluti (pixel, dip, etc.)
- 17. 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
- 18. 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" />
- 19. 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.
- 20. 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>
- 21. Proviamo a farli interagire... Esercizio: Creare un programma android composta da: Una casella di testo (EditText) Un pulsante (Button) Una TextView La 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.
- 22. Esercizio - Passo 1 (Layout) Ecco come potrebbe apparire l'applicazione...
- 23. Esercizio - Passo 2 Cosa sappiamo fare? (per chi ha seguito la lezione precedente): 1. Accedere agli oggetti definiti nel layout xml 2. Modificarne alcuni attributi Cosa non sappiamo fare? 1. Come gestire il click sul bottone.
- 24. 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
- 25. 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"
- 26. 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.
- 27. Esercizio - Il clickListener/4 E di cosa si occuper叩?
- 28. Esercizio - Il clickListener/5 1. Leggere il contenuto della EditText 2. 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.
- 29. 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)!
- 30. 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.
- 31. 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
- 32. 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
- 33. Dispone gli oggetti in maniera lineare (orizzontale o verticale), uno per linea Gli altri Layout - LinearLayout
- 34. 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
- 35. 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?....