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