Componente AppCompatSpinner en Android con Kotlin


El componente (widget Spinner) es un elemento de la Interfaz de usuario, el cual ofrece la selección de contenido mediante una lista expandible.

Documentación oficial del widget Spinner y Widget AppCompatSpinner

Definición del componente

En el layout xml añadir

<androidx.appcompat.widget.AppCompatSpinner
    android:id="@+id/spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="72dp"
    android:layout_marginEnd="72dp"
    android:gravity="center"
    android:textAppearance="@style/TextAppearance.MaterialComponents.Body1" />

Asignar contendio mediante array XML

La forma mas sencilla para llenar los valores en un spinner es utilizar un arreglo con las opciones a mostrar.

<?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>

Luego con la propiedad android:entries se puede definir el array donde contiene los datos

<androidx.appcompat.widget.AppCompatSpinner
    ...
    android:entries="@array/planets_array"

Asignar contenido de forma dinámica

Nutrir el spinner con datos que provienen de un arreglo xml mediante Kotlin

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
    spinner.selection = 0 //seleción por defecto
}

Contenido combinado con Clave/Valor

Si se requiere mostrar al usuario unos valores dentro del spiner pero internamente en la app se identifique co una clave

val listCurrencies = Currency.getAvailableCurrencies()
    .filter { !it.displayName.contains("(") }
    .sortedBy { it.displayName }
    .map { Pair<String, String>(it.symbol, it.displayName) }

val values = listCurrencies.map { it.second }

val arrayAdapter = ArrayAdapter<Any?>(this, android.R.layout.simple_spinner_item, values)
arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.adapter = arrayAdapter

Para selecionar por defecto un valor dependiendo de la clave en este caso que corresponde al valor Euro

val v = listCurrencies.find { it.first == "€" }?.second
val indexPos = arrayAdapter.getPosition(v)
spinner.setSelection(indexPos)

Para obtener la clave de un valor selecionado por el usuario

spinner.setOnItemSelectedListener(object : OnItemSelectedListener {
    override fun onItemSelected(parentView: AdapterView<*>?, selectedItemView: View?, position: Int, id: Long) {
        val selectItem = spinner.selectedItem
        val item = listCurrencies.find { it.second == selectItem }
        Log.d(TAG, "onItemSelected $selectItem : $item")
    }

    override fun onNothingSelected(parentView: AdapterView<*>?) {
        // your code here
    }
})

Publicado por Codelaby

Mobile DevDesigner

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: