T#006 – Usare GridView e Spinner nelle Applicazioni Android

Dopo aver visto come utilizzare una ListView vediamo adesso come gestire due nuovi componenti: GridView e Spinner. Ma cosa sono esattamente? Niente di compliato non temete. Una GridView permette di creare una griglia in cui ogni cella contiene un layout (anche complesso), uno Spinner è invece l’equivalente Android di un combobox.

Gli adapter descritti nel tutorial sulle ListView possono essere usati anche per pololare i dati di GridView e Spinner. Infatti GridView prende i dati direttamente da un oggetto ListAdapter. Spinner invece utilizza adapter di tipo SpinnerAdapter; in teoria la classe è diversa ma in pratica tutte le classi che implementano l’interfaccia ListAdapter implementano anche SpinnerAdapter.

Definizione dei layout

Vediamo un esempio che utlizza uno Spinner contenente le regioni italiane e una GridView con le province corrispondenti alla regione selezionata. Il layout della nostra Activity è definito nel file main.xml in questo modo:

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<Spinner android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:id="@+id/spinner" />
	<GridView android:layout_width="fill_parent"
		android:numColumns="auto_fit" android:columnWidth="60dip"
		android:layout_height="wrap_content" android:id="@+id/grid" />
</LinearLayout>

Il layout è molto semplice, contiene un LinearLayout verticale con dentro uno Spinner e una GridView. Non abbiamo usato attributi particolari a parte numColumns e columnWidth per la GridView: tramite questi due attributi specifichiamo la larghezza di una singola colonna e che il numero di colonne deve essere calcolato in automatico. Il numero di colonne può essere impostato anche manualmente, impostando auto_fit si ha il vantaggio che la vista si adatta in automatico ad ogni dispositivo e al fatto che l’orientation sia in portrait o in landscape. Per cambiare l’orientation nell’emulatore basta usare la shortcut “ctrl+F11” (attenzione: girando il monitor o il portatile non funziona!).

Altri attributi utili impostabili su una GridView sono:

• horizontalSpacing e verticalSpacing: spazio da usare fra due celle in orizzontale/verticale
• listSelector: immagine da usare come sfondo per la cella selezionata (parleremo meglio delle immagini in un altro tutorial)
• scrollBarStyle: imposta lo stile da usare per visualizzare le scrollbar

Il layout di una singola cella della GridView contiene due TextView, uno per il codice della provincia e uno per il nome:

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent" android:gravity="center_horizontal">
	<TextView android:layout_width="wrap_content"
		android:textSize="25sp" android:layout_height="wrap_content"
		android:id="@+id/codice" />
	<TextView android:layout_width="wrap_content" android:lines="2"
		android:layout_height="wrap_content" android:id="@+id/nome"
		android:textSize="10sp" android:gravity="center_horizontal" />
</LinearLayout>

Creazione degli adapter

L’adapter nella GridView può essere impostato nello stesso modo in cui viene impostato in una ListView:

1
2
3
4
5

grid.setAdapter(new SimpleAdapter(this, 
	Provincia.getData(regione), 
	R.layout.cell, 
	new String[]{ Provincia.CODICE, Provincia.NOME }, 
	new int[]{ R.id.codice, R.id.nome }));

In questo caso usiamo un SimpleAdapter in cui utilizziamo il layout appena definito e impostiamo il collegamento fra i campi da mostrare e le View da popolare.
Per popolare lo Spinner usiamo un ArrayAdapter contenente stringhe di testo e un layout predefinito di Android. Con il metodo setDropDownViewResource impostiamo il layout da usare (anch’esso uno standard di Android) per la lista nel popup che compare cliccando sullo Spinner:

1
2
3
4
5
6
7
8

protected void aggiornaProvince(String regione)
{
	ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, 
		android.R.layout.simple_spinner_item, Provincia.getRegioni());
	adapter.setDropDownViewResource(
		android.R.layout.simple_spinner_dropdown_item);
	spinner.setAdapter(adapter);
}

Il risultato finale è questo:

Evento sullo Spinner

Per completare l’esempio aggiungiamo un evento sullo Spinner per ripopolare la griglia delle province ogni volta che si seleziona una regione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

spinner.setOnItemSelectedListener(new OnItemSelectedListener()
{
	@Override
	public void onItemSelected(AdapterView<?> adapter, View v, 
		int pos, long id)
	{
		aggiornaProvince((String) adapter.getItemAtPosition(pos));
	}
 
	@Override
	public void onNothingSelected(AdapterView<?> arg0)
	{
		aggiornaProvince(Provincia.TUTTE_LE_PROVINCE);
	}
});

Ogni volta che viene selezionato un elemento dallo Spinner viene ricreato e reimpostato l’adapter con i dati filtrati richiamanto il metodo aggiornaProvince.

Conclusioni

Il codice completo del metodo onCreate dell’Activity è il seguente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

public void onCreate(Bundle savedInstanceState)
{
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);
 
	grid = (GridView) findViewById(R.id.grid);
	aggiornaProvince(Provincia.TUTTE_LE_PROVINCE);
 
	Spinner spinner = (Spinner) findViewById(R.id.spinner);
	ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, 
		android.R.layout.simple_spinner_item, Provincia.getRegioni());
	adapter.setDropDownViewResource(
		android.R.layout.simple_spinner_dropdown_item);
	spinner.setAdapter(adapter);
 
	spinner.setOnItemSelectedListener(new OnItemSelectedListener()
	{
		@Override
		public void onItemSelected(AdapterView<?> adapter, View v, 
			int pos, long id)
		{
			aggiornaProvince((String) adapter.getItemAtPosition(pos));
		}
 
		@Override
		public void onNothingSelected(AdapterView<?> arg0)
		{
			aggiornaProvince(Provincia.TUTTE_LE_PROVINCE);
		}
	});
}

L’esempio visto è abbastanza semplice e fornisce una traccia per iniziare a lavorare con i due componenti illustrati in questo articolo. Il codice sorgente del progetto da importare in Eclipse è disponibile per il download al seguente indirizzo.

Ovviamente sia GridView che Spinner contengono molte proprietà che permettono una customizzazione completa dell’interfaccia grafica, a voi l’onore di provarle tutte!