Android 實現 Tab 滑動切換效果：棄用 TabHost 改用 ViewPager

問題背景

需實現帶滑動動畫的分頁切換，包含標籤欄與內容頁同步滑動。傳統 TabHost 不支援滑動手勢。

推薦方案：ViewPager + TabLayout

現代 Android 開發使用 ViewPager（或 ViewPager2）搭配 TabLayout 實現：

• 支援左右滑動切換 Fragment。
• 標籤欄自動聯動，可設定固定/滾動模式。
• 基於 Fragment 架構，生命週期管理完善。

實作步驟

1. 添加依賴：implementation "androidx.viewpager2:viewpager2:1.0.0" 及 com.google.android.material:material。
2. 布局中放置 TabLayout 與 ViewPager2。
3. 實作 FragmentStateAdapter 提供各分頁 Fragment。
4. TabLayoutMediator 綁定 TabLayout 與 ViewPager2。

程式碼片段

// Adapter
class MyAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {
    override fun getItemCount() = 3
    override fun createFragment(position: Int) = when(position) {
        0 -> HomeFragment()
        1 -> DiscoverFragment()
        else -> ProfileFragment()
    }
}

// Activity/Fragment 中綁定
val pager = findViewById<ViewPager2>(R.id.pager)
pager.adapter = MyAdapter(this)
TabLayoutMediator(tabLayout, pager) { tab, position ->
    tab.text = arrayOf("首頁", "發現", "我的")[position]
}.attach()

遷移建議

若專案仍在用 TabHost，建議逐步遷移至 ViewPager2 + TabLayout，獲得更流暢體驗與 Material Design 風格。