조각이 있는 ViewPagerViewPager with Fragments

ViewPager는 gestural 탐색을 구현할 수 있도록 하는 레이아웃 관리자입니다. Gestural 탐색을 사용 하면 사용자가 왼쪽 및 오른쪽으로 이동 하 여 데이터 페이지를 단계별로 이동할 수 있습니다. 이 가이드에서는 데이터 페이지로 조각을 사용 하 여 ViewPager로 swipeable UI를 구현 하는 방법에 대해 설명 합니다.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 a swipeable UI with ViewPager, using Fragments as the data pages.

개요Overview

ViewPagerViewPager에서 각 페이지의 수명 주기를 보다 쉽게 관리할 수 있도록 조각과 함께 사용 되는 경우가 많습니다.ViewPager is often used in conjunction with fragments so that it is easier to manage the lifecycle of each page in the ViewPager. 이 연습에서는 ViewPager를 사용 하 여 플래시 카드에 일련의 수학 문제를 제공 하는 FlashCardPager 라는 앱을 만듭니다.In this walkthrough, ViewPager is used to create an app called FlashCardPager that presents a series of math problems on flash cards. 각 플래시 카드는 조각으로 구현 됩니다.Each flash card is implemented as a fragment. 사용자는 플래시 카드를 왼쪽 및 오른쪽으로 swipes 수학 문제를 탭 하 여 답변을 표시 합니다.The user swipes left and right through the flash cards and taps on a math problem to reveal its answer. 이 앱은 각 플래시 카드의 Fragment 인스턴스를 만들고 FragmentPagerAdapter에서 파생 된 어댑터를 구현 합니다.This app creates a Fragment instance for each flash card and implements an adapter derived from FragmentPagerAdapter. Viewpager 및 Views에서 대부분의 작업은 MainActivity 수명 주기 메서드에서 수행 되었습니다.In Viewpager and Views, most of the work was done in MainActivity lifecycle methods. FlashCardPager에서 대부분의 작업은 수명 주기 방법 중 하나에서 Fragment에 의해 수행 됩니다.In FlashCardPager, most of the work will be done by a Fragment in one of its lifecycle methods.

이 가이드에서는 Xamarin의 조각에 대해 잘 모르는 경우 조각 –의 기본 사항에 대해 다루지 않습니다. 조각 시작에 도움이 되는 조각 을 참조 하세요.This guide does not cover the basics of fragments – if you are not yet familiar with fragments in Xamarin.Android, see Fragments to help you get started with fragments.

앱 프로젝트 시작Start an App Project

FlashCardPager라는 새 Android 프로젝트를 만듭니다.Create a new Android project called FlashCardPager. 그런 다음 NuGet 패키지 관리자를 시작 합니다. NuGet 패키지를 설치 하는 방법에 대 한 자세한 내용은 연습: 프로젝트에 Nuget 포함을 참조 하세요.Next, launch the NuGet Package Manager (for more information about installing NuGet packages, see Walkthrough: Including a NuGet in your project). Viewpager 및 Views에 설명 된 대로 xamarin.ios 패키지를 찾아 설치 합니다.Find and install the Xamarin.Android.Support.v4 package as explained in Viewpager and Views.

예제 데이터 소스 추가Add an Example Data Source

FlashCardPager에서 데이터 원본은 FlashCardDeck 클래스가 나타내는 플래시 카드의 데크입니다. 이 데이터 소스는 항목 콘텐츠를 사용 하 여 ViewPager을 제공 합니다.In FlashCardPager, the data source is a deck of flash cards represented by the FlashCardDeck class; this data source supplies the ViewPager with item content. FlashCardDeck에는 수학 문제와 답변의 미리 만들어진 컬렉션이 포함 되어 있습니다.FlashCardDeck contains a ready-made collection of math problems and answers. FlashCardDeck 생성자에는 인수가 필요 하지 않습니다.The FlashCardDeck constructor requires no arguments:

FlashCardDeck flashCards = new FlashCardDeck();

FlashCardDeck에서 플래시 카드의 컬렉션은 각 플래시 카드에 인덱서를 통해 액세스할 수 있도록 구성 되어 있습니다.The collection of flash cards in FlashCardDeck is organized such that each flash card can be accessed by an indexer. 예를 들어 다음 코드 줄은 데크에서 네 번째 플래시 카드 문제를 검색 합니다.For example, the following line of code retrieves the fourth flash card problem in the deck:

string problem = flashCardDeck[3].Problem;

이 코드 줄은 이전 문제에 대 한 해당 대답을 검색 합니다.This line of code retrieves the corresponding answer to the previous problem:

string answer = flashCardDeck[3].Answer;

FlashCardDeck의 구현 세부 정보는 ViewPager를 이해 하는 것과 관련이 없기 때문에 FlashCardDeck 코드는 여기에 나열 되어 있지 않습니다.Because the implementation details of FlashCardDeck are not relevant to understanding ViewPager, the FlashCardDeck code is not listed here. FlashCardDeck에 대 한 소스 코드는 FlashCardDeck.cs에서 사용할 수 있습니다.The source code to FlashCardDeck is available at FlashCardDeck.cs. 이 소스 파일을 다운로드 하거나 코드를 복사 하 여 새 FlashCardDeck.cs 파일에 붙여 넣은 다음 프로젝트에 추가 합니다.Download this source file (or copy and paste the code into a new FlashCardDeck.cs file) and add it to your project.

ViewPager 레이아웃 만들기Create a ViewPager Layout

Resources/layout/Main. axml 을 열고 내용을 다음 xml로 바꿉니다.Open Resources/layout/Main.axml and replace its contents with the following XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    </android.support.v4.view.ViewPager>

이 XML은 전체 화면을 차지 하는 ViewPager 정의 합니다.This XML defines a ViewPager that occupies the entire screen. ViewPager은 지원 라이브러리에 패키지 되어 있으므로 정규화 된 이름 android . v a n v.Note that you must use the fully-qualified name android.support.v4.view.ViewPager because ViewPager is packaged in a support library. ViewPagerAndroid 지원 라이브러리 v4에서만 사용할 수 있습니다. Android SDK에서 사용할 수 없습니다.ViewPager is available only from the Android Support Library v4; it is not available in the Android SDK.

ViewPager 설정Set up ViewPager

MainActivity.cs 를 편집 하 고 다음 using 문을 추가 합니다.Edit MainActivity.cs and add the following using statements:

using Android.Support.V4.View;
using Android.Support.V4.App;

FragmentActivity에서 파생 되도록 MainActivity 클래스 선언을 변경 합니다.Change the MainActivity class declaration so that it is derived from FragmentActivity:

public class MainActivity : FragmentActivity

FragmentActivity는 조각 지원을 관리 하는 방법을 알고 있으므로 MainActivity``FragmentActivity (Activity대신)에서 파생 됩니다.MainActivity is derived fromFragmentActivity (rather than Activity) because FragmentActivity knows how to manage the support of fragments. OnCreate 메서드를 다음 코드로 바꿉니다.Replace the OnCreate method with the following code:

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);
    SetContentView(Resource.Layout.Main);
    ViewPager viewPager = FindViewById<ViewPager>(Resource.Id.viewpager);
    FlashCardDeck flashCards = new FlashCardDeck();
}

이 코드는 다음을 수행 합니다.This code does the following:

  1. 주. axml 레이아웃 리소스에서 뷰를 설정 합니다.Sets the view from the Main.axml layout resource.

  2. 레이아웃에서 ViewPager에 대 한 참조를 검색 합니다.Retrieves a reference to the ViewPager from the layout.

  3. FlashCardDeck를 데이터 소스로 인스턴스화합니다.Instantiates a new FlashCardDeck as the data source.

이 코드를 작성 하 고 실행 하면 다음 스크린샷에 표시 됩니다.When you build and run this code, you should see a display that resembles the following screenshot:

빈 ViewPager를 사용 하는 FlashCardPager 앱의스크린샷Screenshot of FlashCardPager app with empty ViewPager

이 시점에서 ViewPagerViewPager를 채우는 데 사용 되는 조각이 부족 하 고 FlashCardDeck의 데이터에서 이러한 조각을 만들기 위한 어댑터가 부족 하기 때문에 비어 있습니다.At this point, the ViewPager is empty because it is lacking the fragments that are used populate the ViewPager, and it is lacking an adapter for creating these fragments from the data in FlashCardDeck.

다음 섹션에서는 FlashCardFragment를 만들어 각 플래시 카드의 기능을 구현 하 고, FlashCardDeck의 데이터에서 만든 조각에 ViewPager를 연결 하기 위해 FragmentPagerAdapter 생성 합니다.In the following sections, a FlashCardFragment is create to implement the functionality of each flash card, and a FragmentPagerAdapter is created to connect the ViewPager to the fragments created from data in the FlashCardDeck.

조각 만들기Create the Fragment

각 플래시 카드는 FlashCardFragment이라는 UI 조각으로 관리 됩니다.Each flash card will be managed by a UI fragment called FlashCardFragment. FlashCardFragment보기에는 단일 플래시 카드에 포함 된 정보가 표시 됩니다.FlashCardFragment's view will display the information contained with a single flash card. FlashCardFragment의 각 인스턴스는 ViewPager에서 호스팅됩니다.Each instance of FlashCardFragment will be hosted by the ViewPager. FlashCardFragment의 보기는 플래시 카드 문제 텍스트를 표시 하는 TextView 구성 됩니다.FlashCardFragment's view will consist of a TextView that displays the flash card problem text. 이 뷰는 사용자가 flash 카드 질문을 누를 때 답변을 표시 하는 Toast 사용 하는 이벤트 처리기를 구현 합니다.This view will implement an event handler that uses a Toast to display the answer when the user taps the flash card question.

FlashCardFragment 레이아웃 만들기Create the FlashCardFragment Layout

FlashCardFragment를 구현 하려면 먼저 해당 레이아웃을 정의 해야 합니다.Before FlashCardFragment can be implemented, its layout must be defined. 이 레이아웃은 단일 조각에 대 한 조각 컨테이너 레이아웃입니다.This layout is a fragment container layout for a single fragment. Flashcard_layout라는 리소스/레이아웃 에 새 Android 레이아웃을 추가 합니다.Add a new Android layout to Resources/layout called flashcard_layout.axml. Resources/layout/flashcard_layout 을 열고 내용을 다음 코드로 바꿉니다.Open Resources/layout/flashcard_layout.axml and replace its contents with the following code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/flash_card_question"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:textSize="100sp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="Question goes here" />
    </RelativeLayout>

이 레이아웃은 단일 플래시 카드 조각을 정의 합니다. 각 조각은 큼 (100sp) 글꼴을 사용 하 여 수학 문제를 표시 하는 TextView 구성 됩니다.This layout defines a single flash card fragment; each fragment is comprised of a TextView that displays a math problem using a large (100sp) font. 이 텍스트는 플래시 카드에서 세로 및 가로로 가운데에 배치 됩니다.This text is centered vertically and horizontally on the flash card.

초기 FlashCardFragment 클래스 만들기Create the Initial FlashCardFragment Class

FlashCardFragment.cs 라는 새 파일을 추가 하 고 해당 내용을 다음 코드로 바꿉니다.Add a new file called FlashCardFragment.cs and replace its contents with the following code:

using System;
using Android.OS;
using Android.Views;
using Android.Widget;
using Android.Support.V4.App;

namespace FlashCardPager
{
    public class FlashCardFragment : Android.Support.V4.App.Fragment
    {
        public FlashCardFragment() { }

        public static FlashCardFragment newInstance(String question, String answer)
        {
            FlashCardFragment fragment = new FlashCardFragment();
            return fragment;
        }
        public override View OnCreateView (
            LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            View view = inflater.Inflate (Resource.Layout.flashcard_layout, container, false);
            TextView questionBox = (TextView)view.FindViewById (Resource.Id.flash_card_question);
            return view;
        }
    }
}

이 코드는 플래시 카드를 표시 하는 데 사용 되는 필수 Fragment 정의를 스텁 합니다.This code stubs out the essential Fragment definition that will be used to display a flash card. FlashCardFragmentAndroid.Support.V4.App.Fragment에 정의 된 Fragment 지원 라이브러리 버전에서 파생 됩니다.Note that FlashCardFragment is derived from the support library version of Fragment defined in Android.Support.V4.App.Fragment. 생성자는 newInstance factory 메서드가 생성자 대신 새 FlashCardFragment을 만드는 데 사용 되도록 비어 있습니다.The constructor is empty so that the newInstance factory method is used to create a new FlashCardFragment instead of a constructor.

OnCreateView 수명 주기 메서드는 TextView을 만들고 구성 합니다.The OnCreateView lifecycle method creates and configures the TextView. 조각 TextView의 레이아웃을 늘어납니다 하 고 호출자에 게 팽창 TextView를 반환 합니다.It inflates the layout for the fragment's TextView and returns the inflated TextView to the caller. LayoutInflaterViewGroup는 레이아웃을 확장할 수 있도록 OnCreateView에 전달 됩니다.LayoutInflater and ViewGroup are passed to OnCreateView so that it can inflate the layout. savedInstanceState 번들에는 OnCreateView가 저장 된 상태에서 TextView를 다시 만드는 데 사용 하는 데이터가 포함 되어 있습니다.The savedInstanceState bundle contains data that OnCreateView uses to recreate the TextView from a saved state.

inflater.Inflate에 대 한 호출을 통해 조각의 뷰가 명시적으로 팽창.The fragment's view is explicitly inflated by the call to inflater.Inflate. container 인수는 뷰의 부모 이며, false 플래그는 inflater에 게 팽창 뷰를 뷰의 부모에 추가 하지 않도록 지시 합니다 .이 연습의 뒷부분에 나오는 어댑터의 GetItem 메서드를 호출할 ViewPager 때 추가 됩니다.The container argument is the view's parent, and the false flag instructs the inflater to refrain from adding the inflated view to the view's parent (it will be added when ViewPager call's the adapter's GetItem method later in this walkthrough).

FlashCardFragment에 상태 코드 추가Add State Code to FlashCardFragment

활동과 마찬가지로 조각에는 상태를 저장 하 고 검색 하는 데 사용 하는 Bundle 있습니다.Like an Activity, a fragment has a Bundle that it uses to save and retrieve its state. FlashCardPager에서이 Bundle은 연결 된 플래시 카드의 질문과 대답 텍스트를 저장 하는 데 사용 됩니다.In FlashCardPager, this Bundle is used to save the question and answer text for the associated flash card. FlashCardFragment.cs에서 FlashCardFragment 클래스 정의의 맨 위에 다음 Bundle 키를 추가 합니다.In FlashCardFragment.cs, add the following Bundle keys to the top of the FlashCardFragment class definition:

private static string FLASH_CARD_QUESTION = "card_question";
private static string FLASH_CARD_ANSWER = "card_answer";

Bundle 개체를 만들고 위의 키를 사용 하 여 전달 된 질문 및 답변 텍스트를 인스턴스화한 후 조각에 저장 하도록 newInstance factory 메서드를 수정 합니다.Modify the newInstance factory method so that it creates a Bundle object and uses the above keys to store the passed question and answer text in the fragment after it is instantiated:

public static FlashCardFragment newInstance(String question, String answer)
{
    FlashCardFragment fragment = new FlashCardFragment();

    Bundle args = new Bundle();
    args.PutString(FLASH_CARD_QUESTION, question);
    args.PutString(FLASH_CARD_ANSWER, answer);
    fragment.Arguments = args;

    return fragment;
}

OnCreateView 조각 수명 주기 메서드를 수정 하 여 전달 된 번들에서이 정보를 검색 하 고 TextBox질문 텍스트를 로드 합니다.Modify the fragment lifecycle method OnCreateView to retrieve this information from the passed-in Bundle and load the question text into the TextBox:

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    string question = Arguments.GetString(FLASH_CARD_QUESTION, "");
    string answer = Arguments.GetString(FLASH_CARD_ANSWER, "");

    View view = inflater.Inflate(Resource.Layout.flashcard_layout, container, false);
    TextView questionBox = (TextView)view.FindViewById(Resource.Id.flash_card_question);
    questionBox.Text = question;

    return view;
}

answer 변수는 여기에서 사용 되지 않지만 나중에이 파일에 이벤트 처리기 코드를 추가할 때 사용 됩니다.The answer variable is not used here, but it will be used later when event handler code is added to this file.

어댑터 만들기Create the Adapter

ViewPagerViewPager와 데이터 원본 사이에 있는 어댑터 컨트롤러 개체를 사용 합니다 (ViewPager 어댑터 문서의 그림 참조).ViewPager uses an adapter controller object that sits between the ViewPager and the data source (see the illustration in the ViewPager Adapter article). 이 데이터에 액세스 하려면 ViewPager PagerAdapter에서 파생 된 사용자 지정 어댑터를 제공 해야 합니다.To access this data, ViewPager requires that you provide a custom adapter derived from PagerAdapter. 이 예제에서는 조각을 사용 하므로 PagerAdapter에서 파생 된 FragmentPagerAdapter FragmentPagerAdapter – 사용 합니다.Because this example uses fragments, it uses a FragmentPagerAdapterFragmentPagerAdapter is derived from PagerAdapter. FragmentPagerAdapter은 사용자가 페이지로 돌아올 수 있는 한, 조각 관리자에 영구적으로 보관 되는 Fragment 각 페이지를 나타냅니다.FragmentPagerAdapter represents each page as a Fragment that is persistently kept in the fragment manager for as long as the user can return to the page. 사용자가 ViewPager페이지를 swipes FragmentPagerAdapter는 데이터 원본에서 정보를 추출 하 고이를 사용 하 여 ViewPager 표시할 Fragment를 만듭니다.As the user swipes through pages of the ViewPager, the FragmentPagerAdapter extracts information from the data source and uses it to create Fragments for the ViewPager to display.

FragmentPagerAdapter를 구현 하는 경우 다음을 재정의 해야 합니다.When you implement a FragmentPagerAdapter, you must override the following:

  • 개수 – 사용 가능한 뷰 (페이지) 수를 반환 하는 읽기 전용 속성입니다.Count – Read-only property that returns the number of views (pages) available.

  • GetItem – 지정 된 페이지에 대해 표시할 조각을 반환 합니다.GetItem – Returns the fragment to display for the specified page.

FlashCardDeckAdapter.cs 라는 새 파일을 추가 하 고 해당 내용을 다음 코드로 바꿉니다.Add a new file called FlashCardDeckAdapter.cs and replace its contents with the following code:

using System;
using Android.Views;
using Android.Widget;
using Android.Support.V4.App;

namespace FlashCardPager
{
    class FlashCardDeckAdapter : FragmentPagerAdapter
    {
        public FlashCardDeckAdapter (Android.Support.V4.App.FragmentManager fm, FlashCardDeck flashCards)
            : base(fm)
        {
        }

        public override int Count
        {
            get { throw new NotImplementedException(); }
        }

        public override Android.Support.V4.App.Fragment GetItem(int position)
        {
            throw new NotImplementedException();
        }
    }
}

이 코드는 필수 FragmentPagerAdapter 구현을 스텁 합니다.This code stubs out the essential FragmentPagerAdapter implementation. 다음 섹션에서는 이러한 각 메서드가 작업 코드로 대체 되었습니다.In the following sections, each of these methods is replaced with working code. 생성자의 목적은 조각 관리자를 FlashCardDeckAdapter의 기본 클래스 생성자에 전달 하는 것입니다.The purpose of the constructor is to pass the fragment manager to the FlashCardDeckAdapter's base class constructor.

어댑터 생성자 구현Implement the Adapter Constructor

앱은 FlashCardDeckAdapter를 인스턴스화할 때 조각 관리자 및 인스턴스화된 FlashCardDeck에 대 한 참조를 제공 합니다.When the app instantiates the FlashCardDeckAdapter, it supplies a reference to the fragment manager and an instantiated FlashCardDeck. FlashCardDeckAdapter.csFlashCardDeckAdapter 클래스 맨 위에 다음 멤버 변수를 추가 합니다.Add the following member variable to the top of the FlashCardDeckAdapter class in FlashCardDeckAdapter.cs:

public FlashCardDeck flashCardDeck;

FlashCardDeckAdapter 생성자에 다음 코드 줄을 추가 합니다.Add the following line of code to the FlashCardDeckAdapter constructor:

this.flashCardDeck = flashCards;

이 코드 줄은 FlashCardDeckAdapter가 사용할 FlashCardDeck 인스턴스를 저장 합니다.This line of code stores the FlashCardDeck instance that the FlashCardDeckAdapter will use.

개수 구현Implement Count

Count 구현은 비교적 간단 하며, 플래시 카드 데크에서 플래시 카드의 수를 반환 합니다.The Count implementation is relatively simple: it returns the number of flash cards in the flash card deck. Count를 다음 코드로 바꿉니다.Replace Count with the following code:

public override int Count
{
    get { return flashCardDeck.NumCards; }
}

FlashCardDeckNumCards 속성은 데이터 집합에 있는 플래시 카드 (조각 수)의 수를 반환 합니다.The NumCards property of FlashCardDeck returns the number of flash cards (number of fragments) in the data set.

GetItem 구현Implement GetItem

GetItem 메서드는 지정 된 위치와 연결 된 조각을 반환 합니다.The GetItem method returns the fragment associated with the given position. 플래시 카드 데크 위치에 대해 GetItem가 호출 되 면 해당 위치에서 플래시 카드 문제를 표시 하도록 구성 된 FlashCardFragment을 반환 합니다.When GetItem is called for a position in the flash card deck, it returns a FlashCardFragment configured to display the flash card problem at that position. GetItem 메서드를 다음 코드로 바꿉니다.Replace the GetItem method with the following code:

public override Android.Support.V4.App.Fragment GetItem(int position)
{
    return (Android.Support.V4.App.Fragment)
        FlashCardFragment.newInstance (
            flashCardDeck[position].Problem, flashCardDeck[position].Answer);
}

이 코드는 다음을 수행 합니다.This code does the following:

  1. FlashCardDeck 데크에서 지정 된 위치에 대 한 수학 문제 문자열을 조회 합니다.Looks up the math problem string in the FlashCardDeck deck for the specified position.

  2. 지정 된 위치에 대 한 FlashCardDeck 데크에서 대답 문자열을 조회 합니다.Looks up the answer string in the FlashCardDeck deck for the specified position.

  3. newInstance``FlashCardFragment 팩터리 메서드를 호출 하 여 플래시 카드 문제와 응답 문자열을 전달 합니다.Calls the FlashCardFragment factory method newInstance, passing in the flash card problem and answer strings.

  4. 해당 위치에 대 한 질문 및 답변 텍스트를 포함 하는 Fragment 새 플래시 카드를 만들어 반환 합니다.Creates and returns a new flash card Fragment that contains the question and answer text for that position.

ViewPager position에서 Fragment를 렌더링 하면 플래시 카드 데크 position에 있는 수학 문제 문자열이 포함 된 TextBox 표시 됩니다.When the ViewPager renders the Fragment at position, it displays the TextBox containing the math problem string residing at position in the flash card deck.

ViewPager에 어댑터를 추가 합니다.Add the Adapter to the ViewPager

FlashCardDeckAdapter 구현 되었으므로 이제 ViewPager에 추가 해야 합니다.Now that the FlashCardDeckAdapter is implemented, it's time to add it to the ViewPager. MainActivity.cs에서 OnCreate 메서드의 끝에 다음 코드 줄을 추가 합니다.In MainActivity.cs, add the following line of code to the end of the OnCreate method:

FlashCardDeckAdapter adapter =
    new FlashCardDeckAdapter(SupportFragmentManager, flashCards);
viewPager.Adapter = adapter;

이 코드는 FlashCardDeckAdapter를 인스턴스화하고 첫 번째 인수에 SupportFragmentManager를 전달 합니다.This code instantiates the FlashCardDeckAdapter, passing in the SupportFragmentManager in the first argument. FragmentActivity의 SupportFragmentManager 속성은 FragmentManager –에 대 한 참조를 가져오는 데 사용 됩니다. FragmentManager에 대 한 자세한 내용은 조각 관리를 참조 하세요.(The SupportFragmentManager property of FragmentActivity is used to get a reference to the FragmentManager – for more information about the FragmentManager, see Managing Fragments.)

이제 코어 구현이 완료 되어 앱을 빌드하고 실행 –.The core implementation is now complete – build and run the app. 다음 스크린샷에 왼쪽에 표시 된 것 처럼 화면에 플래시 카드 데크의 첫 번째 이미지가 표시 됩니다.You should see the first image of the flash card deck appear on the screen as shown on the left in the next screenshot. 왼쪽으로 살짝 밀어 플래시 카드를 확인 한 다음 오른쪽으로 살짝 밀어 플래시 카드 데크를 다시 이동 합니다.Swipe left to see more flash cards, then swipe right to move back through the flash card deck:

호출기 표시기가 없는 FlashCardPager 앱의예제 스크린샷Example screenshots of FlashCardPager app without pager indicators

호출기 표시기 추가Add a Pager Indicator

이 최소 ViewPager 구현은 덱의 각 플래시 카드를 표시 하지만 사용자가 데크 내에 있는 위치에 대 한 표시를 제공 하지 않습니다.This minimal ViewPager implementation displays each flash card in the deck, but it provides no indication as to where the user is within the deck. 다음 단계는 PagerTabStrip을 추가 하는 것입니다.The next step is to add a PagerTabStrip. PagerTabStrip은 표시 되는 문제 번호를 사용자에 게 알리고 이전 및 다음 플래시 카드의 힌트를 표시 하 여 탐색 컨텍스트를 제공 합니다.The PagerTabStrip informs the user as to which problem number is displayed and provides navigation context by displaying a hint of the previous and next flash cards.

리소스/레이아웃/기본. axml 을 열고 레이아웃에 PagerTabStrip를 추가 합니다.Open Resources/layout/Main.axml and add a PagerTabStrip to the layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

  <android.support.v4.view.PagerTabStrip
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="top"
      android:paddingBottom="10dp"
      android:paddingTop="10dp"
      android:textColor="#fff" />

</android.support.v4.view.ViewPager>

앱을 빌드하고 실행할 때 각 플래시 카드의 맨 위에 빈 PagerTabStrip 표시 되어야 합니다.When you build and run the app, you should see the empty PagerTabStrip displayed at the top of each flash card:

텍스트 없이 PagerTabStrip의확대/확대Closeup of PagerTabStrip without text

제목 표시Display a Title

각 페이지 탭에 제목을 추가 하려면 어댑터에서 GetPageTitleFormatted 메서드를 구현 합니다.To add a title to each page tab, implement the GetPageTitleFormatted method in the adapter. ViewPager GetPageTitleFormatted (구현 된 경우)를 호출 하 여 지정 된 위치에서 페이지를 설명 하는 제목 문자열을 가져옵니다.ViewPager calls GetPageTitleFormatted (if implemented) to obtain the title string that describes the page at the specified position. FlashCardDeckAdapter.csFlashCardDeckAdapter 클래스에 다음 메서드를 추가 합니다.Add the following method to the FlashCardDeckAdapter class in FlashCardDeckAdapter.cs:

public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
{
    return new Java.Lang.String("Problem " + (position + 1));
}

이 코드는 플래시 카드 데크 위치를 문제 번호로 변환 합니다.This code converts the position in the flash card deck to a problem number. 결과 문자열은 ViewPager반환 되는 Java String로 변환 됩니다.The resulting string is converted into a Java String that is returned to the ViewPager. 이 새 메서드를 사용 하 여 앱을 실행 하면 각 페이지에 PagerTabStrip의 문제 번호가 표시 됩니다.When you run the app with this new method, each page displays the problem number in the PagerTabStrip:

각 페이지 위에 표시 되는 문제 번호를 사용 하 여 FlashCardPager 스크린샷Screenshots of FlashCardPager with the problem number displayed above each page

앞뒤로 살짝 밀어 각 플래시 카드의 맨 위에 표시 되는 플래시 카드 데크에서 문제 번호를 볼 수 있습니다.You can swipe back and forth to see the problem number in the flash card deck that is displayed at the top of each flash card.

사용자 입력 처리Handle User Input

FlashCardPagerViewPager에 일련의 조각 기반 플래시 카드를 제공 하지만, 아직 각 문제에 대 한 답변을 표시할 수 있는 방법은 없습니다.FlashCardPager presents a series of fragment-based flash cards in a ViewPager, but it does not yet have a way to reveal the answer for each problem. 이 섹션에서는 이벤트 처리기가 FlashCardFragment에 추가 되어 사용자가 플래시 카드 문제 텍스트를 누를 때 답을 표시 합니다.In this section, an event handler is added to the FlashCardFragment to display the answer when the user taps on the flash card problem text.

FlashCardFragment.cs 를 열고 뷰가 호출자에 게 반환 되기 바로 전에 OnCreateView 메서드의 끝에 다음 코드를 추가 합니다.Open FlashCardFragment.cs and add the following code to the end of the OnCreateView method just before the view is returned to the caller:

questionBox.Click += delegate
{
    Toast.MakeText(Activity.ApplicationContext,
            "Answer: " + answer, ToastLength.Short).Show();
};

Click 이벤트 처리기는 사용자가 TextBox를 탭 할 때 표시 되는 알림 메시지에 대 한 답변을 표시 합니다.This Click event handler displays the answer in a Toast that appears when the user taps the TextBox. OnCreateView에 전달 된 번들에서 상태 정보를 읽으면 answer 변수가 이전에 초기화 되었습니다.The answer variable was initialized earlier when state information was read from the Bundle that was passed to OnCreateView. 앱을 빌드하고 실행 한 다음 각 플래시 카드의 문제 텍스트를 탭 하 여 답변을 확인 합니다.Build and run the app, then tap the problem text on each flash card to see the answer:

수학 문제를 탭 할 때 FlashCardPager app 알림을의 스크린샷Screenshots of FlashCardPager app Toasts when math problem is tapped

이 연습에 제공 된 FlashCardPagerFragmentActivity에서 파생 된 MainActivity를 사용 하지만 AppCompatActivity에서 MainActivity를 파생 시킬 수도 있습니다 .이는 조각 관리 지원도 제공 합니다.The FlashCardPager presented in this walkthrough uses a MainActivity derived from FragmentActivity, but you can also derive MainActivity from AppCompatActivity (which also provides support for managing fragments). AppCompatActivity 예제를 보려면 샘플 갤러리에서 FlashCardPager 를 참조 하세요.To view an AppCompatActivity example, see FlashCardPager in the Sample Gallery.

요약Summary

이 연습에서는 Fragments를 사용 하 여 기본 ViewPager기반 앱을 빌드하는 방법에 대 한 단계별 예제를 제공 했습니다.This walkthrough provided a step-by-step example of how to build a basic ViewPager-based app using Fragments. Flash 카드 질문 및 답변을 포함 하는 예제 데이터 원본, 플래시 카드를 표시 하는 ViewPager 레이아웃 및 데이터 원본에 ViewPager를 연결 하는 FragmentPagerAdapter 하위 클래스를 제공 했습니다.It presented an example data source containing flash card questions and answers, a ViewPager layout to display the flash cards, and a FragmentPagerAdapter subclass that connects the ViewPager to the data source. 사용자가 플래시 카드를 탐색 하는 데 도움이 되도록 각 페이지 맨 위에 문제 번호를 표시 하는 PagerTabStrip를 추가 하는 방법을 설명 하는 지침이 포함 되어 있습니다.To help the user navigate through the flash cards, instructions were included that explain how to add a PagerTabStrip to display the problem number at the top of each page. 마지막으로, 사용자가 플래시 카드 문제를 탭 할 때 답을 표시 하기 위해 이벤트 처리 코드가 추가 되었습니다.Finally, event handling code was added to display the answer when the user taps on a flash card problem.