iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
0
自我挑戰組

Kotlin Everyday:新手寫程式踩的坑系列 第 9

Day 9 ─用Kotlin RecycleView做一個ImageList (下)

  • 分享至 

  • xImage
  •  

昨天提到 RecyclerView.Adapter() 有幾個待執行的方法,分別是:

  • onCreateViewHolder(ViewGroup, int)
    創造一個新的 RecyclerView.ViewHolder,並初始化 RecyclerView 畫面佈局
  • getItemCount()
    取得Adpater持有的資料數量
  • onBindViewHolder(ViewHolder, int)
    更新 RecyclerView.ViewHolder 內容

在這些之前我們要先對 ViewHolder 做些處理, ViewHolder 是Adapter裡面很重要的零件,當 ListView 裡面有大量的資料需要載入的時候,會大大影響性能,所以我們需要以填充方式重複使用這些view。
還記得每筆資料是一張圖和一串字嗎?將 ViewHolder 參數命名成「itemView」繼承View,itemView.image 代表將xml裡的image_demo指給itemView、作為資料圖片的顯示畫面,如下圖宣告一個text,將文字的顯示畫面text_demo指給它:

inner class ViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView) {
    val image = itemView.image  
    val text = itemView.text

接著,我們要讓程式碼知道這些畫面是要顯示什麼資料的,設一個名為Bind的函式,把List.kt檔裡的資料型態用參數傳進來:

設定讓image和text會分別取得該筆資料裡的圖片和文字就可以囉

inner class ViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView) {
    val image = itemView.img_demo
    val text = itemView.text_demo

    fun Bind(item: item){
        image.setImageResource(item.image) //(item資料庫裡面的image們)
        text.setText(item.text)            //(item資料庫裡面的text們)
    }
}

現在事情看起來做得差不多了,有把xml畫面連結到Adapter裡、也有寫要讓畫面元件知道要顯示什麼型態的資料,但是,這些都沒有被override,它們還沒被放進真正要執行的方法裡面,所以最後一步就是把執行那三個方法:

  1. onCreateViewHolder(parent: ViewGroup, viewType: Int)
    第一個要執行的方法就是創建新的 RecyclerView.ViewHolder,加載它的畫面佈局,會去建立每一個 item ,把範例layout放進去畫面並回傳view
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val inflater = LayoutInflater.from(parent.context)
    val view = inflater.inflate(R.layout.activity_my_adapter, parent, false)
    return ViewHolder(view)
}

可以想像畫面現在看起來就是這個樣子

  1. getItemCount()
    告訴程式你總共會生成幾筆資料在RecycleView裡面,這時候就要取資料庫itemList的數量
override fun getItemCount(): Int = itemList.count()  //itemList
  1. onBindViewHolder(holder: ViewHolder, position: Int)
    Adapter最重要的一步,讓資料們裝進去畫面吧!
    還記得我們剛剛已經寫好一個Bind函式嗎?讓程式知道每一筆資料(有image和text兩種資料型態)要對應的畫面元件,這時候就應用這個函式,並把itemList的資料傳進來,會按照Bind的辦法來顯示。
    position 這個參數代表的目前的 item畫面(就是紅方塊和藍方塊) 所在的位置,讓itemList裡面的資料按照位置排列。
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.Bind(itemList[position])
}

寫到這裡,總算是把Adapter做好了,這時候只要去MainActivity裡面把RecycleView呈現出來就完成基本的ImageList囉!讓RecycleView呈現出來,基本要做的兩件事情:

  • LayoutManager 指給RecycleView以實現滾動列表,為Item的佈局管理工具,控制Item的位置、顯示、大小、滾動等等。這邊使用最基本的構造呈現:
  • Adapter 提供數據和畫面綁定的工具
val Adapter = MyAdapter()
recycleView1.layoutManager = LinearLayoutManager(this: Context)
recycleView1.adapter = Adapter

上一篇
Day 8 ─用Kotlin RecycleView做一個ImageList (上)
下一篇
Day 10 ─用Kotlin RecycleView切換佈局 (上) getItemViewType
系列文
Kotlin Everyday:新手寫程式踩的坑30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言