Fragment
裡面,上部分是 ViewPager
,畫面下面的部分是 buttom navigation
,透過點擊畫面下面的 buttom ,來對上面的 ViewPager
做切換,或是滑動上面的 ViewPager
,也跟著切換畫面下面的 bottom focus。設定畫面下面的 buttom navigation
的監聽
private val onNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
when (item.itemId) {
R.id.navigation_home -> {
viewPager.setCurrentItem(0, true)
return@OnNavigationItemSelectedListener true
}
R.id.navigation_dashboard -> {
viewPager.setCurrentItem(1, true)
return@OnNavigationItemSelectedListener true
}
R.id.navigation_notifications -> {
viewPager.setCurrentItem(2, true)
return@OnNavigationItemSelectedListener true
}
}
false
}
這樣在按下畫面下面的 navigation button
的時候,會去把 viewPager
選到特定的頁面
在 viewpager 的 adapter 設定該回傳的 fragment
接續上述的功能,要實作出 viewPager
這個完整的功能,需要一個 BaseAdapter
。這個 Adapter
簡單來講,就是一個把程式裡面的資料,跟外面的 viewPager
前端的樣式做綁定的地方。ViewPager
必須要知道一共有幾頁要呈現 (getCount()
),以及怎麼呈現 (getItem
) 。這個專案是希望按下畫面下面的 Navigation button
之後,ViewPager
去做更換,而上面已經處理了按下 button
之後,會跟 ViewPager
說,現在請顯示出第某某張 page,而 ViewPager
收到目前應該顯示的 position,就會進入以下的程式碼。
下面程式碼,ViewPager
會得到一個 Fragment
,並把它顯示在螢幕上面
override fun getItem(position: Int): Fragment {
Log.d("", "in newInstance")
when(position){
0->return pageFragment.newInstance(movies[position])
1->return pageFragment.newInstance(movies[position])
2->return pageFragment.newInstance(movies[position])
else->return pageFragment.newInstance(movies[position])
}
}
Pager 該呈現哪些東西 (fragment)
這邊的 demo 很簡單,就是呈現電影的名稱(TextView
)而已。這些電影名稱是放在一個 ArrayList<datas>
,其中的 datas
是 data-class
的型別,簡單來講就是一個可以自定義的型別(很像 C++
裡面的 Struct
)。
整個流程是這樣,我先有一個充滿三筆 String
的 ArrayList
,這個 ArrayList
會被放入 Adapter
,去做資料綁定的動作(ArrayList
裡面的東西綁到特定 TextView
上面),綁的動作就是把資料,透過 fragment
的 newInstance
去回傳一個綁好的 fragment
class pageFragment : Fragment() {
companion object {
fun newInstance(message: datas): pageFragment {
val f = pageFragment()
f.fragTitle = message.titleText
val bdl = Bundle()
bdl.putParcelable(f.FRAG_DATAS, message)
f.arguments = bdl
return f
}
}