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.
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:
