
Oggi parleremo delle View (in particolare delle ImageView) e della loro gestione,e di come creare l’interfaccia grafica della nostra applicazione.
Per prima cosa dal Package Explorer creiamo una nuova cartella dentro res e la chiamiamo“drawable”:Per fare questo basta cliccare col tasto destro del mouse, New->Folder. Copiamo in questa cartella 3 semplici immagini, una rossa una gialla e una blu. Potete trovarle qui.
Apriamo ora il file activity_main.xml, cancelliamo la scritta “Hello world” e tramite l’interfaccia drag&drop trasciniamo una ImageView (si trova sotto la voce Images & Media) sull’anteprima. Nella schermata che compare selezioniamo come file l’immagine red.png. Ripetiamo lo stesso procedimento anche per il file blue.png e yellow.png. Disponete i colori come in figura. A fine operazione l’interfaccia dovrebbe essere simile a questa:
Ritorniamo ora nel file MainActivity.java e scriviamo questo codice:
ImageView red_view=(ImageView)findViewById(R.id.imageView1); ImageView yellow_view=(ImageView)findViewById(R.id.imageView2); ImageView blue_view=(ImageView)findViewById(R.id.imageView3);
Senza entrare troppo in particolari di programmazione, con questo codice è come se creassimo una corrispondenza fra le immagini del layout e il nostro codice Java.
ATTENZIONE: Se eclipse vi dà errore,è perché non avete incluso la libreria “ImageView”.Come spiegato nelle lezioni precedenti,basta premere CTRL+SHIFT+O per includerla automaticamente. Ricordatevi di salvare sempre i file prima dell’esecuzione (CTRL+SHIFT+S).
Se provate ad eseguire ora l’applicazione, vedrete le tre immagini colorate ma non succederà niente al tocco: vogliamo che appaia un Toast (ne abbiamo parlato nella lezione 2) con scritto il colore su cui abbiamo premuto. Per fare questo,dobbiamo scrivete questo codice:
red_view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast t=Toast.makeText(MainActivity.this,"ROSSO", Toast.LENGTH_SHORT); t.show(); } });
Abbiamo così definito che quando verrà cliccata l’immagine rossa, verrà visualizzato un toast con la scritta “ROSSO”. Facciamo lo stesso anche per la yellow_view e la blue_view tramite questo codice:
yellow_view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast t=Toast.makeText(MainActivity.this,"GIALLO", Toast.LENGTH_SHORT); t.show(); } }); blue_view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast t=Toast.makeText(MainActivity.this,"BLUE", Toast.LENGTH_SHORT); t.show(); } });
Tutto il codice dovrebbe ora apparire così:
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toast t=Toast.makeText(this,"AndroidBlog", Toast.LENGTH_SHORT); t.show(); ImageView red_view=(ImageView)findViewById(R.id.imageView1); ImageView yellow_view=(ImageView)findViewById(R.id.imageView2); ImageView blue_view=(ImageView)findViewById(R.id.imageView3); red_view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast t=Toast.makeText(MainActivity.this,"ROSSO", Toast.LENGTH_SHORT); t.show(); } }); yellow_view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast t=Toast.makeText(MainActivity.this,"GIALLO", Toast.LENGTH_SHORT); t.show(); } }); blue_view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast t=Toast.makeText(MainActivity.this,"BLU", Toast.LENGTH_SHORT); t.show(); } }); } }
Per chi non ha conoscenze di programmazione, prendete il tutto così come è, se invece avete esperienza in Java potete approfondire l’argomento e comprendere meglio ogni parte del codice dalla documentazione ufficiale Android qui.
Ricordiamo inoltre che tramite Eclipse basta spostare il mouse su un elemento del codice per visualizzarne i dettagli.
Puoi guardare tutte le lezioni passate consultando l’indice del corso di programmazione android