ViewPager

ViewPager は、ジェスチャ ナビゲーションを実装できるレイアウト マネージャーです。 ジェスチャ ナビゲーションを使うと、ユーザーは左右にスワイプしてデータのページを順繰りに移動できます。 このガイドでは、フラグメントがある場合とない場合について、ViewPager でジェスチャ ナビゲーションを実装する方法について説明します。 また、PagerTitleStrip と PagerTabStrip を使ってページ インジケーターを追加する方法についても説明します。

概要

アプリ開発の一般的なシナリオとして、兄弟ビュー間のジェスチャ ナビゲーションをユーザーに提供する必要があります。 この方法では、ユーザーは左または右にスワイプしてコンテンツのページにアクセスします (セットアップ ウィザードやスライド ショーなど)。 Android Support Library v4 で利用できる ViewPager ウィジェットを使って、これらのスワイプ ビューを作成できます。 ViewPager は複数の子ビューから成るレイアウト ウィジェットであり、各子ビューがレイアウト内のページを構成します。

通常、ViewPager はフラグメントと組み合わせて使われます。ただし、複雑さが増す Fragment を使わずに、ViewPager を使いたい場合もあります。

ViewPager では、アダプター パターンを使って、表示するビューを提供します。 ここで使用するアダプターは、概念的には RecyclerView によって使われるものと似ており、PagerAdapter の実装を提供して、ViewPager がユーザーに表示するページを生成します。 ViewPager によって表示されるページには、View または Fragment を使用できます。 View が表示されるときは、アダプターは Android の PagerAdapter 基底クラスをサブクラス化します。 Fragment が表示される場合は、アダプターは Android の FragmentPagerAdapter をサブクラス化します。 Android サポート ライブラリには、データへの Fragment の接続の詳細に役立つ FragmentPagerAdapter (PagerAdapter のサブクラス) も含まれます。

このガイドでは、両方の方法を見ていきます。

• View を使用する Viewpager では、ViewPager を使用してツリー カタログ (落葉樹と常緑樹のイメージ ギャラリー) のビューを表示する方法を示す TreePager アプリが開発されています。 ページ ナビゲーションに役立つタイトルを表示するため、PagerTabStrip と PagerTitleStrip が使われています。

• Fragment を使用する Viewpager については、ViewPager で Fragment を使って、数学の問題をフラッシュ カードとして提示してユーザー入力に応答するアプリを構築する方法を示す、少し複雑な FlashCardPager アプリが開発されています。

要件

アプリ プロジェクトで ViewPager を使うには、Android Support Library v4 パッケージをインストールする必要があります。 NuGet パッケージのインストールについて詳しくは、プロジェクトへの NuGet の組み込みに関するチュートリアルの記事をご覧ください。

Architecture

ViewPager でジェスチャ ナビゲーションを実装するには、3 つのコンポーネントを使います。

• ViewPager
• アダプター
• ページャー インジケーター

これらの各コンポーネントを以下にまとめます。

ViewPager

ViewPager は、View のコレクションを一度に 1 つずつ表示するレイアウト マネージャーです。 その役割は、ユーザーのスワイプ ジェスチャを検出し、次または前のビューに適切に移動することです。 たとえば、次のスクリーンショットは、ユーザーのジェスチャに応答して画像間の移行を行う ViewPager を示したものです。

アダプター

ViewPager は、"アダプター" からデータをプルします。 アダプターの役割は、ViewPager によって表示される View を作成し、必要に応じて提供することです。 次の図は、アダプターが View を作成して設定し、ViewPager にそれを提供するという、この概念を示したものです。 ViewPager は、ユーザーのスワイプ ジェスチャを検出すると、表示する適切な View を提供するようアダプターに求めます。

この特定の例では、木の画像と木の名前から各 View が構築された後、ViewPager に渡されます。

ページャー インジケーター

ViewPager は、大きなデータ セットを表示するために使われる場合があります (たとえば、画像ギャラリーには何百もの画像が含まれている場合があります)。 大きなデータ セット内をユーザーが移動しやすくするため、ViewPager は文字列を表示する "ページャー インジケーター" と併用されることがよくあります。 文字列は、画像のタイトル、キャプション、または単にデータ セット内での現在のビューの位置などの場合があります。

このナビゲーション情報を自動的に生成できるビューとして、PagerTabStrip と PagerTitleStrip. の 2 つがあります。それぞれ、ViewPager の上部に文字列を表示し、ViewPager のアダプターからデータをプルして、現在表示されている View との同期を常に維持します。 これらの違いは、PagerTabStrip には "現在の" 文字列に対する視覚的インジケーターが含まれるのに対し、PagerTitleStrip には含まれないことです (次のスクリーンショットを参照)。

このガイドでは、ViewPager、アダプター、インジケーターの各アプリ コンポーネントを実装し、それらを統合してジェスチャ ナビゲーションをサポートする方法を見ていきます。