- タブ付きのスライドできる画面を作りたい!
【Android】画面をスライドさせる 【ViewPagerを使う】で作成したViewPagerを元に作成します。
ソースコードはGitにあげています。
ソースコードはこちら。
https://github.com/satoNobu/study_android/tree/PageView_AddTab
(*以下の解説で記載してあるファイル名はこのソースコードを元に記載してます)
完成すると以下の動画のようになります。(あ、、、夜中の2時に活動してるのがバレる。。)
ライブラリを追加
前回の使っていたViewPagerではなく、AndroidXのViewPagerを使う必要があるため、ライブラリを追加します。
app>build.gradleファイルに以下コードを追加します。
(プロジェクト直下のbuild.gradleファイルじゃないので注意してください。)
implementation 'com.google.android.material:material:1.3.0'
AndroidXを使えるようにする
*既にAndroidXを使ってる人は読み飛ばしてOKです
さて、、、本来であれば上のライブラリ追加だけで簡単に行けるのですが、、、
自分がコレ作ったときの環境が悪かったですね。。。
androidXを最初から使っていれば問題なかったのですが、もう古くなっててきてるandroid.supportライブラリをを使ってたためエラーがズギャンズギャン出てしまいました。
以下解決方法です。
gradle.propertiesファイルに以下追加する。
コレは大したことではないです。2行追加するだけでOK。
android.useAndroidX=true
android.enableJetifier=true
android.supportライブラリを使っているところを全てandroidXに置き換える
コレが大変。。。現時点で至る所が真っ赤に染め上がってるはずです。
コレを置き換えていきます。基本、赤くなっている箇所を右クリック>importで解決できるはず。
importすると以下の画面のようになるはず。
薄灰色のカーソル当たってる部分は、使わなくなったので削除で。
コレを、、、、全部の画面でチェックorz
全て完了すると今時点でビルド可能なはず。一度ビルドして動作確認しておきましょうー
ViewPagerレイアウトの差し替え
やっとここから本番。。
まず、androidXのViewPagerに差し替えが必要です。
ViewPagerを使っていたところを差し替えます。
<?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
になっているのがポイントです。
タブレイアウトを追加する
次に、同じファイルに対して、タブレイアウトを追加します。
<?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のメソッドをオーバーライドさせてあげるだけ
override fun getPageTitle(position: Int): CharSequence {
return "たぶ:" + (position + 1)
}
タブレイアウトとViewPagerをリンクさせる
最後!タブレイアウトとViewPagerをリンクさせてあげれば完成です。
記載箇所は、onCreateメソッドの中。Gitでソースコードを見てもらえれば一発でわかると思います。
val tabLayout: TabLayout = findViewById(R.id.tab_layout)
tabLayout.setupWithViewPager(mPager)
mPagerは、ViewPagerと関連づけている変数です。
ViewPagerなどについては、
【Android】画面をスライドさせる 【ViewPagerを使う】
でも説明してますのでこちらも参考にしてみてください。
まとめ
- ViewPagerレイアウトの置き換えが必要
- ViewPagerレイアウトの下にタブレイアウトを追加
- タブのタイトルを設定
- ViewPagerとタブレイアウトをリンクさせる
- ・・・supportライブラリを使ってたら、AndroidXとの依存関係解決がめんどい
以上になります!
タブ付きで画面スライドさせる方法自体は簡単にできます!ぜひ試してみてくださいー
(依存関係さえなければ。。。。)
あれ、、、そういえばこれって上タブだけど、下タブでも出来るのかな。。。
また時間あるときにでも調べてみまっす!