Kotlin 開發第 6 天 ImageList (RecyclerView)


今天做一個這樣的練習,可以通過畫面滾動的方式來瀏覽 15 張圖片以及對應的描述。

類似 iOS 開發中會用到的 UITableView / UICollectionView。

  • 自定義每一個 item (cell) 的樣式,上方為圖片,下方為描述。
  • 手勢滑動主畫面時可以看到不同的內容。

RecyclerView

類似於 UICollectionView,只是使用起來不太一樣。
我們需要為 RecyclerView 提供一個 Adapter,並且給他設定一個 layoutManager。

在 MainActivity 中,看起來就是下面這樣而已,而像是多少數量、將資料呈現在 View 上等動作,都是交給 Adapter。
這裡的 Adapter 有點像 UICollectionView 的 Datasource & Delegate 方法提供者。


Adapter

我們建立了一個 ImageListAdapter ,定義 ImageListAdapter 可以:

  • 接受 List<ImageModel>
  • 返回 RecyclerView.Adapter<ImageListAdapter.ViewHolder>

在 Android 中,各種資源的都會有一個對應的 ID 來進行存取,比如 R.drawable.img_1 這不像 iOS 中可以直接根據圖片名稱來進行存取。

下面在 Adapter 中,我們通過圖片名稱轉換成對應的 Resource ID (這樣做是因為一開始沒注意到 R.drawable.img_1 是 Int)

 


建立 Layout

就像 iOS 的 UICollectionViewCell 一樣,我們想要為 RecyclerView 的 Item 定義自己想要的 Layout。

比如說,我們想要每一個 item 上面是一張長條的圖片,下面是一些描述。

我們在 Layout 中建立一個 layout_image_list_item.xml 的檔案,用來定義上面的 Layout。

這裡和 iOS 中的 Storyboard 很不一樣的是,
雖然我們定義了一個 item 設定圖片高度 220dp 描述背景 40dp ,合起來260dp。
但實際上在 Design 介面中看到的還是一個完整的手機樣式,不像 iOS 的 Storyboard 只會顯示 cell 的大小。

我一開始以為這樣就可以了,但結果到手機上跑的時候,一開始只有看到一個 Item,
結果發現一個 Item 就像 Design 介面一樣占滿了整個畫面。

後來就去 Text 下手動修改了高度。


建立 Model

這次我想要為資料建立兩個 Model。

  • ImageModel 用來定義一張圖片資料會有圖片名、描述兩個字段。
  • ImageListModel 用來定義一個 list 當中存的會是 ImageModel類型的資料。

建立 Model 資料夾

在 Android Studio 中,在 Project 中建立 Folder 會有分類,我這裡為 Model 建立了一個叫做 Package 的 Folder

 

定義 Model

在 iOS 開發過程中,我通常用 Struct 來定義 Model,但 Github 上逛了一下,看到通常用 data class 來定義

ImageModel

ImageListModel

通過 model 封裝數據後傳值


IDE 自動補全方法

這邊用 Adapter 舉一個例子,這邊定義了 ListAdapter() 並且會回傳一個 ViewHolder。

然後我們在 ListAdapter() 這邊按下,Option + Enter(Mac 系統),就會看到 Implement Members 的選項。

接著就可以選擇想要補全的方法。

Android Studio 就會幫我們都補上了。


參考

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *