Android Chip 實作紀錄

聊聊 Chip 實作的小事

遇到處理多項標籤給使用者選擇的需求，用 RecyclerView 實作，Done！又新增了需求是除了選擇標籤外還要可以讓使用者自行輸入標籤，抓起 Adapter 新增可以輸入的 ViewHolder，休淡幾壘！提供可選項目除了 RecyclerView 以外官方還提供一種更簡便 component，再也不用牛刀殺雞辛辛苦苦新增一堆 Adapter、ViewHolder 卻只是要顯示超簡單的選單，來聊聊 Chip 吧！

Chip 類型

在 Material Design 中依功能的不同分為 Input Chip、Choice Chip、Filter Chip 和 Action Chip，其實使用上都大同小異。Chip 的 root view 是 ChipGroup，如果是固定數量和固定邏輯的 Chip 可以透過 XML 的方式靜態新增在 ChipGroup 中，但若是會變動的 Chip，也可以透過 addView 的方式動態在取得 Chip 資料時新增到 ChipGroup 上。但如何知道選擇的 Chip 是哪個？可以透過 chip id 確認選取的 Chip item 並進行後續的操作。

消失的 TextAppearance

在專案實作時 Material Design 的版本為 "com.android.support:design:28.0.0"，在 Compile 階段都沒有問題，但在 runtime 時無論用動態或靜態方式加入的 Chip component 都會報錯：

Caused by: java.lang.IllegalArgumentException: This component requires that you specify a valid TextAppearance attribute. Update your app theme to inherit from Theme.MaterialComponents (or a descendant).

查到的解法有一種是 AppTheme 要繼承自 Material Component 的 parent，也是 error message 上說的第二種解法，但專案已繼承 Material Component 所以排除該解法，error message 上說的第一個是需要 TextAppearance 的 Attribute，如果用 Debug mode 也會發現 Chip 在需要 TextAppearance 的 function，因爲拿到 null 的 TextAppearance 就建不起來 Chip 的 Layout。最後採用的解法是新增一個 Chip 的 Layout，並加上 TextAppearance 的 Attribute，之後透過 Layoutinflater 動態新增所需的 Chip。

android:textAppearance="@style/SomeTextAppearance"

選擇題

如果希望 ChipGroup 的選項只能單選時，透過 isSingleSelection 可以指定是否為單選，並且搭配 setOnCheckedChangeListener 回傳的 id 就可以知道選中的是哪個 Chip。 但多選時 setOnCheckedChangeListener 的魔法就會失效，無法直接拿到選擇的 id，那多選的狀況要如何處理呢？雖然沒有 ViewGroup 可以統一監聽 Chip item 被選擇的情況，但可以在每個 Chip item 身上綁 setOnCheckedChangeListener，回傳 isChecked 就可以紀錄哪些 Chip item 是被選中的狀態。

假如需求是多個 ChipGroup 提供給使用者選擇，但選到的 Chip 又有數量限制，可以怎麼設計呢？實作時用 RecyclerView 先呈現多個 ChipGroup，之後再 ViewHolder 上把資料庫回傳的 Chip 資料 addView 到 ChipGroup 上，在每個 Chip 身上綁 setOnCheckedChangeListener，並且在點擊時確認已選擇的數量上限，如果未達上限則 isChecked = true，並且要 notifyItemChanged(index: Int)，因為每次 onBindViewHolder 都會把每個 Chip addView 至 ChipGroup，所以記得 addView 前要先 ChipGroup.removeAllViews() 才能正確刷新該 ChipGroup，但如果已達上限則 sChecked = false。

下次要處理供使用者選擇的需求前，除了最熟悉的 RecyclerView 外，不妨試玩看看平易近人的 Chip！