說一說V-Layout框架的原理和使用場景

wutongke發表於2019-02-28

Vlayout是alibaba開源的一個基礎ui框架,用於快速實現一些複雜佈局,在淘寶和天貓App中都有使用。

說一說V-Layout框架的原理和使用場景
demo

先來看一下官方的介紹:

VirtualLayout是一個針對RecyclerView的LayoutManager擴充套件, 主要提供一整套佈局方案和佈局間的元件複用的問題。

通過定製化的LayoutManager,接管整個RecyclerView的佈局邏輯;LayoutManager管理了一系列LayoutHelper,LayoutHelper負責具體佈局邏輯實現的地方;每一個LayoutHelper負責頁面某一個範圍內的元件佈局;不同的LayoutHelper可以做不同的佈局邏輯,因此可以在一個RecyclerView頁面裡提供異構的佈局結構,這就能比系統自帶的LinearLayoutManager、GridLayoutManager等提供更加豐富的能力。同時支援擴充套件LayoutHelper來提供更多的佈局能力。

從RecyclerView出發

VLayout主要擴充套件自RecyclerView,我們就從RecyclerView說起,先來看一下RecyclerView中的幾個關鍵元素:

說一說V-Layout框架的原理和使用場景
盜圖一張

  • RecyclerView.LayoutManager
    主要負責對RecyclerView中的ItemView佈局,我們經常用到它的子類:

    說一說V-Layout框架的原理和使用場景

  • RecyclerView.ItemDecoration
    給每一項Item檢視新增子View,可以在Item直接增加分割線等

  • RecyclerView.ItemAnimator
    負責處理Item新增或者刪除時候的動畫效果

  • RecyclerView.Adapter
    為每一個positon提供ViewHolder

  • RecyclerView.ViewHolder
    負責Item 自身的佈局,並參與到RecyclerView的快取策略中。

VLayout的思路

從官網的介紹VLayout擴充套件的主要是LayoutManager,具體佈局邏輯在LayoutHelper中實現。Vlayout提供了各種各樣的LayoutHelper實現,同時也可以非常容易地擴充套件實現自定義的LayoutHelper。

說一說V-Layout框架的原理和使用場景

可以看的上圖的列表中有各種各樣的佈局,這些都是LayoutHelper的功勞。

我們知道在RecyclerView中正常是隻有一種佈局的,如果列表中需要使用不同的佈局,可以通過設定不同的ItemType,提供多種ViewHolder來實現。

VLayout使用了不同的思路。其繼承RecyclerView.Adapter類來實現DelegateAdapter類,通過DelegateAdapter來實現複雜佈局的展示,同時實現了自己的快取。

DelegateAdapter的原理其實是串聯多個繼承自RecyclerView.Adapter的adapter來管理資料和檢視的適配:

說一說V-Layout框架的原理和使用場景

所以每個adapter和layouthelper負責一個區域,每個區域有多個ItemView。

DelegateAdapter負責組合多個adapter,展示在RecyclerView中。

這有一個比較明顯的缺點是,每個子adapter只負責一個連續的區域,如果,有多個區域需要同樣的adapter,就需要新增兩次adapter。

VLayout 使用場景

從以上的分析中,個人認為類似淘寶這樣形式的佈局非常適合使用VLayout,並且VLayout提供了多種layoutHelper,使用非常方便。

但是如果是類似於微博、微信這種Feed流為主的介面,使用VLayout並沒有什麼優勢,徒增實現的複雜度。

歡迎關注公眾號wutongke,定期推送移動開發前沿技術文章:

說一說V-Layout框架的原理和使用場景
wutongke

推薦閱讀

說一說Facebook開源的Litho
使用ConstraintLayout製作漂亮的動畫

相關文章