【Android】タブ付きのスライド画面を作る【ViewPager使用】

タブ付きのスライドできる画面を作りたい！

【Android】画面をスライドさせる【ViewPagerを使う】で作成したViewPagerを元に作成します。

ソースコードはGitにあげています。
ソースコードはこちら。
https://github.com/satoNobu/study_android/tree/PageView_AddTab
（＊以下の解説で記載してあるファイル名はこのソースコードを元に記載してます）

完成すると以下の動画のようになります。（あ、、、夜中の2時に活動してるのがバレる。。）

ライブラリを追加

前回の使っていたViewPagerではなく、AndroidXのViewPagerを使う必要があるため、ライブラリを追加します。

app>build.gradleファイルに以下コードを追加します。
（プロジェクト直下のbuild.gradleファイルじゃないので注意してください。）

build.gradle

implementation 'com.google.android.material:material:1.3.0'

AndroidXを使えるようにする
＊既にAndroidXを使ってる人は読み飛ばしてOKです

さて、、、本来であれば上のライブラリ追加だけで簡単に行けるのですが、、、

自分がコレ作ったときの環境が悪かったですね。。。

androidXを最初から使っていれば問題なかったのですが、もう古くなっててきてるandroid.supportライブラリをを使ってたためエラーがズギャンズギャン出てしまいました。

以下解決方法です。

gradle.propertiesファイルに以下追加する。

コレは大したことではないです。2行追加するだけでOK。

gradle.properties

android.useAndroidX=true
android.enableJetifier=true

android.supportライブラリを使っているところを全てandroidXに置き換える

コレが大変。。。現時点で至る所が真っ赤に染め上がってるはずです。

コレを置き換えていきます。基本、赤くなっている箇所を右クリック＞importで解決できるはず。

importすると以下の画面のようになるはず。
薄灰色のカーソル当たってる部分は、使わなくなったので削除で。

コレを、、、、全部の画面でチェックorz

全て完了すると今時点でビルド可能なはず。一度ビルドして動作確認しておきましょうー

ViewPagerレイアウトの差し替え

やっとここから本番。。

まず、androidXのViewPagerに差し替えが必要です。

ViewPagerを使っていたところを差し替えます。

activity_screen_slide.xml

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

</androidx.viewpager.widget.ViewPager>

android.support.v4.view.ViewPager
となっていた箇所が、
androidx.viewpager.widget.ViewPager
になっているのがポイントです。

タブレイアウトを追加する

次に、同じファイルに対して、タブレイアウトを追加します。

activity_screen_slide.xml

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

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</androidx.viewpager.widget.ViewPager>

タブに表示するタイトルを設定する

今度は、タブのタイトルを設定します。

やることは単純で、FragmentStatePagerAdapterのメソッドをオーバーライドさせてあげるだけ

ScreenSlidePagerAdapter

    override fun getPageTitle(position: Int): CharSequence {
        return "たぶ：" + (position + 1)
    }

タブレイアウトとViewPagerをリンクさせる

最後！タブレイアウトとViewPagerをリンクさせてあげれば完成です。
記載箇所は、onCreateメソッドの中。Gitでソースコードを見てもらえれば一発でわかると思います。

ScreenSlidePagerActivity

        val tabLayout: TabLayout = findViewById(R.id.tab_layout)
        tabLayout.setupWithViewPager(mPager)

mPagerは、ViewPagerと関連づけている変数です。

ViewPagerなどについては、

【Android】画面をスライドさせる【ViewPagerを使う】

でも説明してますのでこちらも参考にしてみてください。

まとめ

ViewPagerレイアウトの置き換えが必要
ViewPagerレイアウトの下にタブレイアウトを追加
タブのタイトルを設定
ViewPagerとタブレイアウトをリンクさせる
・・・supportライブラリを使ってたら、AndroidXとの依存関係解決がめんどい

以上になります！
タブ付きで画面スライドさせる方法自体は簡単にできます！ぜひ試してみてくださいー
（依存関係さえなければ。。。。）

あれ、、、そういえばこれって上タブだけど、下タブでも出来るのかな。。。
また時間あるときにでも調べてみまっす！