提供一個操作便捷、多功能的Recyclerview介面卡

weixin_34166847發表於2018-07-09
View

原創文章，轉載請聯絡作者

前言

這是Kotlin實踐日記的第一章，使用Kotlin構建一個，使用方便、多功能的Recyclerview介面卡——AcrobatAdapter。

AcrobatAdapter讓開發者專注於Item的配置，包括Item的UI和資料顯示，以及單擊、雙擊、長按事件【且不會影響子View的事件傳遞】。而且不僅僅是單Item Style列表,還是多Item Style列表，AcrobatAdapter的使用都是一樣方便簡單。

AcrobatAdapter的設計靈感來自於夜叉，我的函式名稱也沿用夜叉的函式名，因為itemDSL這個名稱是在太貼切了。夜叉這個專案是針對Recyclerview整體來構建，推薦小可愛們去看看。

GitHub連結放在文章底部哦。
下面將展示使用文件。

使用文件

####普通列表

val acrobatAdapter = AcrobatAdapter<Int> {
          itemDSL {
              resId(R.layout.item_test)
              showItem { d, pos, view ->
                  view.item_tv.text = "資料Item" + d
              }
          }
       }.setData(資料來源)
recycler_view.adapter = acrobatAdapter
複製程式碼

噠噠，以上程式碼就成功構建了一個列表
resId()函式繫結Item的佈局ID
showItem函式內，渲染資料，d表示此項Item對應資料，會根據介面卡泛型自動轉換。pos為Item的position，view是Item的佈局View。而且Kotlin支援使用Id代表控制元件，再也不用寫findViewById啦！
最後，介面卡的setData方法內建了DiffUtils，會對比新舊資料，這樣在資料重新整理時Recyclerview會有預設動畫展示。讓互動更加平滑。

如果開發者在專案中，有好幾個介面的Item完全一樣，那豈不是還要寫幾套程式碼？完全不用擔心，Item也支援複用。

首先Item相關類，繼承AcrobatItem。

class Test : AcrobatItem<Int>() {
    override fun showItem(d: Int, pos: Int, view: View) {
        view.item_tv.text = "共用Item" + d
    }
    override fun getResId(): Int = R.layout.item_test
}
複製程式碼

在介面卡中：

val acrobatAdapter = AcrobatAdapter<Int> {
            item { 
                Test()
            }
        }.setData(資料來源)
        recycler_view.adapter = acrobatAdapter
複製程式碼

讓你的Item繼承AcrobatItem即可。這樣再多的介面複用Item也完全可行，但要注意的一點是：Item的資料型別必須一致。

多Item樣式可以咩？當然可以啦！

多item樣式的話，寫多個ItemDSL即可！每一個ItemDSL就代表一種獨有的Item樣式。同理，每呼叫一次item，也就多一種Item樣式。

val acrobatAdapter = AcrobatAdapter<Int> {
       itemDSL {
            resId(R.layout.item_test)
            showItem { d, pos, view ->
                 view.item_tv.text = "資料Item: " + d
              }
              isMeetData { d, pos -> pos == 1 }
           }
        itemDSL {
             resId(R.layout.item_test1)
             showItem { d, pos, view ->
                  view.item_tv.text = "cece: " + d
              }
              isMeetData { d, pos -> pos != 1 }
           }
        }.setData(資料來源)
  recycler_view.adapter = acrobatAdapter
複製程式碼

isMeetData函式兩個引數為資料和position。用這兩個引數來判斷此Item在哪個位置、什麼條件展示。譬如示例程式碼，position為1時是一個樣式，不為1時是另一種樣式。但要注意，所有的Item的isMeetData的條件都是互斥的噢。否則會丟擲異常。

嗯……Recyclerview沒有預設的Item點選事件怎麼辦？沒問題，AcrobatAdapter替你搞定。每個Item不但有單擊click,還附帶了雙擊DoubleTap和長按LongPress事件。而且完全不會影響Item佈局View內部childView的事件。

  • 每種Item都可以繫結自己獨有的三個事件
val acrobatAdapter = AcrobatAdapter<Int> {
         itemDSL {
             resId(R.layout.item_test)
             showItem { d, pos, view ->
                 view.item_tv.text = "資料Item: " + d
             }
             onClick { 
                 toastS("單擊")
             }
             onDoubleTap { 
                 toastS("雙擊")
             }
             
             longPress { 
                 toastS("長按")
             }
         }
         
         itemDSL {
             resId(R.layout.item_test1)
             showItem { d, pos, view ->
                 view.item_tv1.text = "另一種樣式" + d
             }
             isMeetData { d, pos -> pos == 1 }
             
             onClick { 
                 toastS("單擊另一種Item")
             }

             onDoubleTap {
                 toastS("雙擊另一種Item")
             }

             longPress {
                 toastS("長按另一種Item")
             }
         }         
       }.setData(資料來源)
複製程式碼

三個事件都是單獨繫結Item的樣式的！當使用多Item樣式列表時，再也不用在click事件中，寫很多的條件判斷了！

AcrobatAdapter不但支援Item繫結事件，也支援Adapter外部繫結事件。但這樣就需要開發者，在外部事件裡區分多Item樣式了。

  • 介面卡持有Item事件，使用AcrobarAdapter的bindEvent()函式
val acrobatAdapter = AcrobatAdapter<Int> {
         itemDSL {
             resId(R.layout.item_test)
             showItem { d, pos, view ->
                 view.item_tv.text = "資料Item: " + d
             }
             isMeetData { d, pos -> pos != 1 }
         }
        }.setData(data).bindEvent { 
            onClick { 
                toastS("外部單擊")
            }
            
            onDoubleTap { 
                toastS("外部雙擊")
            }
            
            longPress { 
                toastS("外部長按")
            }
        }
複製程式碼

還有幾個使用的小Tip

  • ItemDSl的onViewCreated(parent,view)函式
val acrobatAdapter = AcrobatAdapter<Int> {
        itemDSL {
            resId(R.layout.item_test)
            showItem { d, pos, view ->
                view.item_tv.text = "資料Item: " + d
            }
            
            onViewCreate { parent, view -> 
                作一些和資料無關的UI操作，譬如view設定為圓形
                或者EditText的addTextChangedListener
            }
        }
      }
複製程式碼

showItem()函式是繫結在介面卡的onBingViewHolder函式裡的，觸發會比較頻繁。如果在showItem內做一些UI操作，會比較浪費效能.
onViewCreated函式是繫結在介面卡的onCreateViewHolder函式內

  • 重新整理單個Item佈局

Recyclerview如果需要重新整理Item的話，不建議使用notifyItemChanged(int position)方法，因為這個方法會重新整理整個Item的檢視。在視覺上的直觀體現就是，Item會閃爍。所以建議使用如下方法重新整理Item：

notifyItemChanged(int position, Object payload)
複製程式碼

使用上面這個方法，不會重繪整個View的檢視。

val acrobatAdapter = AcrobatAdapter<Int> {
       itemDSL {
           resId(R.layout.item_test)
           showItem { d, pos, view ->
               view.item_tv.text = "資料Item: " + d
           }
           showItemPayload { d, pos, view, payloads -> 
            重新整理Item的某個特定的ChildView。
            譬如在某個Item重新整理進度條。下面為虛擬碼
            view.progreess_bar.setProgress(100%)        
           }
        }
     }
複製程式碼

下面簡單做一下效果展示：

#####使用notifyItemChanged(int position)和showItem重新整理佈局

#####使用notifyItemChanged(int position, Object payload)和showItemPayload重新整理佈局

效果對比，一目瞭然。

結語

AcrobatAdapter,連結在此，大家要是喜歡的話不妨點個star吧。
Kotlin已成為Android開發的官方語言，不管工作上用得到用不到，大家瞭解一二還是有必要的。畢竟這個時代變化的太快了。
以上

相關文章