Android Spinner o Dropdown

Un spinner d'Android és un widget (element gràfic) que habitualment coneixem en altres entorns com a dropdown menu, selector o menú desplegable.

La programació en Android és, però, més complicada que en altres entorns degut a la gestió de la RAM en llistes molt llargues amb recursos costosos com les imatges, explicat a l'article Android ListView.

Coneixements previs

Cal conèixer Android.

Creació d'un spinner de forma gràfica

Sempre convé començar per la pàgina oficial d'Android, en aquest cas sobre Spinners.

L'exemple és un Spinner amb una llista fixa dels planetes. El què es fa primerament és definir la llista de planetes com a Resource (el famós R d'Android).

A la pàgina oficial ens mostra la manera d'enllaçar el Spinner amb un ArrayAdapter. Això resulta complexe i està pensat per a situacions molt genèriques en què les dades poden ser dinàmiques, com per exemple si surten d'una consulta a una base de dades. Si volem saber més d'aquesta opció, ho podem investigar a l'article Android ListView, que utilitza Adapters de forma molt similar.

Però nosaltres volem un dropdown senzill, i per tant ho farem més simple, assignant la llista de valors al control i llestos. Hi ha molts casos que cal això i no necessita la complexitat de l'Adapter.

Creació d'un Spinner de forma programàtica

A partir de dades d'un resource

Primer caldrà crear un array d'elements a l'arxiu strings.xml (gràficament al Android Studio).

Per exemple, per fer un selector de números del 0 al 5:

strings.xml

<resources>
    <string-array name="nombres">
        <item>0</item>
        <item>1</item>
        <item>2</item>
        <item>3</item>
        <item>4</item>
        <item>5</item>
    </string-array>
</resources>

Es pot crear un Spinner de forma programàtica amb el seu Adapter d'aquesta manera:

Spinner spinner = new Spinner(this);
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
    R.array.nombres, android.R.layout.simple_spinner_item);
spinner.setAdapter(adapter);

A partir de dades dinàmiques

Per crear un rang de dades del 0 al 5 com hem fet abans no cal definir el array a l'arxiu XML, que seria estàtic perquè no es podria modificar en temps d'execució. En canvi, es pot generar el Spinner així:

Spinner spinner = new Spinner(this);
CharSequence[] nombres = {"0","1","2","3","4","5"};
ArrayAdapter<CharSequence> adapter = new ArrayAdapter<CharSequence>(this,
    android.R.layout.simple_spinner_item, nombres);
spinner.setAdapter(adapter);

Connectant les callback dels Spinner

Per poder respondre a les accions de l'usuari al canviar els valors dels Spinner necessitarem implementar les callback pertinents. L'objecte que sol fer la feina és un Listener.

Tindrem 2 estratègies bàsiques per a implementar les callback d'un Spinner (o de qualsevol View amb acció. Convé conèixer les dues, encara que recomanem la segona.

Opció 1: objecte OnItemSelectedListener

Crear un objecte tipus OnItemSelectedListener per a cada Spinner, similarment a com solem fer amb els OnClickListener dels Button:

Spinner spinner = new Spinner(this);
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
    @Override
    public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
        // la posició del spinner és 'i', però també es pot buscar amb
        String string = spinner.getSelectedItem().toString();
    }
 
    @Override
    public void onNothingSelected(AdapterView<?> adapterView) {
 
    }
});

Opció 2: heretar OnItemSelechtedListener a la MainActivity

Podem heretar la interfície OnItemSelectedListener a la pròpia MainActivity i implementant les funcions necessàries com a mètodes d'aquesta, tal i com suggereix la doc oficial del Spinner.

public class SpinnerActivity extends Activity implements OnItemSelectedListener {
    ...
 
    protected void onCreate(Bundle savedInstanceState) {
        ...
        Spinner spinner = new Spinner(this);
        spinner.setOnItemSelectedListener(this);
        ...
    }
 
    public void onItemSelected(AdapterView<?> parent, View view,
            int pos, long id) {
        // An item was selected. You can retrieve the selected item using
        // parent.getItemAtPosition(pos)
    }
 
    public void onNothingSelected(AdapterView<?> parent) {
        // Another interface callback
    }
}

Ens resultarà un codi més llegible si fem servir la opció 2, al menys en aquest cas.

Segueix la doc oficial del Spinner on l'exemple segueix aquesta estratègia implementant les callback. Tant en un cas com a l'altra cal implementar les dues funcions:

• onItemSelected: és on activarem la lògica del nostre joc.
• onNothingSelected: és obligatoria implementar-la, però segurament no hi posarem res de codi.

Exercicis