【Android/Kotlin】最速でスワイプしてタブを切り替え(ViewPager)を理解する方法

今回は、横スクロールをしてタブを切り替える画面の作り方を説明していきます!

作るものはアプリを使っているとよく出てくる画面ですね。メルカリとかLineliveとかでも使われています。

  

などですね。おそらく、使ったことがない人はいないでしょう。

複雑にすると理解することが多くなるので、余計なものを削ぎ落とし、スクロールさせて画面を切り替えることのみを説明していきます。

作るアプリ

    

ざっとですがアプリの仕様はこちら

  • アプリを起動したら3つのタブに分かれている画面を表示
  • 横スクロール、スワイプすることで、タブが切り替わります。
  • それだけだと味気ないので、切替時にステータスバー、アクションバー、タブの色を変更します。
  • 各タブの画面はFragmentにて実装します。今回の作りは1つのFragmentでも対応できますが、複数のFragmentでの対応が主になると思うので、Fragmentは3つ作ります。

Layoutファイルの定義

まずは画面のレイアウト定義です

activity_main.xml

android.support.design.widget.TabLayout がタブのレイアウトを行うViewで、

android.support.v4.view.ViewPager がタブの切替を制御するViewになります。

Fragment_tab1.xml

タブの切り替え後に表示される画面です。

TAB2、3はTextViewのtextが違うのみです。

android:text=”TAB2です” / android:text=”TAB3です”

こちらを参考にfragment_tab2.xmlとfragment_tab3.xmlを作成してください

登場人物の整理

登場人物ってわけじゃないですが、登場するものの概要です。

Fragment

タブ毎の画面はFragmentにて表示を行います。必要なタブ分のFragmentを作成する必要があります。

ViewPager

スワイプをしてタブの横スクロールを制御します。android-support-v4されているものです。

FragmentPagerAdapter

ViewPagerに渡すAdapterになります。スクロールを制御するViewPagerはFragmentPagerAdapterにあるFragmentの情報を使って各タブの表示を行います。

実装

では、早速作ってみましょう!

Tab1Fragment

特段難しいことはしていません。タブごとに文字を表示しているのみです。

こちらを参考にTab2FragmentとTab3Fragmentを作成してください。

TabsPagerAdapter

FragmentPagerAdapterを継承する必要があります。

タブ(Fragment)情報をプロパティに保持

PagerAdapterを生成時にタブ毎のFragmentを渡してもらい、それをプロパティに保持します。

1つであれば固定でも対応できますが、複数のタブを持ち、それぞれ違うFragmentを使う際は、必要な対応です。

getItem

fragmentの切り替えを行います。渡されたPositionのFragmentを作成します。

getCount

タブの最大値を設定します。保持しているリストのサイズを戻します。

MainActivity

少し補足していきます。

複数のFragmentを使うため、それぞれのFragmetの情報をリストに格納

ここで入れた順番でタブが、左から表示されます。

Adapterの生成

先程作成したリスト(Fragment)も引数として渡します。

ViewPagerにAdapterの設定

リスナの登録

リスナとしては、

  • onPageScrollStateChanged:スクロールされたときに呼び出される
  • onPageScrolled:スクロール中(特定の位置などに達した場合など)に呼び出される
  • onPageSelected:ページが切り替わり終わったときに呼び出される

があります。今回は、素直に終わった時とするため、onPageSelectedで処理を行います。

ステータスバーなどの色の変更

補足ですが、色を変更する処理はこちらです。

はい。以上でタブの切替が実装できました。

チューニングすべきこともたくさんありますが、こちらの実装でスワイプにてタブ切替ができるようになります!