ViewPagerViewPager

ViewPager es un administrador de diseño que le permite implementar la navegación gestural. Navegación gestural permite al usuario deslice el dedo hacia izquierda y derecha para ir avanzando por las páginas de datos. Esta guía explica cómo implementar la navegación con ViewPager, gestural con y sin fragmentos. También se describe cómo agregar indicadores de página mediante PagerTitleStrip y PagerTabStrip.ViewPager is a layout manager that lets you implement gestural navigation. Gestural navigation allows the user to swipe left and right to step through pages of data. This guide explains how to implement gestural navigation with ViewPager, with and without Fragments. It also describes how to add page indicators using PagerTitleStrip and PagerTabStrip.

Información generalOverview

Un escenario común en el desarrollo de aplicaciones es la necesidad de proporcionar a los usuarios con la navegación gestural entre las vistas del mismo nivel.A common scenario in app development is the need to provide users with gestural navigation between sibling views. En este enfoque, el usuario pase el dedo izquierda o derecha para las páginas de acceso de contenido (por ejemplo, en un Asistente para instalación o una presentación).In this approach, the user swipes left or right to access pages of content (for example, in a setup wizard or a slide show). Puede crear estas vistas de deslizar rápidamente mediante el ViewPager widget, disponible en biblioteca de compatibilidad de Android v4.You can create these swipe views by using the ViewPager widget, available in Android Support Library v4. El ViewPager es un widget de diseño que se compone de varias vistas secundarias donde cada vista secundaria constituye una página en el diseño:The ViewPager is a layout widget made up of multiple child views where each child view constitutes a page in the layout:

Aplicación de capturas de pantalla de TreePager con el ejemplo de pasar el dedo horizontalScreenshots of TreePager app with horizontal swipe example

Por lo general, ViewPager se usa junto con fragmentos; sin embargo, existen algunas situaciones donde desea usar ViewPager sin la complejidad agregada de Fragments.Typically, ViewPager is used in conjunction with Fragments; however, there are some situations where you might want to use ViewPager without the added complexity of Fragments.

ViewPager usa un patrón de adaptador que proporcionarla con las vistas para mostrar.ViewPager uses an adapter pattern to provide it with the views to display. El adaptador usado aquí es conceptualmente similar a la utilizada por RecyclerView – suministrar una implementación de PagerAdapter para generar las páginas que el ViewPager muestra al usuario.The adapter used here is conceptually similiar to that used by RecyclerView – you supply an implementation of PagerAdapter to generate the pages that the ViewPager displays to the user. Las páginas se muestran por ViewPager puede ser Views o Fragments.The pages displayed by ViewPager can be Views or Fragments. Cuando Views se muestran, del adaptador subclases Android PagerAdapter clase base.When Views are displayed, the adapter subclasses Android's PagerAdapter base class. Si Fragments se muestran, del adaptador subclases Android FragmentPagerAdapter.If Fragments are displayed, the adapter subclasses Android's FragmentPagerAdapter. También incluye la biblioteca de compatibilidad con Android FragmentPagerAdapter (una subclase de PagerAdapter) para ayudar con los detalles de la conexión Fragments a los datos.The Android support library also includes FragmentPagerAdapter (a subclass of PagerAdapter) to help with the details of connecting Fragments to data.

Esta guía muestra ambos enfoques:This guide demonstrates both approaches:

  • En Viewpager con vistas, un TreePager aplicación se desarrolla para demostrar cómo usar ViewPager para mostrar las vistas de un catálogo de árbol (una galería de imágenes de árboles de hoja caduca y duraderas).In Viewpager with Views, a TreePager app is developed to demonstrate how to use ViewPager to display views of a tree catalog (an image gallery of deciduous and evergreen trees). PagerTabStrip y PagerTitleStrip se usan para mostrar los títulos que ayudan con la navegación de páginas.PagerTabStrip and PagerTitleStrip are used to display titles that help with page navigation.

  • En Viewpager con fragmentos, un poco más compleja FlashCardPager aplicación se desarrolla para demostrar cómo usar ViewPager con Fragments para compilar una aplicación que presenta problemas de matemáticas como tarjetas Flash y responde a la entrada del usuario.In Viewpager with Fragments, a slightly more complex FlashCardPager app is developed to demonstrate how to use ViewPager with Fragments to build an app that presents math problems as flash cards and responds to user input.

RequisitosRequirements

Para usar ViewPager en el proyecto de aplicación, debe instalar la biblioteca de compatibilidad de Android v4 paquete.To use ViewPager in your app project, you must install the Android Support Library v4 package. Para obtener más información acerca de cómo instalar paquetes de NuGet, consulte Tutorial: Incluir NuGet en el proyecto.For more information about installing NuGet packages, see Walkthrough: Including a NuGet in your project.

ArquitecturaArchitecture

Tres componentes se usan para implementar la navegación gestural con ViewPager:Three components are used for implementing gestural navigation with ViewPager:

  • ViewPagerViewPager
  • AdaptadorAdapter
  • Indicador de buscapersonasPager Indicator

Cada uno de estos componentes se resume a continuación.Each of these components is summarized below.

ViewPagerViewPager

ViewPager es un administrador de diseño que muestra una colección de Views a la vez.ViewPager is a layout manager that displays a collection of Views one at a time. Su trabajo consiste en detectar el gesto de pasar el dedo del usuario y vaya a la vista anterior o siguiente según corresponda.Its job is to detect the user's swipe gesture and navigate to the next or previous view as appropriate. Por ejemplo, la captura de pantalla siguiente muestra un ViewPager realizar la transición de una imagen a la siguiente en respuesta a un gesto de usuario:For example, the screenshot below demonstrates a ViewPager making the transition from one image to the next in response to a user gesture:

Mostrar una transición entre las vistas de aplicación de primer plano de TreePagerCloseup of TreePager app displaying a transition between Views

AdaptadorAdapter

ViewPager extrae sus datos de un adaptador.ViewPager pulls its data from an adapter. Es crear se ocupa el adaptador el Views mostrado por el ViewPager, lo que les brinda según sea necesario.The adapter's job is to create the Views displayed by the ViewPager, providing them as needed. El diagrama siguiente ilustra este concepto – el adaptador crea y rellena Views y les proporciona el ViewPager.The diagram below illustrates this concept – the adapter creates and populates Views and provides them to the ViewPager. Como el ViewPager detecta los gestos de pasar el dedo del usuario, solicita el adaptador para proporcionar adecuado View para mostrar:As the ViewPager detects the user's swipe gestures, it asks the adapter to provide the appropriate View to display:

Diagrama que ilustra cómo en que el adaptador conecta las imágenes y los nombres para el ViewPagerDiagram illustrating how the Adapter connects images and names to the ViewPager

En este ejemplo concreto, cada View se construye a partir de una imagen de árbol y un nombre de árbol antes de pasarlo a la ViewPager.In this particular example, each View is constructed from a tree image and a tree name before it is passed to the ViewPager.

Indicador de buscapersonasPager Indicator

ViewPager puede utilizarse para mostrar un gran conjunto de datos (por ejemplo, una galería de imágenes puede contener cientos de imágenes).ViewPager may be used to display a large data set (for example, an image gallery may contain hundreds of images). Para ayudar al usuario navegar por conjuntos de datos grandes, ViewPager suele ir acompañado un indicador buscapersonas que muestra una cadena.To help the user navigate large data sets, ViewPager is often accompanied by a pager indicator that displays a string. La cadena podría ser el título de la imagen, un título o simplemente la posición de la vista actual del conjunto de datos.The string might be the image title, a caption, or simply the current view's position within the data set.

Hay dos vistas que pueden generar esta información de navegación para usted: PagerTabStrip y PagerTitleStrip. cada uno muestra una cadena en la parte superior de un ViewPager, y cada uno de ellos extrae sus datos de la ViewPagerdel adaptador, por lo que TI siempre permanece sincronizada con el que se muestra actualmente View.There are two views that can produce this navigation information for you: PagerTabStrip and PagerTitleStrip. Each displays a string at the top of a ViewPager, and each pulls its data from the ViewPager's adapter so that it always stays in sync with the currently-displayed View. La diferencia entre ellos es que PagerTabStrip incluye un indicador visual para la cadena "actual" mientras PagerTitleStrip sucede no (como se muestra en estas capturas de pantalla):The difference between them is that PagerTabStrip includes a visual indicator for the "current" string while PagerTitleStrip does not (as shown in these screenshots):

Capturas de pantalla de la aplicación TreePager con PagerTitleStrip y PagerTabStripScreenshots of the TreePager app with PagerTitleStrip and PagerTabStrip

Esta guía se muestra cómo immplement ViewPager, adaptador y los componentes de aplicación de indicador y los integran a para admitir la navegación gestural.This guide demonstrates how to immplement ViewPager, adapter, and indicator app components and integrate them to support gestural navigation.