ViewPager является менеджером макета, которая позволяет реализовывать жестовую навигации. Жестовую навигации позволяет пользователю проведения пальцем влево и вправо для пошагового просмотра страниц данных. В этом руководстве объясняется, как реализовать жестовую навигацию с помощью ViewPager, с и без фрагментов. Также описывается добавление индикаторов страницы, с помощью PagerTitleStrip с 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.


Распространенный сценарий при разработке приложений является необходимость предоставления пользователям жестовую навигации между представлениями того же уровня.A common scenario in app development is the need to provide users with gestural navigation between sibling views. В этом случае пользователь предъявляет влево или вправо для доступа к страницам содержимого (например, в мастере установки или слайд-шоу).In this approach, the user swipes left or right to access pages of content (for example, in a setup wizard or a slide show). Эти представления проведите по экрану можно создать с помощью ViewPager мини-приложения, доступные в библиотеки поддержки Android v4.You can create these swipe views by using the ViewPager widget, available in Android Support Library v4. ViewPager Является мини-приложения макета, состоящий из нескольких дочерних представлений, где каждого дочернего представления представляет собой страницу макета:The ViewPager is a layout widget made up of multiple child views where each child view constitutes a page in the layout:

Снимки экрана из TreePager приложение с примером горизонтальной прокруткиScreenshots of TreePager app with horizontal swipe example

Как правило ViewPager используется в сочетании с фрагментов, однако существуют ситуации, где вы можете использовать ViewPager без дополнительной сложностью 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 использует шаблон адаптер для предоставления его представления для отображения.ViewPager uses an adapter pattern to provide it with the views to display. Адаптер, используемый здесь концептуально похож на используемую RecyclerView – предоставить реализацию PagerAdapter для создания страниц, ViewPager отображает для пользователя.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. Страницы, отображаемые с ViewPager может быть Views или Fragments.The pages displayed by ViewPager can be Views or Fragments. Когда Viewотображаются s, адаптер подклассы Android в PagerAdapter базового класса.When Views are displayed, the adapter subclasses Android's PagerAdapter base class. Если Fragmentотображаются s, адаптер подклассы Android в FragmentPagerAdapter.If Fragments are displayed, the adapter subclasses Android's FragmentPagerAdapter. Также включает библиотеку поддержки Android FragmentPagerAdapter (подкласс PagerAdapter) помогут подробные сведения о подключении Fragments к данным.The Android support library also includes FragmentPagerAdapter (a subclass of PagerAdapter) to help with the details of connecting Fragments to data.

В этом руководстве показаны оба подхода:This guide demonstrates both approaches:

  • В Viewpager с представлениями, TreePager приложение разработано для демонстрации использования ViewPager для отображения представления дерева каталога (коллекции образов деревьев листопадное и актуальная).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 и PagerTitleStrip используются для заголовков, которые помогут в навигации по страницам.PagerTabStrip and PagerTitleStrip are used to display titles that help with page navigation.

  • В Viewpager с фрагментами, немного более сложная FlashCardPager приложение разработано для демонстрации использования ViewPager с Fragments, чтобы построить приложение, которое представляет математических задач как флэш-картах и реагирует на ввод данных пользователем.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.


Чтобы использовать ViewPager в проекте приложения, необходимо установить библиотеки поддержки Android v4 пакета.To use ViewPager in your app project, you must install the Android Support Library v4 package. Дополнительные сведения об установке пакетов NuGet см. в разделе Пошаговое руководство: Включение NuGet в проект.For more information about installing NuGet packages, see Walkthrough: Including a NuGet in your project.


Три компонента используются для реализации жестовую навигации с ViewPager:Three components are used for implementing gestural navigation with ViewPager:

  • ViewPagerViewPager
  • АдаптерAdapter
  • Индикатор на пейджерPager Indicator

Каждый из этих компонентов представленную ниже.Each of these components is summarized below.


ViewPager представляет диспетчер макет, который отображает коллекцию Views одной за раз.ViewPager is a layout manager that displays a collection of Views one at a time. Ее задачей является обнаружение пользователя жеста и перехода к следующему или предыдущему представлению соответствующим образом.Its job is to detect the user's swipe gesture and navigate to the next or previous view as appropriate. Например, на следующем снимке экрана показано ViewPager осуществление перехода из одного образа к другому в ответ на жест пользователя:For example, the screenshot below demonstrates a ViewPager making the transition from one image to the next in response to a user gesture:

Крупный план из TreePager приложений, отображение переход между представлениямиCloseup of TreePager app displaying a transition between Views


ViewPager Извлекает данные из адаптера.ViewPager pulls its data from an adapter. Задание адаптера является создание Views, отображаемого элементом ViewPager, предоставляя им при необходимости.The adapter's job is to create the Views displayed by the ViewPager, providing them as needed. На следующей схеме показана эта концепция – адаптер создает и заполняет Views и предоставляет их ViewPager.The diagram below illustrates this concept – the adapter creates and populates Views and provides them to the ViewPager. Как ViewPager обнаруживает жесты пользователя проведите по экрану, он спрашивает адаптер для предоставления соответствующего View для отображения:As the ViewPager detects the user's swipe gestures, it asks the adapter to provide the appropriate View to display:

Схема, иллюстрирующая как адаптер подключается изображений и имена к ViewPagerDiagram illustrating how the Adapter connects images and names to the ViewPager

В данном конкретном примере каждый View создается из образа дерева и имя дерева, перед передачей в ViewPager.In this particular example, each View is constructed from a tree image and a tree name before it is passed to the ViewPager.

Индикатор на пейджерPager Indicator

ViewPager может использоваться для отображения большого набора данных (например, коллекции образов может содержать сотни образов).ViewPager may be used to display a large data set (for example, an image gallery may contain hundreds of images). Чтобы помочь пользователю перемещение по большим наборам данных, ViewPager часто сопровождается индикатор пейджер , отображает строку.To help the user navigate large data sets, ViewPager is often accompanied by a pager indicator that displays a string. Строка может быть название, заголовок или просто текущее представление позиции в наборе данных.The string might be the image title, a caption, or simply the current view's position within the data set.

Доступно два представления, которые могут производить эти сведения навигации: PagerTabStrip и PagerTitleStrip. каждая строка в верхней части ViewPager, и каждый извлекает данные из ViewPagerэлемента адаптера, так что он всегда остается синхронизированной с отображаемое 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. Это различие между ними PagerTabStrip включает визуального индикатора для «текущего» строки при PagerTitleStrip не (как показано на эти снимки экрана):The difference between them is that PagerTabStrip includes a visual indicator for the "current" string while PagerTitleStrip does not (as shown in these screenshots):

Снимки экрана TreePager приложения с помощью PagerTitleStrip с pagertabstripScreenshots of the TreePager app with PagerTitleStrip and PagerTabStrip

В этом руководстве показано, как immplement ViewPager, адаптер, а индикатор компонентов приложения и интегрировать их для поддержки жестовую навигации.This guide demonstrates how to immplement ViewPager, adapter, and indicator app components and integrate them to support gestural navigation.