7 - Control ListView (con una lista de String)

El control ListView a diferencia del Spinner que se cierra luego de seleccionar un elemento permanecen visibles varios elementos (se lo utiliza cuando hay que mostrar una lista de elementos similares)

En este primer ejemplo mostraremos una lista de String (es decir cada elemento de la lista es un String, veremos más adelante que podemos tener listas de objetos de otro tipo: imágenes, íconos, varios String por elemento etc.)

Si la lista no entra en el espacio que hemos fijado para el ListView nos permite hacer scroll de los mismos.

El control ListView se encuentra en la pestaña "Containers".

Crear un proyecto llamado Proyecto006.

Problema:

Disponer un ListView con los nombres de paises de sudamérica. Cuando se seleccione un país mostrar en un TextView la cantidad de habitantes del país seleccionado.

La interfaz visual a implementar es la siguiente: primero disponemos un TextView en la parte superior (cuyo id lo definimos con el valor tv1, fijamos con el valor 30sp la propiedad textSize (hay que presionar "All attributes" para ubicar esta propiedad) y un ListView ( definimos su id con el valor list1):

control listview

Código fuente:

package com.tutorialesprogramacionya.proyecto006

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.ListView
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val tv1=findViewById<TextView>(R.id.tv1)
        val list1=findViewById<ListView>(R.id.list1)
        val paises = arrayOf( "Argentina", "Chile", "Paraguay", "Bolivia", "Peru", "Ecuador", "Brasil", "Colombia", "Venezuela", "Uruguay")
        var habitantes = arrayOf(40_000_000, 17_000_000, 6_500_000, 10_000_000, 30_000_000, 14_000_000, 183_000_000, 44_000_000, 31_000_000, 3_500_000)
        val adaptador1 = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, paises)
        list1.adapter = adaptador1
        list1.setOnItemClickListener { adapterView, view, i, l ->
            tv1.text = "Población de: ${habitantes[i]}"
        }
    }
}

Definimos dos arreglos paralelos donde almacenamos en uno los nombres de países y en el otro almacenamos la cantidad de habitantes de dichos países:

        val paises = arrayOf( "Argentina", "Chile", "Paraguay", "Bolivia", "Peru", "Ecuador", "Brasil", "Colombia", "Venezuela", "Uruguay")
        var habitantes = arrayOf(40_000_000, 17_000_000, 6_500_000, 10_000_000, 30_000_000, 14_000_000, 183_000_000, 44_000_000, 31_000_000, 3_500_000)

En Kotlin para una fácil lectura de números enteros grandes podemos disponer el caracter de subrayado (luego cuando se compila no se tiene en cuenta dicho caracter)

Creamos un objeto de la clase ArrayAdapter de forma similar a como lo hicimos cuando vimos la clase Spinner y lo enlazamos con el ListView:

        val adaptador1 = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, paises)
        list1.adapter = adaptador1

Llamamos al método setOnItemClicListener de la clase ListView y le pasamos como parámetro una lambda que se ejecutará cada vez que el usuario seleccione un item del ListView:

        list1.setOnItemClickListener { adapterView, view, i, l ->
            tv1.text = "Población de: ${habitantes[i]}"
        }

En esta lambda el tercer parámetro indica la posición del item seleccionado del ListView. Con este valor podemos ubicar en el arreglo de habitantes el valor respectivo.

Para codificar la lambda podemos utilizar la facilidad que nos brinda el Android Studio para generarla automáticamente, para esto tipeamos:
control listview

Luego presionamos la tecla "Enter" y el Android Studio automáticamente nos genera la lambda.

Dentro de la lambda modificamos el contenido del TextView con el nombre del país y la cantidad de habitantes de dicho país. La lambda recibe en el tercer parámetro la posición del item seleccionado del ListView.

Cuando ejecutamos el proyecto podemos ver una interfaz en el emulador similar a esta:

control listview

Este proyecto lo puede descargar en un zip desde este enlace: proyecto006.zip

Retornar