Guida programmazione Android – Lezione 4: View

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