iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0
Software Development

Kotlin 30 天,通過每天一個小 demo 學習 Android 開發系列 第 28

Kotlin 開發第 28 天 Parks ( ViewPager + TabLayout )

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

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

Components

  • TabLayout
  • ViewPager
  • FragmentPagerAdapter

Parks

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

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

https://ithelp.ithome.com.tw/upload/images/20171231/20107329TI91pjK1wG.png


TabLayout

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

https://ithelp.ithome.com.tw/upload/images/20171231/20107329391SlwBzWh.png

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 當中,例如:
https://ithelp.ithome.com.tw/upload/images/20171231/20107329yFNBZnvxtm.png

private lateinit var parks:ArrayList<Fragment>

parks.add(Park1Fragment())

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

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

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


參考


上一篇
Kotlin 開發第 27 天 ShakeShake ( SensorManager )
下一篇
Kotlin 開發第 29 天 ShowView ( PopupWindow + FloatingActionButton )
系列文
Kotlin 30 天,通過每天一個小 demo 學習 Android 開發30

尚未有邦友留言

立即登入留言