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

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

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"

        }
    }

}

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)
}

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())

private lateinit var parks:ArrayList<Fragment>

parks.add(Park1Fragment())

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

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

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

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

參考

官方文件 – TabLayout
官方文件 – ViewPager
可以到 Github 上看對應的 Source Code

2 thoughts on “Kotlin 開發第 28 天 Parks ( ViewPager + TabLayout )”

y3k 說：

二月 20, 2019 at 1:30 下午

你最後的問題，應該看看是不是import到不同的Fragment
Android上有兩個Fragment class

https://developer.android.com/reference/android/support/v4/app/Fragment
https://developer.android.com/reference/android/app/Fragment

兩個都叫Fragment；

V4那個Fragment是獨立於Android框架，讓Android 1.6~2.3的裝置也能使用到Fragment功能的官方外掛包(Support Library)功能；不過後來因為大家都不用3.0之後的那個原生Fragment而用這個外掛包，久了就喧賓奪主成了較常用的Fragment….

這算是新接觸Android容易踩的坑之一，import的package記得要核對XD

回覆
1. don 說：
  
  二月 20, 2019 at 2:16 下午
  
  感謝分享 👍
  
  回覆