Android Recyclerview ConcatAdapter AndroidX Jetpack

Android ConcatAdapter - 組合多個資料來源

Fox Tsai 2021/06/16 17:47:47

2 3586

Android ConcatAdapter - 組合多個資料來源

前言

開發 APP 時，在需要顯示大量資訊但顯示項目外觀有著些許不同或是多個區塊時，常常會遇到一個問題是：『這個頁面我要不要重複使用內容？』

數量少的時候可能會選擇使用 ScrollView 然後內容寫死，數量多的時候可能會用多個 Recyclerview 或是透過 ViewType 區分並且混用多個 ViewHolder，不過在這個情況下的Adapter通常需要塞入大量的程式碼處理不同類型的 itemView。

針對這類有順序且區塊分明的內容，Google 推出了新元件 ConcatAdapter，並在今年四月 Recyclerview 推出 1.2.0 版時，正式包含在套件裡面。

ConcatAdapter 顧名思義，就是將 Adapter 連接起來的 Adapter，允許你在同一個 Recyclerview 同時使用多個 Adapter。

內容

使用方式

- 最低版本限制

功能實作

- 內容分類

- 建立ViewHolder

- 建立Recyclerview Adapter

- 使用ConcatAdapter

- 關於ConcatAdapter.Config與isolateViewTypes

結語

參考資料

範例原始碼

使用方式

使用上僅需跟 Recyclerview 同時加入，並指定版本為 1.2.0 以上，請在 app 的 build.gradle 檔案的 dependencies 區塊內添加：

implementation("androidx.recyclerview:recyclerview:1.2.0")

最低版本限制

根據 CommonsWare 所維護的 AndroidX 套件資訊列表，Recyclerview 1.2.0 套件的 minSdkVersion (api level) 為 14，也就是 Android 4.0。

功能實作

底下我們會實作一個 Demo APP，假設有個畫面需求如上圖所示，顯示產品圖片、產品名稱、產品價格、產品規格以及特色說明。圖上的做法是完全使用 ScrollView、LinearLayout、TextView 與 ImageView 寫死內容，對於規格已經相當確定且不太會變動的頁面使用這樣的方法尚可接受，不過如果如果要保持擴充彈性建議還是不使用這樣的方法製作，一方面是 xml layout 檔案內會相當雜亂冗長，接下來我們會將這個畫面改成使用 ConcatAdapter 實作。

內容分類

畫面上可以很簡單分出幾個區塊，包含只有單一項目的產品圖片、產品標題 (名稱與價格)，還有比較多個項目的產品規格與特色說明，這邊就直接拆成 4 個 Adapter 去負責個別區塊的內容。

建立 ViewHolder

商品圖片就只放入一個 ImageView 顯示商品圖片。

標題部分放上產品名稱跟價格文字。

規格部分只放一組文字。

特色說明部分有一張圖片跟說明文字。

建立 Recyclerview Adapter

首先為四個區塊分別產生對應的 Adapter 及 ViewHolder。

資料來源直接使用 arrays 資源檔處理，標題部分算是比較偷吃步，直接用一個項目包含兩個資料，底下的 Adapter 因此可以再簡化。

首先建立商品圖片來源 ProductImageAdapter，圖片部分使用字串取回圖片 Resource ID再進行套用。

接著建立產品標題來源 ProductTitleAdapter。

建立產品規格來源 ProductSpecAdapter。

建立產品特色來源 ProductFeatureAdapter。

使用 ConcatAdapter

ConcatAdapter 的使用方法其實相當簡單，可以直接傳入 List<Adapter>，或是將 Adapter 一個接一個帶入。

回到專案原始碼，新增一個 ProductActivity，xml layout 部分只擺上一個填滿畫面的 Recyclerview。

接著使用字串陣列資源建立每個區塊的 Recyclerview Adapter 後，新增一個 ConcatAdapter 並按照畫面上的順序將每一個區塊的 Adapter 填入，並且指定給 Recyclerview 使用。

執行後就可以看到顯示後的結果了，跟直接寫死的畫面基本上一樣，但主要的 layout 上僅需使用一個 Recyclerview。

關於 ConcatAdapter.Config 與 isolateViewTypes

還記得前面圖片中的 ConcatAdapter 建構子嗎，其中兩個前面講過，另外兩個看起來很像但是前面多了一個 ConcatAdapter.Config 的設定參數。

官方文件裡面可以看到 Config 裡面的成員包含一個 Boolean 值 isolateViewTypes，這個值主要用來控制各個 Adpater 的 itemViewType 是否互相隔離，跟字面上的意思一樣，預設為開啟。

當不開啟 isolateViewTypes 時，ConcatAdapter 內的每一個 Adapter 成員都有各自的 ViewType，舉例來說，第 1 個跟第 4 個 Adapter 的類別都是 RedAdapter，假設他們 itemView 的 ViewType 是 1，經過 ConcatAdapter 處理後他的 itemView 會被視為不同的 ViewType，也就是變成有 4 種 ViewType。

由於 Recyclerview 的快取空間內，不同的 ViewType 會各自獨立，因此在上述情況下，明明 RedAdapter 用的是一樣的 ViewType，但他們無法共用快取。

預設情況下將 isolateViewTypes 設為 true 可以避免因為混用快取產生的風險，但如果無論如何都要進行共用，在 Adapter 內需要實作 getItemViewType 方法。

在各個 Adapter 實作完 getItemViewType 方法後，接著利用 ConcatAdapter.Config.Builder 產生設定並在建立 ConcatAdapter 時帶入即可，其實就等同於以往在單一 Adapter 中使用多個 item layout 的使用方式，差別在於列表項目位置的判斷由 ConcatAdapter 自行處理掉了。

結語

利用新的 ConcatAdapter，我們可以有效率的整合多個資料來源，完成一個擁有多個內容區塊的列表頁，避免單一 Adapter 搭配多個 ViewHolder 造成 Adapter 程式碼不好維護的問題，也能減少主要畫面 xml layout 的複雜度。進行 Adapter 拆分的同時也增加了畫面重複使用上的靈活度。然而這個元件也不是萬能的，設計上會比較適合沒有不同 itemView 交錯顯示的情境，遇到 APP 設計擁有較長的詳細資訊頁面，可以考慮使用這個新的元件來取代 ScrollView 或是多個 RecyclerView 的作法。