做一個導航欄和底部內容連動的功能。

導航欄可以滑動
導航欄和底部的動畫聯動（即不論滑動導航欄還是底部內容，另一個對象都會同步滑動）

Components

• TabLayout
• ViewPager
• FragmentPagerAdapter

Parks

MainActivity 中包含上半部的 TabLayout 以及下半部的 ViewPager.

其中 ViewPager 是為了能夠讓下半部滑動，而其中的內容是對應的 Fragment.

TabLayout

默認的 TabLayout 的 tabMode 是 fixed（左圖）如果 tab 很多就會擠在一起，
可以改成 app:tabMode = "scrollable" （右圖）

ParksAdapter

建立 ParksAdapter 繼承於 FragmentPagerAdapter.

class ParksAdapter(fragmentManager:FragmentManager): FragmentPagerAdapter(fragmentManager) {
    override fun getItem(position: Int): Fragment {
        when(position){
            0 -> return Park1Fragment()
            1 -> return Park2Fragment()
            2 -> return Park3Fragment()
            3 -> return Park4Fragment()
            4 -> return Park5Fragment()
            else -> return Park6Fragment()
        }
    }

    override fun getCount(): Int {
        return 6
    }

    override fun getPageTitle(position: Int): CharSequence {
        when(position){
            0 -> return "Park 1"
            1 -> return "Park 2"
            2 -> return "Park 3"
            3 -> return "Park 4"
            4 -> return "Park 5"
            else -> return "Park 6"

        }
    }

}

MainActivity

通過 findViewById 引入 viewPager 和 tabLayout.

這裡通過 tabLayout.setupWithViewPager 將 tabLayout 和 viewPager 聯動起來，
當 TabLayout 或者 ViewPager 有切換或者在滑動的過程中，都能夠同步做移動。

private fun setupView() {
    // adapter
    adapter = ParksAdapter(supportFragmentManager)

    // LayoutInflater
    val inflater = getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

    // viewPager
    viewPager = findViewById(R.id.layout_main_viewPager)
    viewPager.adapter = adapter

    // tabLayout
    tabLayout = findViewById(R.id.layout_main_tabLayout)

    // link tabLayout with viewPager
    tabLayout.setupWithViewPager(viewPager)
}

筆記

當我自定義多個繼承於 Fragment 的 Class 時，我發現沒辦法放入同一個 ArrayList 當中，例如：

private lateinit var parks:ArrayList<Fragment>

parks.add(Park1Fragment())

這不像 Swift 如果都是繼承於 UIViewController，便可以都放入同一個 Array 中。

var viewControllers:[UIViewController] = [Park1ViewController(), Park2ViewController()]
viewControllers.count

但其實翻了不少 Github 上的 Source Code 看上去 Java 也一樣能這樣做，不知道在語法上我是寫錯了哪裡。

參考

• 官方文件 - TabLayout
• 官方文件 - ViewPager
• 可以到 Github 上看對應的 Source Code
• 本文同步轉載自 - Kotlin 開發第 28 天 Parks 「 ViewPager + TabLayout 」