昨天設定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)