横スワイプでページ遷移できるタブの実装
実装したモノ
動画
ソースコード
実装方法
使用したライブラリ
- ViewPager2
-> 横スワイプでページ遷移できるようにするライブラリ - TabLayout
-> タブを表示するライブラリ
XML
res/layout/fragment_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
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"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tab_layout" />
</androidx.constraintlayout.widget.ConstraintLayout>
TabLayoutとViewPager2を、記述する。
ソースファイル
TabCollectionAdapter.kt
class TabCollectionAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {
override fun getItemCount(): Int = 4
override fun createFragment(position: Int): Fragment {
return when (position) {
0 -> TabContent1Fragment()
1 -> TabContent2Fragment()
2 -> TabContent3Fragment()
3 -> TabContent4Fragment()
else -> TabContent1Fragment()
}
}
}
FragmentStateAdapterを継承したクラスを定義する。
以下の2関数をオーバーライドする。
- getItemCount
-> タブの数を返す関数 - createFragment
-> タブの位置(引数のposition)によって、表示したいフラグメントを返す関数
MainFragment.kt
class MainFragment : Fragment() {
private lateinit var tabCollectionAdapter: TabCollectionAdapter
private lateinit var viewPager: ViewPager2
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_main, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
tabCollectionAdapter = TabCollectionAdapter(this)
viewPager = view.findViewById(R.id.pager)
viewPager.adapter = tabCollectionAdapter
val tabLayout: TabLayout = view.findViewById(R.id.tab_layout)
tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
TabLayoutMediator(tabLayout, viewPager) { tab, position ->
tab.text = "TAB CONTENT ${(position + 1)}"
}.attach()
}
}
横スワイプでページ遷移できるようにする部分
tabCollectionAdapter = TabCollectionAdapter(this)
viewPager = view.findViewById(R.id.pager)
viewPager.adapter = tabCollectionAdapter
TabCollectionAdapterを生成し、viewPagerのAdapterにセット。
タブを表示する部分
val tabLayout: TabLayout = view.findViewById(R.id.tab_layout)
tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
TabLayoutMediator(tabLayout, viewPager) { tab, position ->
tab.text = "TAB CONTENT ${(position + 1)}"
}.attach()
TabLayoutMediatorによって、タブとスワイプ可能なページを紐づける。
また、tabModeにMODE_SCROLLABLEをセットする事によって、タブ部分をスワイプ可能にする。
