Controles de selección en Android: Gallery
| Monday, August 29, 2011 a las 9:56 pm | 13 Comentarios
Para terminar nuestra serie de controles de selección en Android, vamos a aprender a utilizar el control llamado Gallery. Lo primero que resalta a la vista de este componente es que se trata de una lista de elementos que se puede desplazar de forma horizontal. Al seleccionar algún elemento éste se resalta a través de un efecto visual muy atractivo.
El escenario por excelencia para mostrar el uso de Gallery es para mostrar el preview de imágenes, mostrando una colección de imágenes o iconos que el permitan al usuario visualizar las opciones disponibles mientras se encuentra en el proceso de selección.
Por el lado del código, el control Gallery funciona de manera similar a un Spinner y a unGridView. Cuando lo definimos en nuestro layout a través de XML, hay un par de atributos que debes conocer:
- android:spacing define el número de pixeles existentes entre cada ítem del listado.
- android:animationDuration indica la duración de la animación utilizada para desplazarse de opción a opción en milisegundos.
Pasemos entonces a la parte práctica de este post:
1. Creamos un nuevo proyecto llamado GalleryTest con la versión 2.2 de Android.
2. Para realizar este ejemplo, deberás tener a la mano un conjunto de imágenes, si así lo deseas puedes descargar el pack de imágenes de ejemplo que se encuentra en elrepositorio de este proyecto en el directorio img_example.
3. Modificamos nuestro archivo main.xml en dónde sólo dejaremos el control Gallery como elemento raíz del layout tal y como te muestro a continuación:
4. Para terminar de configurar la parte visual del ejemplo, vamos a crear un archivo XML llamado attrs.xml dentro del directorio res > values del proyecto. A continuación te pongo el código que deberá contener el archivo:
Este es un recurso que nos permite personalizar el estilo de un layout. En este caso, se aplicará sobre los elementos individuales dentro de la galería.
La etiqueta <attr> define un atributo específico dentro del recurso de estilo, en este ejemplo, se refiere al atributo galleryItemBackground que se aplica al borde de los elementos de laGallery. ¿Y su valor? Esto lo manejaremos más adelante en el código Java, para que veas su uso en acción.
5. Gallery como el resto de los controles de selección necesita de un adaptador para definir sus ítems y el estilo que tendrán. De forma muy parecida al ejemplo de GridView vamos a crear una clase llamada ImageAdapter.java que heredará de la clase BaseAdapter. A continuación te escribo el código completo de este clase:
Lo primero que hacemos es crear tres variables, entre las cuáles se encuentra un array de enteros que guardará los ID’s de todos los recursos de imágenes que utilizaremos y que son los mismos que están guardados en el directorio res > drawable. Después tenemos la definición del constructor de la clase donde se define el contexto para cada ImageView y se recupera el recurso creado en el paso anterior. A través del método recycle() que se llama en el objeto de tipo TypedArray podemos hacer uso del adaptador para cada uno de los elementos de la galería.
Los métodos getCount(), getItem() y getItemId() deben implementarse para que podamos realizar consultas sencillas al adaptador.
De ahí pasamos al método clave de esta clase que es el de getView() y que nos permitirá recuperar cada una de las imágenes que queramos que aparezcan como ítems del controlGallery. Dentro de este método definimos los parámetros visuales con los que se desplegará el control.
- Asignamos el recurso de imagen a partir de un ID que se recupera desde el array definido al inicio de esta clase.
- Definimos las dimensiones de layout de la galería que para este caso es de 150×100.
- Fijamos la escala que se aplicará a cada imagen para que su tamaño no desentone de ítem a ítem. En el ejemplo indicamos que los previews se ajusten en los ejes X y Y de las medidas definidas en la línea anterior. Para saber qué otros tipos de escala se pueden aplicar a elementos de imagen consulta este link.
- Indicamos el estilo que tendrá el background de cada ítem definido en el constructor de la clase.
Por último este método retorna cada ImageView con el formato definido y lista para ser desplegada en la pantalla.
6. Por último vamos a pasar a escribir el código dentro de la actividad principal de la aplicación. A continuación te escribo el código completo de la actividad:
Lo primero que haremos dentro del método onCreate() será crear un objeto de la claseGallery para poder recuperar el control creado en el archivo main.xml. Como ya hemos programado todo lo concerniente a la creación y asignación de ítems en la claseImageAdapter, aquí nos será más sencillo asignar el adaptador al objeto gallery. Utilizamos entonces el método setAdapter() pasándole como parámetro un objeto anónimo deImageAdapter que recibe el contexto de dónde se utilizará el adaptador.
Por último, le asignamos un listener a la Gallery para que cada vez que seleccionemos un ítem se despliegue una notificación de tipo Toast con el número de dicho elemento.
7. Ahora sólo ejecutamos nuestro ejemplo y este es el resultado que obtendremos:
Con este post terminamos nuestra serie Controles de selección en Android, recuerda que lo importante de estos temas es que además de que aprendas las cosas básicas que te compartimos, te animes a probar estos componentes para crear aplicaciones cada vez más completas.
No hay comentarios:
Publicar un comentario