〈kotlin〉スワイプビューを作る② ViewPagerからViewPager2
Android studioでkotlinを使ってAndroidアプリ作成。
画面上部にタブを3つ用意して、
タブを押すかスワイプすることで画面遷移ができるように実装したい。
前回の記事でViewPager2のコードをまとめたが、
最初知らずにViewPagerを使用して作ってしまい、
ViewPagerからViewPager2の書き換えを行なったので変更点もまとめてみる。
参考https://developer.android.com/training/animation/vp2-migration?hl=ja
レイアウトファイルの記述
「ViewPager」から「ViewPager2」に変更する。
TabLayoutと一緒に使っている場合ときは、
ViewPagerでは子要素としてTabLayoutを宣言していたが、
ViewPager2では同じレベルでViewPager2の前にTabLayoutを宣言する。
//変更前 <androidx.viewpager.widget.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" /> </androidx.viewpager.widget.ViewPager> //変更後 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout"/> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/pager" /> </LinearLayout>
アダプタークラス
アダプタークラスを変更、それに伴いオーバーライドが必要なメソッドが変わる。
ViewPager | ViewPager2 | |
---|---|---|
アダプタークラス | FragmentPagerAdapter FragmentStatePagerAdapter |
FragmentStateAdapter |
コンストラクタ パラメータ | FragmentManager | FragmentActivity |
オーバーライドするメソッド | getCount() getItem() |
getItemCount() createFragment() |
// 変更前 class ScreenSlidePagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) { override fun getCount(): Int = NUM_PAGES override fun getItem(position: Int): Fragment = ScreenSlidePageFragment() } //変更後 class ScreenSlidePagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) { override fun getItemCount(): Int = NUM_PAGES override fun createFragment(position: Int): Fragment = ScreenSlidePageFragment() }
TabLayoutとつなぐ
TabLayoutオブジェクトをViewPagerオブジェクトにつなぐために、
ViewPagerではsetupWithViewPagerを使用していたが、
ViewPager2ではTabLayoutMediatorを使用する。
//変更前 class CollectionDemoFragment : Fragment() { ... override fun onViewCreated(view: View, savedInstanceState: Bundle?) { val tabLayout = view.findViewById(R.id.tab_layout) tabLayout.setupWithViewPager(viewPager) } ... } //変更後 class CollectionDemoFragment : Fragment() { ... override fun onViewCreated(view: View, savedInstanceState: Bundle?) { val tabLayout = view.findViewById(R.id.tab_layout) TabLayoutMediator(tabLayout, viewPager) { tab, position -> tab.text = "OBJECT ${(position + 1)}" }.attach() } ... }