iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

學習 Android Kotlin 隨筆系列 第 10

[ Day 10 ] 是 View Pager 啊 (一)左滑滑,右滑滑

  • 分享至 

  • xImage
  •  

| ViewPager

  • 左翻翻,右翻翻

  • InterceptTouchEvent,父母管得多?在 android 世界也是這樣

| 前言概念

  • 在這個 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>,其中的 datasdata-class 的型別,簡單來講就是一個可以自定義的型別(很像 C++ 裡面的 Struct)。

    整個流程是這樣,我先有一個充滿三筆 StringArrayList,這個 ArrayList 會被放入 Adapter,去做資料綁定的動作(ArrayList 裡面的東西綁到特定 TextView 上面),綁的動作就是把資料,透過 fragmentnewInstance 去回傳一個綁好的 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
            }
        }
    

上一篇
[ Day 9 ] 探討 Fragment 從年少輕狂,到老年退休生活!(四)樸實無華但有質感,開場動畫
下一篇
[ Day 11 ] 是 View Pager 啊 (二)InterceptTouchEvent ,父母管得多?
系列文
學習 Android Kotlin 隨筆30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言