iOS 工程師的 Android 筆記:使用 Kotlin 實作 Recycler View

BoShi Lee 
6 min readDec 28, 2017

因為我是從 iOS 開發者學過來的,在學習 recycler view 的時候,發現這邊的資訊量一下子太多,把所有的重點都整理起來,稍微跟 iOS 比較一下,並做個筆記提醒自己:

要使用 Recycler View 要在 Gradle dependencies 裡加上 supporting library,

記得按下 sync 同步

在 activity_main.xml 加上這段,可以自己拉,也可以直接貼上,基本上就是把 recycle view 拉滿

並建立一個 layout resource file 建立 item 的樣式並命名為weatherforcast_list_item.xml , 此篇不會說明 layout 的部分,複製覆蓋過去即可。

建立天氣 Model class 並命名為 Weather, 包含日期,高溫,低溫,濕度,和天氣註解

建立一個新的 adapter class 並命名為 ForecastListAdapter

首先需要先知道我們需要什麼資訊呈現在 recycler view 上,這邊需要的是 Weather 的陣列,未來幾天的天氣,所以宣告為

接著繼承 RecyclerView.Adapter,當你選擇這個時會看到系統提示:

代表這個 adapter 需要有一個 view holder 讓他能夠裝可回收的 view,建立一個 inner class 在原本的 adapter class 裡,並宣告為 ViewHolder

接著將定義好的 ViewHolder 放到繼承的 RecyclerView.Adapter,完整的宣告為:

這時候會系統會再提示這個 adapater 有尚未被 implement 的方法,提示你 裏有尚未執行的方法,跟 iOS 的 protocol 有點像。

可以把游標移到 ForecastListAdapter 上,再 alt+enter 一起按下,可以出現此提示:

全選後按下 OK

這時你的 adapter class 應該會是這樣子

從最簡單的開始 getItemCount() 代表你有產生幾個 item 在這個 recycler view 裏 ,當然是希望把 weathers 所有的值都表示出來吧!

接下來看 ViewHolder, 這個是要裝入所有剛剛在 weatherforcast_list_item 所有需要被置入值的 view,讓他們不需要每次新增一個 item 都會建立一次 view,而是讓他們可回收再利用的:

上面的 code 包含了,先將所有的 view 宣告完後,再用 bind 方法將資訊塞入對應的 view。

接下來看 onBindViewHolder 這個方法,代表的是如何將資訊放入 item ,後面代的參數有 (holder: ViewHolder?, position: Int)

position 代表的目前這個 item 所在的位置,剛好可以對應到我們的 weathers 這個陣列的 index,而我們剛剛已經將 bind 寫入 ViewHolder 所以可以方便地用:

~~ iOS 閒聊 ~~
這邊有點像在使用 `tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell` 將 array 裡的每一個值塞入 cell 中。

最後是 onCreateViewHolder , 這個方法會去建立每一個 item ,這邊需要把我們想要的 item layout 找出來並回傳,完整的 code 為:

~~ iOS 閒聊~~
很像在實例化 cell 會用到的 tableView.dequeueReusableCell(withIdentifier: “reuseIdentifier”, for: indexPath) 在 return 這個 cell,不過這邊把設定 cell 內容放到 onBind 裡去操作。

完整的 adapter 應該為:

到這裡,Adapter 總算是寫完,可以先把這個 pattern 先學起來,之後熟悉了再慢慢領會。

回到 MainActivity 把剛剛辛苦寫的 adapter 指給 recycler view 的 adapter 上,加入下列方法:

LinearLayoutManager 指的是 recycler view 所要呈現的樣式,這裡需要的是像 table 這樣一列一列的顯示,layoutManager 可以查看官方文件找到所要的 layout。

接下來放入假資料,用來呈現:

接著在 onCreate 裡呼叫 setupAdapter(),這時的 `MainActivity` 完整的 code 會是:

到這裡算是全部完成了,實際用模擬器跑跑看吧,也可以在假資料裡多塞幾條,捲動看看效果:D

完整的專案在我的 github 上,有興趣的大家可以多多交流,希望可以跟我分享 adapter class 的寫法,我是初學,所以有更多的意見,都可以留給我喔~

--

--