Ejemplo con ViewPager en Android

Hola que tal a todos, últimamente he estado un poco ausente por varios proyectos y ocupaciones pero ya espero estar de vuelta posteando seguido. En esta ocasión les quiero compartir un ejemplo de como utilizar el ViewPager en una aplicación android. Esta vista se ha vuelto muy popular últimamente dentro de Android, el nuevo Market la utiliza para cambiar entre secciones, la aplicación Talk la utiliza para cambiar entre chats activos, entre otros; si no están familiarizados con esta vista o simplemente no la reconocen por el nombre solo basta con mirar este post y ver la ultima imagen del Android Market. ViewPager es esa vista que nos permite hacer un swap con nuestro dedo (deslizarlo de lado a lado de la pantalla) y cambiar entre vistas activas en la aplicación.

Bueno ahora si manos a la obra, lo primero que tenemos que tomar en cuenta es que ViewPager es una clase que hereda de Vista, se puede agregar a los archivos xml de layout de android, mas sin embargo no se encuentra dentro de las clases base de Android OS, esta clase se introdujo con la llegada de las actualizaciones de HoneyComb y los ingenieros de Google la agregaron dentro del paquete de compatibilidad para versiones anteriores. Por lo tanto es necesario que utilicemos nuestro AVD Manager e instalar el paquete de compatibilidad desde el repositorio de android. Una vez que este instalado solo es necesario configurar nuestro proyecto para que utilice este paquete. Para hacer esto solo damos click secundario en el proyecto de eclipse y dentro de Android Tools damos click en Add Compatibility Library.

Una vez que nuestro proyecto este configurado ya podemos hacer uso de esta clase dentro de nuestros archivos xml de layout, pero recuerden que como esta no es una clase del sistema base de android es necesario agregarla a nuestros xml como si fuera una vista personalizada en android. Por lo tanto nuestro archivo de layout de ejemplo (main.xml) quedaría de esta manera.

La clase ViewPager requiere un adaptador (una clase que herede de ViewPagerAdapter) el cual sera encargado de manejar las vistas y la interacción del usuario con cada una de las "paginas", lo mas sencillo de implementar es una clase que extienda de FragmentPagerAdapter la cual lanzara el Fragment necesario para  cada pagina cuando sea necesario, con esto podemos manejar dentro de nuestros fragmentos todas las acciones del usuario que se generen dentro de la pagina activa en la aplicación. Para este ejemplo se creo una clase llamada MyFragmentPagerAdapter el cual realizara la tarea de almacenar fragmentos y regresar el indicado cuando la aplicación lo requiera. Nuestra clase adaptador se ve así, lo único que hace es almacenar Fragmentos en una lista y regresar los cuando sea necesario.

Este adaptador se llena con diferentes fragmentos, los cuales lo único que harán sera desplegar un componente reloj con un color de fondo definido. Para esto vamos a crear una clase nueva que extenderá la clase Fragment y un nuevo archivo layout el cual sera desplegado en nuestro fragmento, este archivo se utilizara en el método onCreateView del fragmento para generar y almacenar la vista que sera desplegada en cada una de las paginas. Estos archivos se ven de la siguiente manera.

Y ya por ultimo en nuestra actividad principal, la cual debe de extender de FragmentActivity en lugar de Activity solo es necesario crear los fragmentos necesarios y el adaptador para establecerlo en nuestro layout principal. Nuestra clase principal se debe de ver de esta manera.

Se puede observar que lo único que hace nuestra clase es establecer nuestro main layout (main.xml), luego retrae el ViewPager de nuestra vista para después crearle un adaptador con 3 nuevos fragmentos y establecerlo al Pager con el método setAdapter(..). Con esto la secuencia que seguirá la aplicación es crear cada uno de los fragmentos (PlainColorFragment) y cuando el Pager vaya a desplegar una pagina llamara al método getView del fragmento correspondiente (recuerden que la vista ya ha sido creada con el método noCreateView) para ser desplegado dentro de la pagina.

Con estas sencillas clases ya podemos hacer Swap con nuestro dedo e ir cambiando de vistas de forma dinámica y entre diferentes funcionalidades de nuestra aplicación. Al final les dejo las imágenes de como se ve esta aplicación funcionando en el android emulator y también el link hacia el repositorio de github desde donde pueden descargar el código completo para que lo prueben y extiendan la aplicación a su gusto. En posts posteriores extenderemos esta aplicación para manejar eventos de usuario y un poco mas de funcionalidad.

Un saludo a todos y espero que este post sea de ayuda.

Código Fuente completo: https://github.com/ti3r/view_pager_test

Imágenes del ejemplo: