[Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成

ViewPager2で複数のFragment画面をスワイプで次々とスライドショーのように表示できますが、Tabを画面上につけて、タブをタップすることで目的のページに跳ぶようにすることもできます

1x1.trans - [Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成


Android Studio
2021.2.1




TabLayout

 
こちらで使ったViewPager2にTabを付けてみたいと思います
 

as2021 vpager 00b 100x100 - [Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成
フォトやGalleryのアプリなどは写真をスワイプで次々と遷移をさせていますが、これはViewPager2を利用すると可能です

 
以下のようにスワイプでページが変わりTabでどのページかわかるようにできます

また、この例ではインジケータがTabの下にあり分かりにくいためTabの背景とテキスト色をかえたり、インジケータをカスタマイズしてみます

1x1.trans - [Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成 1x1.trans - [Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成 1x1.trans - [Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成

 

 

TabLayout を使用してタブを追加

 
<TabLayout>要素を <ViewPager2>要素の上に追加

TabLayoutMediator を作成し TabLayout を ViewPager2 にリンクしアタッチ

viewpager2のライブラリをbuild.gradleに追加しておきます

 

サンプルコード

 
まとめてみると
MainActivity.java

ScreenSlidePageFragment.java

activity_Screen_slide.xml

fragment_screen_slide_page.xml

strings.xml

build.gradle

 

Tabの背景とテキスト色を変更

 
Tabを付けたのですが、どこを選択しているのが分かりにくいため、
選択中のタブの背景とテキスト色を変えて分かりやすくしてみましょう

Tabが選択しているケースでの背景を設定するtab_selector.xmlを作成
選択しているときのテキスト色を白にその他は黒に設定

activity_Screen_slide.xml

\res\drawable 以下に配置
tab_selector.xml

デフォルトではTabの下線が入るだけなので見にくかったのですが、背景色が変わるとそれなりに目立つようにできました

1x1.trans - [Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成

 

Indicatorの変更

 
前のselectorを使う方法は、shapeと組み合わせてカスタマイズを発展させられますが
もっと簡単なものでよければ Indicatorを変更することでも可能です

例えばTabの背景色が濃いですが
app:tabIndicatorGravity=”stretch”
app:tabSelectedTextColor=”@color/white
を追加すると選択しているTabが分かりやすくなります

1x1.trans - [Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成

また、Indicatorの色と選択されたテキスト色を変えるとそれなりになります
app:tabIndicatorColor=”#ff0000″
app:tabSelectedTextColor=”#ff0000″

1x1.trans - [Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成

 
 
 

References:
ViewPager2 を使用してタブ付きスワイプビューを作成する
ViewPager2 を使用してフラグメント間をスライドする
ViewPager2







アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

TECH ACADEMY
オンライン説明会


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする