ViewPager с фрагментамиViewPager with Fragments

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

ViewPager часто используется в сочетании с фрагментами, чтобы проще управлять жизненным циклом каждой страницы в ViewPager.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. Каждая карта flash реализуется как фрагмент.Each flash card is implemented as a fragment. Пользователь предъявляет left и right через флэш-картах и касается проблемой math, чтобы отобразить ответ на него.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 и представления, большая часть работы, выполненной в 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.Android, см. в разделе фрагментов помогут вам приступить к работе с фрагментами.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

Создайте новый проект Android с именем FlashCardPager.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). Найти и установить Xamarin.Android.Support.v4 пакета, как описано в Viewpager и представления.Find and install the Xamarin.Android.Support.v4 package as explained in Viewpager and Views.

Добавление источника данных примерAdd an Example Data Source

В FlashCardPager, источником данных является колода карт flash, представленный 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.

Создать макет ViewPagerCreate 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. Обратите внимание, что необходимо использовать полное доменное имя android.support.v4.view.ViewPager поскольку ViewPager упакован в библиотеку поддержки.Note that you must use the fully-qualified name android.support.v4.view.ViewPager because ViewPager is packaged in a support library. ViewPager доступен только из библиотеки поддержки Android v4; он не доступен в пакете SDK для Android.ViewPager is available only from the Android Support Library v4; it is not available in the Android SDK.

Настройка ViewPagerSet up ViewPager

Изменить MainActivity.cs и добавьте следующие using инструкции:Edit MainActivity.cs and add the following using statements:

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

Изменение MainActivity объявление класса, чтобы он является производным от FragmentActivity:Change the MainActivity class declaration so that it is derived from FragmentActivity:

public class MainActivity : FragmentActivity

MainActivity является производным отFragmentActivity (а не Activity) так как FragmentActivity знает, как управлять поддержки фрагментов.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. Задает представление из Main.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:

Снимок экрана из FlashCardPager приложения с пустым ViewPagerScreenshot of FlashCardPager app with empty ViewPager

На этом этапе ViewPager является пустым, так как он недостаточно фрагментов, которые используются заполнения ViewPager, и для создания этих фрагментов из данных в некий адаптер 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 создать для реализации функциональности каждого флэш-карт и FragmentPagerAdapter для соединения создается ViewPager фрагментам, созданных на основе данных в FlashCardDeck.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

Каждая карта flash будут управляться с помощью пользовательского интерфейса фрагмент, который называется FlashCardFragment.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. В этом представлении будут Реализуйте обработчик события, который использует Toast для отображения ответа в том случае, когда пользователь касается вопрос флэш-карт.This view will implement an event handler that uses a Toast to display the answer when the user taps the flash card question.

Создать макет FlashCardFragmentCreate 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. Добавить новый макет Android для ресурсы/макета вызывается flashcard_layout.axml.Add a new Android layout to Resources/layout called flashcard_layout.axml. Откройте Resources/layout/flashcard_layout.axml и замените его содержимое следующим кодом: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>

Этот макет определяет фрагмент единый флэш-карт; Каждый фрагмент состоит из TextView , отображающий ошибку шрифтом больших (100sp).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.

Создать начальный класс FlashCardFragmentCreate 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. Обратите внимание, что FlashCardFragment является производным от версии библиотеки поддержки Fragment определенные в Android.Support.V4.App.Fragment.Note that FlashCardFragment is derived from the support library version of Fragment defined in Android.Support.V4.App.Fragment. Конструктор является пустым, чтобы newInstance фабричный метод используется для создания нового 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. LayoutInflater и ViewGroup передаются 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 флаг указывает, что процессом удержаться и не Добавление увеличенную представления для родительского представления (она будет добавлена при ViewPager вызов в адаптера GetItem метод далее в этой Пошаговое руководство по).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).

Добавьте код состояния FlashCardFragmentAdd 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, добавьте следующий Bundle ключи в верхнюю часть FlashCardFragment определение класса: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";

Изменить newInstance фабричный метод, поэтому он создает Bundle и использует выше ключей для хранения переданного вопрос и ответить на текст в фрагменте после его создания: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

ViewPager использует объект контроллера адаптера, которая размещается между ViewPager и источником данных (см. рисунок в 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. Поскольку в этом примере используется фрагментов, она использует FragmentPagerAdapterFragmentPagerAdapter является производным от PagerAdapter.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, FragmentPagerAdapter извлекает данные из источника данных и использует его для создания Fragments для ViewPager для отображения.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 в класс FlashCardDeckAdapter.cs: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;

Эта строка кода хранилищ FlashCardDeck экземпляр, на котором FlashCardDeckAdapter будет использовать.This line of code stores the FlashCardDeck instance that the FlashCardDeckAdapter will use.

Реализуйте CountImplement 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; }
}

NumCards Свойство FlashCardDeck возвращает количество флэш-карты (число фрагментов) в наборе данных.The NumCards property of FlashCardDeck returns the number of flash cards (number of fragments) in the data set.

Реализуйте GetItemImplement 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. Ищет строку проблемы math в 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. Вызовы FlashCardFragment фабричный метод newInstance, передав в строках проблему и ответ флэш-карт.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 отображает Fragment в position, он отображает TextBox содержащий строку проблема math, расположенный по адресу position в колоде флэш-карт.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.

Добавьте адаптер в ViewPagerAdd 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. ( SupportFragmentManager Позволяет получить ссылку на свойство FragmentActivity 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. Вы должны увидеть первое изображение колоды карт flash отображаются на экране, как показано на следующем рисунке слева.You should see the first image of the flash card deck appear on the screen as shown on the left in the next screenshot. Проведите по экрану слева, чтобы увидеть дополнительные флэш-карты, затем пальцем вправо для перемещения назад по колоду карт flash: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.

Откройте Resources/layout/Main.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 отображается в верхней части каждой карточки flash: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 в класс FlashCardDeckAdapter.cs: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));
}

Этот код преобразует позицию в колоду карт flash в проблему.This code converts the position in the flash card deck to a problem number. Результирующая строка преобразуется в Java String , возвращаемую ViewPager.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

Узнать, сколько проблему в колоду карт флэш-памяти, который отображается в верхней части каждой карточки flash считайте выполняется и обратно.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

FlashCardPager представляет собой серию основе фрагмент флэш-карты в ViewPager, но еще не предоставляет способ отображения ответов для каждой задачи.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. answer Переменная была инициализирована ранее, когда сведения о состоянии, считанный из пакета, который был передан OnCreateView.The answer variable was initialized earlier when state information was read from the Bundle that was passed to OnCreateView. Построить и запустить приложение, а затем выберите текст проблему в каждой карточке flash, чтобы увидеть ответ:Build and run the app, then tap the problem text on each flash card to see the answer:

Снимки экрана из FlashCardPager приложение всплывающие уведомления шифрованию ошибкуScreenshots of FlashCardPager app Toasts when math problem is tapped

FlashCardPager представленные в этом пошаговом руководстве использует MainActivity производным от FragmentActivity, но можно также создавать производные MainActivity из AppCompatActivity (которая также обеспечивает управление фрагментами).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

В этом пошаговом руководстве указан пошаговый пример создания базового ViewPager-на основе приложений с помощью Fragments.This walkthrough provided a step-by-step example of how to build a basic ViewPager-based app using Fragments. Оно представлено в источник данных пример, содержащий флэш-карт вопросов и ответов, ViewPager макет для отображения флэш-карты и FragmentPagerAdapter подкласс, в котором подключается ViewPager к источнику данных.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.