昨天設定Adapter之後，只完成資料長相和畫面元件綁定，還沒有真正放入我們的 imageList，所以今天的工作就是把 imageList 做完，並且將 Adapter 指給 ViewPager 來顯示！

步驟一：完成list

宣告一個list，資料型態為Int

val list = mutableListOf<Int>()

之前 RecycleView 作法是寫一個 list.kt，以 data class 來管理資料型態，這次練習用新的方法將資料放到list---使用Resources.getIdentifier：

getIdentifier函數
遇到需要批量讀取 drawable 資源、xml 控制元件時，可以採用 android.content.res.Resources 來實現，在 Resources 類別有一 getIdentifier 函數，它可以返回一個 Resources物件、返回任何資源id，只要指定三個參數：

resources.getIdentifier(字段名稱, "類別名稱", 包名)

• 字段名稱：資源id的名字
• 類別名稱：資源id所屬的類別，比如drawable、string、layout等固定的類別，下面還會定義更多資源id
• 包名

關於 getIdentifier 的用法，想了解更多可以參考批量操作资源或控件 - 使用Resources.getIdentifier获取id。

定義list及圖片資料
了解 getIdentifier 用法之後，就要來實作 list，把抓取的貓咪圖片全部放到 res/drawable 下面，並且讓它們命名一致，這樣等下可以用 for 迴圈跑

宣告list，底下先寫一個 function 讓資料會加到這個 list 裡面，運用到 android.resource 的函數 getIdentifier()：

val list = mutableListOf<Int>()
...
...
fun addToList(){
    for(i in 1..7)
       val name_id = "$cat_i"
       val id = resource.getIdentifier(name_id, "drawable", packageName)
       list.add(id)
    }
}

步驟二：完成ViewPager

接下來只需要把 Adapter 指給 ViewPager，還記得我們在Adapter有定義兩個參數嗎？第二個參數就是要填我們剛剛設好的list：

val list = mutableListOf<Int>()

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    addToList()   //把圖片傳進list
    viewPager.adapter = Adapter(this, list)   //Adapter需要填兩個函數  
                                              //Adapter(Context, List<Int>)
}

這個時候就完成 ViewPager 滑頁效果啦！是不是很可愛呢？
但...看起來有點奇怪，好像哪裡不太對勁！！為什麼數字沒有跟著跑呢？要怎麼設定啊@@

步驟三：設定ViewPager頁面切換的監聽器

OnPageChangeListener

val mlistener = object : ViewPager.OnPageChangeListener{ }

如果想要在 ViewPager 頁面切換時做點事情，要使用 OnPageChangeListener，用來監聽 ViewPager 頁面切換的監聽器，此 interface 有三個 function 可以實作：

val mlistener = object: ViewPager.OnPageChangeListener{
    override fun onPageScrollStateChanged(position: Int) {  
    //頁面滑動狀態改變時
    }
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
    //頁面滾動時觸發
    }
    override fun onPageSelected(position: Int) {
    //當新的頁面被選擇時
    }
}

讓 textView 顯示當前頁面的 code：

val page_position = position + 1  //position是從0開始
txtView.setText = "$page_position / ${list.size}"

一開始我是把這段 code 寫在 onPageSelected 方法裡頭，結果發現開啟時第一張圖的文字不會顯示出來，要滑動下頁返回時才會正常，參考這篇 Viewpager 滑动事件讲解才知道原因，position雖然指當前頁面位置，但 onPageSelected 是"頁面跳轉完"才會調用，寫在 onPageScrolled 就沒有問題：

onPageScrolled
当页面在滑动的时候会调用此方法，在滑动被停止之前，方法會一直得到调用

做好mlistener監聽器之後，再把它丟給viewPager.addOnPageChangeListener就好

addToList()
viewPager.adapter = Adapter(this, list)
viewPager.addOnPageChangeListener(mlistener)