做一個導航欄和底部內容連動的功能。
- 導航欄可以滑動
- 導航欄和底部的動畫聯動(即不論滑動導航欄還是底部內容,另一個對象都會同步滑動)
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
你最後的問題,應該看看是不是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
感謝分享 👍
求这个编辑器的配色