ViewPagerViewPager

ViewPager 是一个布局管理器,可用于实现 gestural 导航。Gestural 导航允许用户向左和向右轻扫以逐步浏览数据页。本指南说明如何通过 ViewPager 实现 gestural 导航,其中和不包含片段。还介绍了如何使用 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.

概述Overview

应用开发中的一种常见情况是,需要在同级视图之间向用户提供 gestural 导航。A common scenario in app development is the need to provide users with gestural navigation between sibling views. 在此方法中,用户 swipes 向左或向右访问内容页(例如,在安装向导或幻灯片放映中)。In this approach, the user swipes left or right to access pages of content (for example, in a setup wizard or a slide show). 可以通过使用Android 支持库 v4中提供的 ViewPager 小组件创建这些轻扫视图。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,而不会增加 Fragment的复杂性。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 显示的页可以 ViewFragmentThe pages displayed by ViewPager can be Views or Fragments. 显示 View时,适配器会将 Android 的 PagerAdapter 基类。When Views are displayed, the adapter subclasses Android's PagerAdapter base class. 如果显示 Fragment,则适配器会将 Android FragmentPagerAdapter为子类。If Fragments are displayed, the adapter subclasses Android's FragmentPagerAdapter. Android 支持库还包括 FragmentPagerAdapterPagerAdapter的子类),有助于详细了解如何将 Fragment连接到数据。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). PagerTabStripPagerTitleStrip 用于显示可帮助进行页面导航的标题。PagerTabStrip and PagerTitleStrip are used to display titles that help with page navigation.

  • 包含片段的 Viewpager中,开发稍微复杂的FlashCardPager应用程序,以演示如何使用 FragmentViewPager 来构建一个将数学问题呈现为闪存卡并响应用户输入的应用程序。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.

要求Requirements

若要在你的应用项目中使用 ViewPager,你必须安装Android 支持库 v4包。To use ViewPager in your app project, you must install the Android Support Library v4 package. 有关安装 NuGet 包的详细信息,请参阅演练:在项目中包括 NuGetFor more information about installing NuGet packages, see Walkthrough: Including a NuGet in your project.

体系结构Architecture

使用 ViewPager实现 gestural 导航时,有三个组件:Three components are used for implementing gestural navigation with ViewPager:

  • ViewPagerViewPager
  • 适配器Adapter
  • 寻呼指示器Pager Indicator

下面总结了其中的每个组件。Each of these components is summarized below.

ViewPagerViewPager

ViewPager 是一种布局管理器,它一次显示一个 View的集合。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

适配器Adapter

ViewPager适配器提取其数据。ViewPager pulls its data from an adapter. 适配器的作业是创建 ViewPager显示的 View,并根据需要提供这些凭据。The adapter's job is to create the Views displayed by the ViewPager, providing them as needed. 下图说明了 – 适配器创建和填充 View的这一概念,并将其提供给 ViewPagerThe diagram below illustrates this concept – the adapter creates and populates Views and provides them to the ViewPager. ViewPager 检测到用户的轻扫手势时,它会要求适配器提供要显示的相应 ViewAs the ViewPager detects the user's swipe gestures, it asks the adapter to provide the appropriate View to display:

阐释适配器如何将图像和名称连接到 ViewPager 的关系图Diagram 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.

可以通过两种视图为你生成此导航信息: PagerTabStripPagerTitleStrip. 每个都在 ViewPager的顶部显示一个字符串,每个视图从 ViewPager的适配器中提取其数据,以使其始终与当前显示的 @no__t_ 保持同步4_ .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):

通过 PagerTitleStrip 和 PagerTabStripTreePager 应用程序的屏幕快照Screenshots of the TreePager app with PagerTitleStrip and PagerTabStrip

本指南演示了如何 immplement ViewPager、适配器和指标应用组件,并将它们集成以支持 gestural 导航。This guide demonstrates how to immplement ViewPager, adapter, and indicator app components and integrate them to support gestural navigation.