ImageSlider

實作過程

ImageData

這次我們試著使用 Kotlin 的 object class 來管理我們的 ImageData 。
我們可以透過 New -> Kotlin File/Class 然後在 Kind 裡選擇 object 。

object ImageData {
    val cityImage = mutableListOf(R.drawable.image_1, R.drawable.image_2, R.drawable.image_3, R.drawable.image_4, R.drawable.image_5, R.drawable.image_6)
}

PagerAdapter

我們要建立一個 Adapter 的 class 。

ImagePagerAdapter.kt

class ImagePageAdapter(val context: Context, val image: MutableList<Int>): PagerAdapter() {

    override fun isViewFromObject(view: View, `object`: Any): Boolean {

        return view == `object`

    }

    override fun getCount(): Int {
        return image.size
    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {

        val layout = LayoutInflater.from(context).inflate(R.layout.view_pager_item, container, false)
        val imageView = layout.findViewById<ImageView>(R.id.itemIv)
        imageView.setImageResource(image[position])
        container.addView(layout)
        return layout

    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)
    }
}

從上面我們可以看到我們需要 override 四個 function 。

• isViewFromObject
  判斷當前 View 跟 Object 是否相同
• getCount
  判斷需要顯示的資料有多長
• instantiateItem
  將資料來源與 ImageView 結合，並將 ImageView 放入 ViewPager 裡。
• destoryItme
  ViewPager 只會暫存三份 View (包含當前) 多餘的便會使用這個 function 。

判斷頁數

接著我們回到 MainActivity。
我們希望使用者翻頁時可以顯示頁數，這個功能我們能透過 OnPageChangeListener 來實現。

private fun changeNumber() {
        main_view_pager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {

            override fun onPageScrollStateChanged(p0: Int) {}

            override fun onPageScrolled(position: Int, p1: Float, p2: Int) {
                val nowPosition = position + 1
                val size = cities.size
                mainTv.text = "$nowPosition  /  $size"
            }
            override fun onPageSelected(position: Int) {}
        })
    }

這裡我們主要用到的是 onPageScrolled 裡所提供的 position 來做
裡面所提供的 position 第一個項目是由 0 開始，所以我們需要先把 position +1 才能得到正確的頁數。

參考文件

PagerAdapter

今天就先這樣，我們明天見囉~~