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

weixin_34166847發表於2018-07-09

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

前言

這是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事件,使用AcrobarAdapterbindEvent()函式
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重新整理佈局

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

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

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

效果對比,一目瞭然。

結語

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

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

相關文章