Ejemplo de Viewpager para android

Ejemplo de viewpager para Android


0. Índice de contenidos.


1. Introducción

Si sois usuarios de móviles con Android, quizás os hayáis fijado en un componente que a mí me llama especialmente la atención. El viewpager es un componente que se encuentra por ejemplo en las aplicación de youtube, gtalk y google+ y nos permite desplazarnos entre pantallas deslizando el dedo horizontalmente.

Hace unos días, en la cuenta de twitter de AndroidDev, se publicó un tweet sobre este componente y un enlace a horizontal-view-swiping-with-viewpager.html hablando sobre este componente. Así que me he puesto manos a la obra para hacer algo con él, y ya de paso os cuento cómo.


2. Entorno

  • Hardware
    • Mackbook Pro
      • Intel Core i7 2Ghz
      • 8GB RAM
      • 500GB HD
      • Sistema Operativo: Mac OS X (10.6.8)
    • Nexus S
      • Android 2.3.5 (Gingerbread).
  • Software
    • Eclipse Indigo

3. Configuración del entorno.

El primer paso es incluir el paquete de compatibilidad. Una vez que tenemos el sdk de android instalado y configurado, para descargar el paquete de compatibilidad debemos

:

Posiblemente nos salga un aviso de que va a reiniciar “adb”, pulsamos en si y dejamos que continúe el proceso.


Una vez que hemos obtenido las librerías, configuramos el proyecto incluirlas.

El primer paso es crear una carpeta con el nombre libs en el proyecto e incluir el archivo android-support-v4.jar que nos acabamos de descargar.

y a continuación añadimos la libreria al build_path

para saber si ya hemos incluido la librería, debemos tener algo como esto en el proyecto

y ya estamos listos para usarla


4. Creación de la aplicación

La aplicación consta principalmente de un activity encargado de mostrar el componente por pantalla y de un PagerAdapter encargado de alimentar al componente.

Nuestro activity mostrará un cuadro de texto y botón para realizar una búsqueda en picassaweb.

y este es el layout que vamos a utilizar


Luego creamos nuestro custom adapter, que lo que hace es devolver las vistas según vamos desplazando el dedo horizontalmente.

Y con esto ya tenemos las clases necesarias para nuestro ViewPager :).

5. Conclusiones

Vemos como es muy fácil y con muy poquito código somos capaces de crear interfaces bastante complejas. Como siempre, si os quereis bajar el proyecto, lo podéis hacer desde aquí


Para cualquier comentario, duda o sugerencia, tenéis el formulario que aparece a continuación.


Un saludo.