by
做一個導航欄和底部內容連動的功能。
- 導航欄可以滑動
- 導航欄和底部的動畫聯動（即不論滑動導航欄還是底部內容，另一個對象都會同步滑動）
Components
- TabLayout
- ViewPager
- FragmentPagerAdapter
Parks
MainActivity 中包含上半部的 TabLayout 以及下半部的 ViewPager.
其中 ViewPager 是為了能夠讓下半部滑動，而其中的內容是對應的 Fragment.
TabLayout
默認的 TabLayout 的 tabMode 是 fixed（左圖）如果 tab 很多就會擠在一起，
可以改成 app:tabMode = “scrollable” （右圖）
ParksAdapter
建立 ParksAdapter 繼承於 FragmentPagerAdapter.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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 有切換或者在滑動的過程中，都能夠同步做移動。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 當中，例如：
|
1 2 3 |
private lateinit var parks:ArrayList<Fragment> parks.add(Park1Fragment()) |
這不像 Swift 如果都是繼承於 UIViewController，便可以都放入同一個 Array 中。
|
1 2 |
var viewControllers:[UIViewController] = [Park1ViewController(), Park2ViewController()] viewControllers.count |
但其實翻了不少 Github 上的 Source Code 看上去 Java 也一樣能這樣做，不知道在語法上我是寫錯了哪裡。
參考
- 官方文件 – TabLayout
- 官方文件 – ViewPager
- 可以到 Github 上看對應的 Source Code