ViewPager2 with TabLayout

Created at Fri, May 17, 2019

Material ComponentsでViewPager2 + TabLayoutのコードが入ったのでそれの紹介。まだalphaへのリリースもされていないので、APIは大きく変わるかもしれません。おそらく1.1.0-alpha07に入ってくると思います。

TabLayoutはViewPagerでサポートされていましたが、それがViewPager2にも来たって感じです。

使い方

新しく追加されたTabLayoutMediatorを使います。

まず、TabLayoutMediatorインスタンスを生成します。

val viewPager: ViewPager2 = findViewById(R.id.viewpager)
val tabLayout: TabLayout = findViewById(R.id.tab)
val mediator = TabLayoutMediator(tabLayout, viewPager) { tab: TabLayout.Tab, position: Int ->
  tab.text = "test $position" // タブにタイトルをセット
}

コンストラクタには、TabLayout、ViewPager2、OnConfigureTabCallbackを渡します。 OnConfigureTabCallbackは、tabとpositionを受け取り、tabに対して、タイトルをセットします。 ViewPagerのPageAdapterとは違い、RecyclerViewのAdapterからはタイトルを取得できないので、このような変更になったと思われます。

最後にattach関数を呼び出します。

mediator.attach()

これで、ViewPager2 + TabLayoutを実現できます。とても簡単！！

まとめ

Written by