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. 이 방법에서는 사용자 천공 기와 왼쪽 또는 오른쪽으로 액세스의 내용 페이지 (예를 들어, 설치 마법사 또는 슬라이드 쇼).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가 표시 되는 어댑터 서브 클래스 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 지원 라이브러리도 포함 되어 있습니다 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 트리 카탈로그 (낙 엽 및 evergreen 트리의 이미지 갤러리)의 보기를 표시 하려면.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 사용 하는 방법을 보여 주기 위해 개발 된 앱 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.

요구 사항Requirements

사용 하도록 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.

아키텍처Architecture

사용 하 여 gestural 탐색을 구현 하기 위한 세 가지 구성 요소는 사용 ViewPager:Three components are used for implementing gestural navigation with ViewPager:

  • ViewPagerViewPager
  • 어댑터Adapter
  • 호출기 표시기Pager Indicator

이러한 각 구성이 요소 아래에 요약 되어 있습니다.Each of these components is summarized below.

ViewPagerViewPager

ViewPager 컬렉션을 표시 하는 레이아웃 관리자 View번 s 하나입니다.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. 어댑터의 작업을 만들 때 합니다 View으로 표시 되는 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:

어댑터는 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의 한다는 항상 동기화를 유지 하므로 어댑터는 현재 표시 된 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):

PagerTitleStrip 및 PagerTabStrip TreePager 응용 프로그램의 스크린샷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.