ブログ

はじめまして、K.Yと申します。

今回はタイトルの通りのViewPager2の基本的な使い方を紹介します。

ViewPager2とは

画面スワイプ に関するAndroid Jetpackのライブラリになります。
これを使用することにより、画面スワイプでのビューやフラグメントの切り替えが実現できます。
名前に2とついている通り、前のバージョン(ViewPager)もあります。
※比較するといろいろ改善がされているようなのですが、この記事では以前のバージョンとの違いは記述しておりません。

公式ドキュメント

• View Pager2
• ViewPager2を使用してフラグメント間をスライドする

なぜ今回触ったのか

Androidではいくつか画面遷移を実現する方法がありますが、ViewPager2というライブラリの存在は知りつつも、今まで触る機会がなかったため、調べることもありませんでした。
私がプライベートで使用しているアプリにも、スワイプして画面変更できるものがありますし、
スワイプ できた方が、指を動かすだけでいいのでユーザーとしても楽だと思います。

ですので、この機会に実装方法を知りたいと思いました。

では、早速実装に入ろうと思います。

ちなみに開発環境の情報はこんな感じです。

MacOS Catalina 10.15.7
Android Studio 4.1.3
Kotlin 1.3.72

レイアウト準備

画面遷移なので、画面を3つ用意します。
今回は名前は適当に、FirstFragment・SecondFragment・ThirdFragmentとして、
TextViewでテキストが中央に表示される画面にします。

ライブラリの追加

また、ViewPager2を使用するために、AndroidXの依存関係を追加しておきます。

build.gradleに以下の記述を追加します。

dependencies {
    implementation("androidx.viewpager2:viewpager2:1.0.0")
}

ActivityにViewPager2ウィジェットの追加

今回はActivityのレイアウトにViewPager2ウィジェットを追加します。

src/main/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <!-- この部分を追加 -->
    <androidx.viewpager2.widget.ViewPager2
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- -->

</androidx.constraintlayout.widget.ConstraintLayout>

Adapterの作成/設定

先ほど設定したViewPager2に、Fragmentを扱うためのFragmentStateAdapterをセットします。

また、スライドによって表示するフラグメントを変えたいので、
createFragmentにて変更してます。

private inner class PagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
        // ページ数を取得
        override fun getItemCount(): Int = NUM_PAGES

        // スワイプ位置によって表示するFragmentを変更
        override fun createFragment(position: Int): Fragment =
            when(position) {
                0 -> {
                    FirstFragment()
                }
                1 -> {
                    SecondFragment()
                }
                2 -> {
                    ThirdFragment()
                }
                else -> {
                    FirstFragment()
                }
            }
    }

作成したこのPagerAdapterを、Activityにて以下のようにViewPager2にセットします。

// インスタンス化
viewPager2 = findViewById(R.id.pager)
// ページインスタンスを用意
val pagerAdapter = PagerAdapter(this)
// セット
viewPager2.adapter = pagerAdapter

この状態でビルドするとこんな感じの動きになります。

シュシュっと横画面遷移できていることが確認できます！簡単です！

ちなみに、ViewPager2を使用せず、FragmentTransactionによってFragmentの張り替えを行い、FirstFragmentからThirdFragmentに遷移した場合はこんな感じです

下のボタンをクリックすると遷移するようにしています。

アニメーションも何もつけてないので、簡素な移動となっています。

アニメーション

ViewPager2を使用することで、デフォルトで画面スライドのアニメーションがついています。

ですので、自分でアニメーションを作成する必要はありません。好みの動きをつけたい場合は必要に応じて自分でアニメーションを設定することができます。

その他

また、ViewPager2ウィジェットのパラメータに、

<androidx.viewpager2.widget.ViewPager2
   .....
   .....
   android:orientation="vertical" />

を設定してあげると、
縦方向のスワイプの動きになります。
何も設定しなければデフォルトで横向きのhorizontalになります。今回は何も設定していないので横向きになっています。

ページによってはスワイプ させたくない場合もあるかと思いますが、その場合は、

isUserInputEnabled

で設定することができます。

viewPager2.isUserInputEnabled = false

この設定で、スワイプ しても画面は反応しなくなります。

まとめ・感想

ViewPager2の使い方を紹介させていただきました。

ViewPagerにAdapterを設定するだけでアニメーション付きの動きが実現できるのは大変便利だと感じました。

また今回のようなものであれば実装は簡単なので、使えそうな機会があれば積極的に検討してみたいと思います。

タブがあるような画面と組み合わせることによって、よりユーザーが直感的にわかりやすいレイアウトが実現できそうです。

おまけ

そのままでもスワイプ 処理に問題はないのですが、アニメーションも変更できます。公式ドキュメントのアニメーションを実装すると、以下のようなアニメーションになります。カスタム次第で面白い遷移が実装できそうですね！興味がある人はぜひ作成してみてください。

株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています！
ウイングドアの仲間達となら楽しく仕事できるかも？と興味をもった方、
お気軽にお問い合わせ下さい！