La tua prima app su Android

Transcript

1 T La tua prima app su Android Tutorial per Eclipse P. Gallo M.L. Pietramala Java Blocco tematico E Le apps e ANDROID Unità E1 Primi passi in Java su ANDROID Prerequisiti Obiettivi Unità E1 Primi passi in Java su ANDROID Esplorazione degli strumenti per la creazione di interfacce grafiche offerti da Eclipse Per completare il tutorial, è necessario l ambiente di sviluppo Android come illustrato nel testo: JDK (già installato per programmare in Java) versione 6 e successive Android SDK aggiornato Eclipse (versione 4.2 Juno e successive) configurato con il plugin ADT Vogliamo vedere un po più in dettaglio come si creano semplici interfacce grafiche con Eclipse. I passi da compiere sono: 1 creazione del progetto; 2 inserimento e posizionamento delle viste desiderate nell attività; 3 salvataggio ed esecuzione dell applicazione. 4.1 Creazione del progetto Dal menu File scegliamo la voce Close all per chiudere tutti gli eventuali file di precedenti applicazioni che fossero ancora aperti. Creiamo adesso il progetto della nuova app, che chiameremo Tutorial4, seguendo gli stessi passi dei tutorial precedenti: 1 dal menu File, scegli New e Project; T4 La tua prima app su Android 1

2 2 dalla finestra New Project, seleziona la cartella Android e la voce Android Application Project; poi premi Next; 3 riempi i campi della finestra New Android Application scegliendo il nome Tutorial4 per l applicazione e premi Next; 2 E Le apps e ANDROID E1 Primi passi in Java su ANDROID

3 4 configura l icona di lancio dell applicazione: qui abbiamo lasciato l icona di default e modificato la forma (Square), i colori di sfondo (background, qui blu) e di fronte (foreground, qui turchese): penserai sicuramente a qualcosa di meglio quando svilupperai le tue apps! Quando hai terminato la configurazione, premi Next; 5 crea una BlankActivity nella finestra successiva e premi Next; T4 La tua prima app su Android 3

4 6 ora definisci le caratteristiche della activity appena creata: nome della activity, nome del suo layout, tipo di navigazione, titolo; poi premi Finish. Terminato il processo di creazione, la situazione nell IDE Eclipse sarà simile a questa: 4 E Le apps e ANDROID E1 Primi passi in Java su ANDROID

5 4.2 Inserimento e posizionamento delle viste desiderate nell attività Per inserire nel progetto gli elementi grafici desiderati, utilizzeremo la palette di Eclipse, dalla quale li trascineremo con il mouse. La palette offre diversi Tab, fra i quali: Form Widgets, dove troviamo: TextViev di varie dimensioni (equivale alla classica JLabel di Swing); Button di varie dimensioni; CheckBox; RadioButton; ProgressBar (il simbolo del cerchietto animato, generalmente usato per segnalare un tempo di attesa nella esecuzione di un applicazione). TextFields, che contiene campi di testo di vari formati predefiniti: alfanumerici generici; numeri di telefono; indirizzi; T4 La tua prima app su Android 5

6 Layouts, che contiene diversi gestori della disposizione, fra i quali: GridLayout; LinearLayout (verticale e orizzontale); RelativeLayout (default, in questa versione di Eclipse). stop Per prima cosa, cancella la label Hello World che Eclipse ha posto automaticamente nella UI (User Interface, interfaccia grafica ) utilizzando il menu attivabile col tasto destro del mouse direttamente sulla vista interessata e scegliendo la voce Delete. Ricorda che una TextView è una View, cioè una vista. Useremo il termine vista con il significato di View in tutto il tutorial. Ora apri il tab Form Widgets della Palette, scegli una TextView Large e trascinala col mouse (drag&drop) sulla UI. La situazione dovrebbe risultare simile a questa: La scheda Outline elenca gli elementi della UI e consente di cambiarne le proprietà utilizzando il tasto destro del mouse. È anche possibile cambiare la posizione delle viste agendo su di esse direttamente nella UI. Il RelativeLayout di default registra i cambiamenti, visibili nella scheda Properties, sotto la scheda Outline. 6 E Le apps e ANDROID E1 Primi passi in Java su ANDROID

7 Aggiungi ora un campo di testo, aprendo il tab textfields della Palette e trascinando un campo di testo generico sulla UI. Guarda le schede Outline e Properties: avendo selezionato il campo di testo, appaiono le proprietà della vista edittext, in particolare la sua posizione relativamente alla textview inserita precedentemente. Nell esempio, il campo edittext compare sotto (Below) la textview e allineato a sinistra (Align Left) con la textview. Prova ad aggiungere elementi di vario tipo e a spostarli, per vedere come cambiano le corrispondenti descrizioni nella scheda Properties. Il file activity_main.xml contiene la descrizione testuale di tutta la tua UI. Aprilo cliccando sul tab activity_main.xml, al di sotto della UI (cerchiato in rosso nella figura seguente). T4 La tua prima app su Android 7

8 In tal modo, viene visualizzato il file activity_main.xml, che avrà all incirca questo aspetto: Per visualizzare di nuovo la UI, basta cliccare sul tab GraphicalLayout, che si trova sotto la scheda del file activity_main.xml (nell immagine è cerchiato in rosso). Fai delle prove e osserva come i cambiamenti di posizione delle viste influenzino il file activity_main.xml. stop L ambiente segnala a questo punto dei Warnings: si tratta di avvertimenti che segnalano errori non gravi nel codice. Puoi leggerne il contenuto puntando il mouse sui quadratini rossi o gialli che compaiono accanto alle istruzioni oppure, più comodamente, nella scheda apposita (Problems), che si trova in basso a destra della finestra di Eclipse: nell immagine seguente, il warning è cerchiato in rosso. 8 E Le apps e ANDROID E1 Primi passi in Java su ANDROID

9 In questo caso, i warning ci mettono in guardia avvertendoci che stiamo dichiarando variabili non utilizzate ovvio, visto che l applicazione si limita a disegnarle! Per adesso, possiamo ignorarli. 4.3 Salvataggio ed esecuzione dell applicazione A questo punto, puoi salvare il tuo lavoro (menu File, Save all) ed eseguire l applicazione (menu Run, Run). Se viene visualizzata una finestra come la seguente, scegli la voce Android Application e poi premi OK. LINK E1.3 Se avevi già configurato un AVD, l applicazione verrà eseguita su quest ultimo. Se non avevi già provveduto a configurare un AVD, questo è il momento di farlo seguendo le istruzioni del testo. T4 La tua prima app su Android 9

10 Sul tuo AVD (che si avvierà come farebbe un vero smartphone), lancia Android (simulando col mouse i movimenti delle dita) e ammira la tua prima applicazione su Android! 10 E Le apps e ANDROID E1 Primi passi in Java su ANDROID