Tutorial Nro.5 Desarrollo de Aplicaciones Móviles con Android

Tutorial 5 de Desarrollo de Aplicaciones Android: Control Listview, Interface TextWatcher

En esta oportunidad hablaremos de la forma como se pueden filtrar elementos de una lista según un texto ingresado, la idea es que conforme se empiece a escribir la lista muestre solamente los elementos cuyos textos contengan al texto ingresado.

Antes de iniciar el caso práctico hablaremos un poco acerca del control listview de android que es con el que trabajaremos para nuestro ejemplo a codificar.

ListView: Es un control que permite mostrar elementos en una lista, dichos elementos son agregados a la lista haciendo uso de un adaptador el cual permite poblar al listview de diferentes formas como por ejemplo haciendo uso de los elementos pertenecientes a un array o de los elementos o datos que se obtienen de una consulta a una base de datos.

Como indicamos un control lisview es poblado por medio de un adaptador que es el que provee acceso a los elementos de la lista a mostrar en el listview.

Bien ahora vamos a empezar el caso práctico, probablemente en Internet hayan visto un ejemplo parecido sin embargo en este caso hemos decidido cambiar su funcionalidad y el objetivo que pretende alcanzar.

Caso Práctico: Se tiene una lista de contactos telefónicos y se desea filtrar solo aquellos cuyo nombre o apellido sea parecido al texto ingresado.

Pasos a seguir:

1- Crear un proyecto con el nombre TextWatcher

2- Agregar al layout principal los controles para nuestra aplicación que en este caso serían: 1 etiqueta, 1 control caja de texto (control EditText en Android) y 1 control listview que contendrá los elementos de la lista a filtrar, como es sabido la interfaz que será mostrada de cara al usuario no solo se construye agregando directamente los controles al layout si

Autor: Ing. Luis Ernesto Castillo Alfaro


no también definiéndolos en el archivo xml de nuestro layout principal, tal y como se muestra en la siguiente imagen:

La interfaz que se obtiene luego de definir los controles en el archivo xml del layout principal es la siguiente:

3- Escribir el código necesario en la actividad principal para que nuestra aplicación cumpla con su objetivo:



Bien lo que estamos definiendo en el código son objetos del tipo listview que es el que se encargará de mostrar la lista de contactos de la agenda a mostrar, de otro lado también definimos un objeto de tipo EditText en el cual escribiremos el texto que funcionará como filtro para mostrar solo los elementos de la lista que contengan el texto ingresado en dicho control EditText. De otro lado también se define en un arreglo de tipo string la lista de elementos a mostrar en nuestra lista, en este caso hay 10 contactos a mostrar, finalmente establecemos una variable de tipo string para un arraylist que es donde se irán agregando los elementos de la lista que cumplan con el requisito de contener el texto ingresado.

En el evento OnCreate de la actividad escribimos el siguiente código:

En esta porción del código lo que hacemos en primer lugar es enlazar para los objetos lvcontacto de tipo lisview y para el objeto txtcontacto de tipo EditText con sus respectivos controles definidos previamente en el archivo xml correspondiente al layout principal. En segundo lugar lo que hacemos es poblar el objeto lvcontacto con los elementos definidos en el array de tipo string Contacto_array.

Luego vamos a hacer uso de la interfaz TextWatcher para el control editable txtcontacto, y por medio de sus métodos podremos establecer que acciones realizar una vez que se detecte que el texto ingresado en el control txtcontacto ha cambiado.



En el método OnTextChanged de la interfaz TextWatcher definimos las siguientes líneas de código:

Lo que definimos en el método OnTextChanged en primer lugar es una variable de tipo String con el nombre textocontacto que es la que almacenará el texto ingresado en el control txtcontacto como filtro de los elementos de la lista a mostrar. Luego establecemos un bucle en el cual participarán cada uno de los elementos del array Contacto_array desde el primer elemento hasta el último, para cada uno de los elementos de dicho array se evaluará si cumplen con la condición de contener en su texto el texto ingresado en el control txtcontacto, el mismo que puede ser parte del nombre o parte apellido o que también puede ser el nombre o apellido del o los contactos a filtrar y mostrar, si se cumple dicha condición el elemento del array contacto que está siendo evaluado será agregado como nuevo elemento al array de tipo lista array_contactofiltrado. Este proceso se repetirá hasta el último elemento del array contacto_array.

Finalmente en la siguiente porción de código:

Poblamos el listview lvcontacto con los elementos agregados al array_contactofiltrado

Ahora corremos la aplicación como una aplicación android:



Como prueba vamos a buscar los contactos que cuyos apellidos o nombres contenga la letra C:

Ahora mostraremos los contactos cuyo apellido sea Miranda



y así sucesivamente pueden realizar los filtros que deseen.


Tutorial Nro.5 Desarrollo de Aplicaciones Móviles con Android

Technology

Transcript of Tutorial Nro.5 Desarrollo de Aplicaciones Móviles con Android