Controles de selección en Android: AutoCompleteTextView
| Monday, August 29, 2011 a las 11:21 am | 8 Comentarios
Iniciamos la semana con un nuevo control de selección en Android llamadoAutoCompleteTextView, que como el nombre lo sugiere, es un híbrido entre un TextView y unSpinner. Su principal característica reside en que brinda auto-completado mientras el usuario escribe; de esta forma, el texto es tratado como un filtro que se va comparando contra una lista de posibles términos que se muestran en una lista de selección que sale del campo de texto, parecido al del Spinner. De esta forma el usuario podrá teclear alguna palabra que no se encuentre en la lista o seleccionar alguna de las opciones de la lista para definir del valor del campo.
AutoCompleteEditText es una subclase de EditText por lo que muchos de los atributos explicados en el post de este widget te servirán para configurar aspectos de look & feel para este control de selección.
Este control tiene un atributo llamado android:completionThreshold que nos sirve para indicar el número de caracteres mínimo que debe ingresar un usuario antes de que el filtrado de listas inicie.
De la misma forma que los controles de selección analizados en posts anteriores, podemos asignarle un adaptador al AutoCompleteTextView con la lista de posibles términos utilizando el método setAdapter(). Sin embargo, como cabe la posibilidad de que el usuario escriba un término que no se encuentre en la lista, podemos utilizar un TextWatcher para que de esta forma registremos cuando el texto cambie. Este evento se producirá ya sea por que el usuario introduzca manualmente toda la palabra o porque elija una de las opciones proporcionadas en la lista.
Una vez explicada la parte teórica pasemos a realizar un ejemplo:
1. Creamos un nuevo proyecto llamado AndroideityAutoComplete con la versión 2.2 de Android.
2. Modificamos el archivo main.xml del directorio res > layout en el que definiremos unTextView para desplegar un pequeño mensaje al usuario, otro TextView para que vaya desplegando el texto que el usuario escriba y el AutoCompleteTextView tal y como te muestro a continuación:
Notarás que en nuestro ejemplo, a partir de que el usuario tecleé 3 letras es cuando se iniciará la comprobación de la palabra introducida con los términos de la lista de sugerencias.
3. En la parte del código Java, este es el código que deberás agregar:
Explicamos. Lo primero es crear las variables que nos permitirán manejar los controles delTextView y el AutoCompleteTextView en nuestro código. Para este ejemplo creamos un array de strings con las sugerencias de términos, sin embargo, puedes considerar crear un recurso en XML en el directorio res > values tal como lo hicimos en el post del controlSpinner.
Dentro del método onCreate() recuperamos los controles definidos en el archivo main.xml y en seguida asignamos un listener que nos permite manipular el evento de cuando el texto va cambiando dentro del campo AutoCompleteTextView, si te das cuenta, esto lo podemos trabajar gracias a que nuestra actividad implementa a la interfaz TextWatcher y es por ello también, que implementamos los métodos onTextChanged(), beforeTextChanged() yafterTextChanged(). Dentro de onTextChanged() indicamos que cada vez que el texto cambie, se vaya asignando al TextView que hemos colocado justo arriba del campo de autocompletado.
Por último, para que el AutoCompleteTextView muestre las opciones, debemos asignarle su adaptador por medio del método setAdapter() pasándole como parámetro un objeto anónimo de ArrayAdapter() que nos permite definir el contexto en el cuál se utilizará el adaptador, el aspecto visual de la lista (en este caso uno predefinido por Android) y el arreglo de valores.
4. Con estas sencillas líneas ya sólo ejecutamos nuestro ejemplo y podrás ver cómo funciona este control de selección:
Hay muchas cosas que se pueden hacer con este control, es sólo cuestión de ir haciendo pruebas y sobretodo recordar que si lo sabemos utilizar los usuarios verán de gran ayuda su implementación en algunos campos que utilices en tus aplicaciones.
Descárgate el código fuente de este tutorial:
Te invito a que veas a detalle la clase AutoCompleteTextView para conocer qué otras cosas puedes hacer con esta clase.
Estamos a punto de finalizar nuestra serie de controles de selección en Android, ya sólo nos falta ver el componente de Galería y nos seguimos con otra nueva serie de tutoriales para que poco a poco puedas empezar a interactuar con componentes más complejos.
No hay comentarios:
Publicar un comentario