ViewPager

ViewPager es un administrador de diseño que permite implementar la navegación por gestos. La navegación por gestos permite al usuario deslizar el dedo hacia la izquierda y hacia la derecha para recorrer páginas de datos. En esta guía se explica cómo implementar la navegación por gestos con ViewPager, con y sin fragmentos. También se describe cómo agregar indicadores de página mediante PagerTitleStrip y PagerTabStrip.

Información general

Un escenario común en el desarrollo de aplicaciones es la necesidad de proporcionar a los usuarios navegación por gestos entre vistas del mismo nivel. En este enfoque, el usuario desliza el dedo hacia la izquierda o hacia la derecha para acceder a páginas de contenido (por ejemplo, en un asistente de configuración o una presentación con diapositivas). Puede crear estas vistas de deslizamiento mediante el widget ViewPager, disponible en la biblioteca de soporte técnico de Android v4. ViewPager es un widget de diseño formado por varias vistas secundarias en las que cada vista secundaria constituye una página en el diseño:

Normalmente, ViewPager se usa junto con fragmentos; sin embargo, hay algunas situaciones en las que es posible que desee usar ViewPager sin la complejidad adicional de Fragment.

ViewPager usa un patrón de adaptador para proporcionarle las vistas que se van a mostrar. El adaptador que se usa aquí es conceptualmente similar al usado por RecyclerView: proporciona una implementación de PagerAdapter para generar las páginas que ViewPager muestra al usuario. Las páginas mostradas por ViewPager pueden ser View o Fragment. Cuando se muestran View, el adaptador crea una subclase de la clase base PagerAdapter de Android. Si se muestran Fragment, el adaptador crea una subclase de Android FragmentPagerAdapter. La biblioteca de compatibilidad de Android también incluye FragmentPagerAdapter (una subclase de PagerAdapter) para ayudar con los detalles de conexión de Fragment a datos.

En esta guía se muestran ambos enfoques:

• En Viewpager con vistas, se desarrolla una aplicación TreePager para demostrar cómo usar ViewPager para mostrar vistas de un catálogo de árboles (una galería de imágenes de árboles caducifolios y perennes). PagerTabStrip y PagerTitleStrip se usan para mostrar títulos que ayudan con la navegación de páginas.

• En Viewpager con fragmentos, se desarrolla una aplicación FlashCardPager un poco más compleja para demostrar cómo usar ViewPager con Fragment para crear una aplicación que presenta problemas matemáticos como tarjetas flash y responde a la entrada del usuario.

Requisitos

Para usar ViewPager en el proyecto de aplicación, debe instalar el paquete de biblioteca de soporte técnico de Android v4. Para obtener más información sobre cómo instalar paquetes NuGet, vea Tutorial: incluir un NuGet en el proyecto.

Architecture

Se usan tres componentes para implementar la navegación por gestos con ViewPager:

• ViewPager
• Adaptador
• Indicador de paginación

Cada uno de estos componentes se resume a continuación.

ViewPager

ViewPager es un administrador de diseño que muestra una colección de View individualmente. Su trabajo consiste en detectar el gesto de deslizar el dedo del usuario y navegar a la vista siguiente o anterior según corresponda. Por ejemplo, en la captura de pantalla siguiente se muestra un ViewPager realizando la transición de una imagen a la siguiente en respuesta a un gesto de usuario:

Adaptador

ViewPager extrae sus datos de un adaptador. El trabajo del adaptador es crear los View mostrados por el ViewPager, lo que los proporciona según sea necesario. En el diagrama siguiente se muestra este concepto: el adaptador crea y rellena View y los proporciona a ViewPager. A medida que ViewPager detecta los gestos de deslizar el dedo del usuario, pide al adaptador que proporcione el View adecuado para mostrar:

En este ejemplo concreto, cada View se construye a partir de una imagen de árbol y un nombre de árbol antes de pasarlo a ViewPager.

Indicador de paginación

ViewPager se puede usar para mostrar un conjunto de datos grande (por ejemplo, una galería de imágenes puede contener cientos de imágenes). Para ayudar al usuario a navegar por grandes conjuntos de datos, ViewPager suele ir acompañado de un indicador de paginación que muestra una cadena. La cadena puede ser el título de la imagen, un título o simplemente la posición de la vista actual dentro del conjunto de datos.

Hay dos vistas que pueden generar esta información de navegación para usted: PagerTabStrip y PagerTitleStrip.. Cada una muestra una cadena en la parte superior de un ViewPager y cada una extrae sus datos del adaptador de ViewPager para que siempre permanezca sincronizado con el View mostrado actualmente. La diferencia entre ellos es que PagerTabStrip incluye un indicador visual para la cadena "actual" mientras que PagerTitleStrip no (como se muestra en estas capturas de pantalla):

En esta guía se muestra cómo implementar ViewPager, el adaptador y los componentes de la aplicación de indicador e integrarlos para admitir la navegación por gestos.