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조각과 함께 사용되지만 Fragment의 복잡성을 추가 하지 않고 ViewPager를 사용 해야 하는 경우도 있습니다.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 표시 되는 페이지는 View또는 Fragment수 있습니다.The pages displayed by ViewPager can be Views or Fragments. Views가 표시 되 면 어댑터의 서브 클래스 Android PagerAdapter 기본 클래스입니다.When Views are displayed, the adapter subclasses Android's PagerAdapter base class. Fragments가 표시 되 면 어댑터의 서브 클래스 Android FragmentPagerAdapter.If Fragments are displayed, the adapter subclasses Android's FragmentPagerAdapter. Android 지원 라이브러리에는 Fragment를 데이터에 연결 하는 방법에 대 한 세부 정보를 제공 하는 FragmentPagerAdapter (PagerAdapter의 서브 클래스)도 포함 되어 있습니다.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에서 ViewPager를 사용 하 여 트리 카탈로그 (낙 엽 및 TreePager의 이미지 갤러리)의 뷰를 표시 하는 방법을 보여 주기 위해 개발 되었습니다.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 with Fragments에서 조각을 사용하는 viewpager에서와 함께 를 사용하여 플래시 카드로 수학 문제를 제공하고 사용자 입력에 응답하는 앱을 빌드하는 방법을 ViewPager 보여주기 위해Fragment 약간 더 복잡한 FlashCardPager 앱이 개발되었습니다.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

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를 만들고 채우고 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

이 특정 예제에서는 ViewPager에 전달 되기 전에 트리 이미지와 트리 이름에서 각 View 생성 됩니다.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맨 위에 문자열을 표시 하 고, 각각은 항상 현재 @no__t_ 표시 된와 동기화 상태로 유지 되도록 ViewPager의 어댑터에서 데이터를 가져옵니다. 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에는 "current" 문자열에 대 한 시각적 표시기가 포함 되어 있지만 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

이 가이드에서는 ViewPager, 어댑터 및 표시기 앱 구성 요소를 immplement 하 고이를 통합 하 여 gestural 탐색을 지 원하는 방법을 보여 줍니다.This guide demonstrates how to immplement ViewPager, adapter, and indicator app components and integrate them to support gestural navigation.