【Android】Kotlinでアプリ画面にタブを作ろう！TabLayoutとViewPager2を使って横スワイプ可能なタブの実装を徹底解説

implementation 'com.google.android.material:material:1.9.0'
implementation 'androidx.viewpager2:viewpager2:1.0.0'

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- ポイント① TabLayout (タブ表示部分) -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill" />

    <!-- ポイント② ViewPager2 (スワイプで切り替える部分) -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textTab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="タブ1の画面"
        android:textSize="24sp"
        android:textColor="#000000"
        android:textStyle="bold" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textTab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="タブ1の画面"
        android:textSize="24sp"
        android:textColor="#000000"
        android:textStyle="bold" />
</LinearLayout>

class Tab1Fragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val view = inflater.inflate(R.layout.fragment_tab1, container, false)
        return view
    }
}

class Tab2Fragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val view = inflater.inflate(R.layout.fragment_tab2, container, false)
        return view
    }
}

class TabsPagerAdapter(activity: FragmentActivity) : FragmentStateAdapter(activity) {
    override fun getItemCount(): Int = 2 // タブの数

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> Tab1Fragment()
            1 -> Tab2Fragment()
            else -> throw IllegalArgumentException("エラー")
        }
    }
}

class MainActivity : AppCompatActivity() {
    // ポイント①
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // ポイント②
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // ポイント③ 
        val adapter = TabsPagerAdapter(this)
        binding.viewPager.adapter = adapter

        // ポイント④
        TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
            tab.text = when (position) {
                0 -> "Tab 1" // 最初のタブ
                1 -> "Tab 2" // 2番目のタブ
                else -> null
            }
        }.attach()
    }
}