¿Cómo buscar un elemento en ListView usando EditText y TextWatcher en Android?

Algunas aplicaciones proporcionan una barra de búsqueda para buscar cualquier elemento en particular de una lista de elementos. Técnicamente, una barra de búsqueda es EditText y una lista de elementos puede ser ListView, RecyclerView o GridView que contiene algunos elementos. Ahora, cuando un usuario escribe algo en EditText, la lista debe actualizarse de acuerdo con el texto que escribe el usuario. Los algoritmos de coincidencia de strings se utilizan para verificar si el texto escrito es una substring de cualquiera de los elementos de la lista y, si los hay, esos elementos se muestran en las actualizaciones de ListView. Sin embargo, crear una función separada o un algoritmo para realizar esta operación de búsqueda consume más líneas en el editor. Para esto, uno puede hacer uso de un objeto TextWatcher, una interfaz pública, que se implementa en EditText y verifica si el texto cambia. Así que en este artículo, le mostraremos cómo puede implementar un TextWatcher en un EditText para actualizar el ListView resultante cuando el usuario proporciona una entrada. Siga los pasos a continuación una vez que el IDE esté listo.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Cree un EditText en la parte superior de la actividad que será la barra de búsqueda asumida y un ListView debajo para mostrar los elementos.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:inputType="text"/>
  
    <ListView
        android:id="@+id/list_view"
        android:layout_below="@id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
  
</RelativeLayout>

Paso 3: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Declaramos una array de elementos como se muestra en el código. Estos elementos se muestran inicialmente en ListView con el uso de un adaptador. A continuación, TextWatcher se implementa en EditText. TextWatcher implementa tres funciones miembro, es decir, beforeTextChanger(), onTextChanged() y afterTextChanged(). Nos preocupa onTextChanged()ya que queremos actualizar ListView cuando el texto cambia en tiempo real. Esta función toma la string completa del EditText, filtra el adaptador para los elementos de la array en función de la entrada y se muestra el ListView actualizado. Se agregan comentarios dentro del código para comprender el código con más detalle.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import android.widget.ArrayAdapter
import android.widget.EditText
import android.widget.ListView
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Declare and Initialize the EditText
          // and ListView from the layout file.
        val mSearch = findViewById<EditText>(R.id.edit_text)
        val mListView = findViewById<ListView>(R.id.list_view)
  
        // Declare array of elements, create an adapter
          // and display the array in the ListView
        val mCities = arrayOf("Mumbai", "Mohali", "Delhi", "Dehradun", "Darjeeling", "Bengaluru")
        val mArrayAdapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, android.R.id.text1, mCities)
        mListView.adapter = mArrayAdapter
  
          // TextWatcher to check if the EditText text changes
        mSearch.addTextChangedListener(object: TextWatcher{
            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
                // Do Nothing
            }
  
            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                mArrayAdapter.filter.filter(s)
            }
  
            override fun afterTextChanged(s: Editable?) {
                // Do Nothing
            }
  
        })
    }
}

Producción:

Podemos ver que ListView se actualiza en función de la entrada proporcionada.