Cómo agregar íconos giratorios a tu app

Los controles de números ofrecen una manera rápida de seleccionar un valor de un conjunto. En el estado predeterminado, un ícono giratorio muestra el valor seleccionado actualmente. Cuando se presiona el ícono giratorio, se muestra un menú con todos los demás valores que el usuario puede seleccionar.

Figura 1: Menú de un ícono giratorio que muestra los valores disponibles.

Puedes agregar un control de número a tu diseño con el objeto Spinner, algo que sueles hacer en tu diseño XML con un elemento <Spinner>. Esto se muestra en el siguiente ejemplo:

<Spinner
    android:id="@+id/planets_spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Para propagar el ícono giratorio con una lista de opciones, especifica un SpinnerAdapter en tu código fuente Activity o Fragment.

Si usas componentes de Material Design, los menús desplegables expuestos son equivalentes a Spinner.

Propaga el ícono giratorio con opciones del usuario

Las opciones que proporciones para el ícono giratorio pueden provenir de cualquier fuente, pero debes brindarlas mediante un SpinnerAdapter (por ejemplo, un ArrayAdapter si están disponibles en un array) o un CursorAdapter si están disponibles en una consulta de la base de datos.

Por ejemplo, si las opciones disponibles para tu ícono giratorio son predeterminadas, puedes proporcionarlas con un array de cadenas definido en un archivo de recursos de cadenas:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="planets_array">
        <item>Mercury</item>
        <item>Venus</item>
        <item>Earth</item>
        <item>Mars</item>
        <item>Jupiter</item>
        <item>Saturn</item>
        <item>Uranus</item>
        <item>Neptune</item>
    </string-array>
</resources>

Con un array como este, puedes usar el siguiente código en tu Activity o Fragment para suministrar el array al ícono giratorio mediante una instancia de ArrayAdapter:

Kotlin

val spinner: Spinner = findViewById(R.id.planets_spinner)
// Create an ArrayAdapter using the string array and a default spinner layout.
ArrayAdapter.createFromResource(
        this,
        R.array.planets_array,
        android.R.layout.simple_spinner_item
).also { adapter ->
    // Specify the layout to use when the list of choices appears.
    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
    // Apply the adapter to the spinner.
    spinner.adapter = adapter
}

Java

Spinner spinner = (Spinner) findViewById(R.id.planets_spinner);
// Create an ArrayAdapter using the string array and a default spinner layout.
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
        this,
        R.array.planets_array,
        android.R.layout.simple_spinner_item
);
// Specify the layout to use when the list of choices appears.
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
// Apply the adapter to the spinner.
spinner.setAdapter(adapter);

El método createFromResource() te permite crear un ArrayAdapter a partir del array de strings. El tercer argumento para este método es un recurso de diseño que define cómo aparece la opción seleccionada en el control del ícono giratorio. La plataforma proporciona el diseño simple_spinner_item. Este es el diseño predeterminado, a menos que quieras definir tu propio diseño para la apariencia de la lista de opciones.

Llama a setDropDownViewResource(int) para especificar el diseño que usa el adaptador a fin de mostrar la lista de opciones del ícono giratorio. simple_spinner_dropdown_item es otro diseño estándar definido por la plataforma.

Llama a setAdapter() para aplicar el adaptador a tu Spinner.

Cómo responder a las selecciones de los usuarios

Cuando el usuario selecciona un elemento del menú de la lista de opciones, el objeto Spinner recibe un evento en el elemento seleccionado.

Para definir el controlador del evento de selección para un ícono giratorio, implementa la interfaz AdapterView.OnItemSelectedListener y el método de devolución de llamada onItemSelected() correspondiente. Por ejemplo, a continuación, se muestra una implementación de la interfaz en un Activity:

Kotlin

class SpinnerActivity : Activity(), AdapterView.OnItemSelectedListener {
    ...
    override fun onItemSelected(parent: AdapterView<*>, view: View?, pos: Int, id: Long) {
        // An item is selected. You can retrieve the selected item using
        // parent.getItemAtPosition(pos).
    }

    override fun onNothingSelected(parent: AdapterView<*>) {
        // Another interface callback.
    }
}

Java

public class SpinnerActivity extends Activity implements OnItemSelectedListener {
    ...
    public void onItemSelected(AdapterView<?> parent, View view,
            int pos, long id) {
        // An item is selected. You can retrieve the selected item using
        // parent.getItemAtPosition(pos).
    }

    public void onNothingSelected(AdapterView<?> parent) {
        // Another interface callback.
    }
}

La interfaz AdapterView.OnItemSelectedListener requiere los métodos de devolución de llamada onItemSelected() y onNothingSelected().

Llama a setOnItemSelectedListener() para especificar la implementación de la interfaz:

Kotlin

val spinner: Spinner = findViewById(R.id.planets_spinner)
spinner.onItemSelectedListener = this

Java

Spinner spinner = (Spinner) findViewById(R.id.planets_spinner);
spinner.setOnItemSelectedListener(this);

Si implementas la interfaz AdapterView.OnItemSelectedListener con tu Activity o Fragment, como en el ejemplo anterior, puedes pasar this como la instancia de la interfaz.