Introduzione alla programmazione android - Android@tulug lezione 2

982 views
869 views

Published on

Seconda lezione del corso android tenuto presso il TuLug (Tuscia Lug) A Viterbo. Le slides sono completamente in italiano (Slides are in italian! Sorry!)

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
982
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
49
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Introduzione alla programmazione android - Android@tulug lezione 2

  1. 1. Android@Tulug #2 By Ivan Gualandri
  2. 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 ○ Slider, etc...
  3. 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. 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. 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. 6. Riassunto delle lezioni precedenti/4 Riptere non fa mai male... :)
  7. 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. 8. L'argomento di oggi Layout e componenti grafiche di un app
  9. 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. 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. 11. Del primo modo solo un immagine...
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22. Esercizio - Passo 1 (Layout) Ecco come potrebbe apparire l'applicazione...
  23. 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. 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. 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. 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. 27. Esercizio - Il clickListener/4 E di cosa si occuperá?
  28. 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. 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. 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. 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. 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. 33. ● Dispone gli oggetti in maniera lineare (orizzontale o verticale), uno per linea Gli altri Layout - LinearLayout
  34. 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. 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?....
  36. 36. Grazie per l'attenzione... Fine...

×