5.11.12

Tutorial Android parte 26: AutoCompleteTextView en Android

El otro día un visitante del blog pidió información sobre el filtrado en los ListView. La respuesta la tenéis en este tutorial en el que aprovecho para explicar cómo funciona el filtro de un ListView más en detalle:

http://libreyextremo.blogspot.com.es/2012/11/tutorial-android-parte-25-como-funciona.html

Después este compañero pusó otro comentario respondiendo lo siguiente:

"Hola! Soy el que hizo la pregunta. Muchas gracias por responder, y con una entrada en el blog!! :)

Sigo pensando que para el usuario de la aplicación seguiría sin tener utilidad, porque le tienes que mostrar el teclado para que pueda hacer el filtrado no? En el emulador se puede hacer porque tenemos el teclado virtual.
Y por otro lado, un cuadro de texto ayudaría a que sepa qué tiene puesto en cada momento."

He estado buscando más información sobre cómo se podría hacer esto. Creo que lo más útil y lo que más se parece a lo que necesitaría en el control AutoCompleteTextView:

http://developer.android.com/reference/android/widget/AutoCompleteTextView.html



Este control muestra un cuadro de texto al usuario y según lo va rellenando, se sugieren al usuario nombres de alternativas que puede ser lo que el usuario desee teclear.

Cómo nunca os he enseñado a manejar uno, vamos a hacer un tutorial y lo vemos.


Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:
- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloAutoCompleteTextView
Build target: (El que queráis, yo en este caso he marcado...) Android 1.5
Application name: Hello, AutoCompleteTextView!
Package name: com.example.autocompletetextview
Create Activity: HelloAutoCompleteTextView

- Hacer click en Finish.

Agregar el siguiente código en el res/layout/main.xml:



Insertamos un control AutoCompleteTextView para poder trabajar con él.

Después en la actividad principal vamos a añadir las siguientes librerías:

import android.text.Editable;
import android.text.TextWatcher;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

El código de la actividad HelloCompleteTextView.java será el siguiente:



Dentro de la clase principal crearemos una constante de tipo array de Strings con los nombres de los países que se sugerirán al usuario. La llamaremos COUNTRIES.

También crearemos el objeto AutoCompleteTextView que enlazaremos al control para poder trabajar con él.

Además la actividad implementará TextWatcher para poder modificar el código que se ejecutará en los eventos asociados al control AutoCompleteTextView. En este ejemplo, no se hará nada en esos eventos pero os lo cuento por si los necesitaseis.

Y por último en el código del evento OnCreate lo que haremos será crear un adaptador Arrayadapter que toma este lista de países y asignárselo a control AutoCompleteTextView.

Lanzamos este código seleccionando el menú Run -> opción Run.


Cuando el usuario pinche en el cuadro y empiece a teclear, le irán apareciendo las sugerencias:



Y en el desplegable podrá seleccionar la que desee:



El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial Android Parte 26.

Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina – Toledo -Spain).

No comments:

Post a Comment