前言
V- Layout
是阿里出品的基礎 UI 框架,用於快速實現頁面的複雜佈局,在手機天貓Android
版 內廣泛使用
- 讓人激動的是,在上個月
V- Layout
終於在Github上開源!
- 在五一假期我對
V- Layout
進行了詳細分析,我將獻上一份V- Layout
的使用攻略 & 源碼分析,希望你們會喜歡。
目錄
1. 爲什麼要使用 V - Layout
在講解 `V - Layout` 前,我們先來搞懂一個問題:爲什麼要使用 `V - Layout`1.1 背景
-
Android
中UI
性能消耗主要來自於兩個方面:- 佈局層次嵌套導致多重
measure/layout
View
控件的創建和銷燬
- 佈局層次嵌套導致多重
-
爲了解決上述問題,現有的解決方式是:
- 少用嵌套佈局
- 使用
ListView/GirdView/RecyclerView
等基礎空間來處理View
的回收與複用。
但是,很多時候我們需要在一個長列表下做多種類型的佈局來分配各種元素,,特別是電商平臺首頁等頁面,佈局元素結構更加複雜多樣。如下圖:
此時的解決方案有所變化:不採用子View
的複用,只採用一個主要的複用容器(如ListView
或 RecyclerView
+LinearLayoutManager
),然後在其中使用嵌套方式直接用各個組件進行拼接,減少了複用的能力
1.2 問題
這種做法還是會損失android應用的性能。
1.3 解決方案
- 通過自定義
LayoutManager
管理所有的佈局類型 - 即阿里出品的基礎 UI 框架項目
VirtualLayout
就是採用該方式來解決上述問題
2. 簡介
- 定義:
VirtualLayout
是阿里出品的基礎 UI 框架項目 - 作用:快速實現複雜的佈局格式的混排
- 基於
RecyclerView
&LayoutManager
擴展
- 目前已在Github開源:Github - alibaba - vlayout
- 基於
3. 應用場景
- 複雜的佈局格式混排,如:浮動佈局、欄格佈局、通欄佈局、一拖N佈局、瀑布流佈局,還可以組合使用這些佈局
- 具體場景是:如電商平臺首頁、活動頁等等
V - Layout 目前已在手機天貓 & 淘寶 Android 版內廣泛使用
4. 原理解析
V - Layout
的本質原理是:通過自定義一個VirtualLayoutManager
(繼承自
LayoutManager),用於管理一系列LayoutHelper
,將具體的佈局能力交給LayoutHelper
來完成,從而 快速實現組合佈局 的需求。
- 每個
LayoutHelper
負責 頁面某一個範圍內的佈局V - Layout
默認實現了10種默認佈局:(對應同名的LayoutHelper)
4.1 源碼類說明
V - Layout
的源碼類圖如下:
1.RecyclerView
- 定義:頁面佈局的主體
- 特別注意:在
V - layout
框架裏綁定VirtualLayoutAdapter
(繼承Adapter
) &VirtualLayoutManager
(繼承LayoutManager
)
2. VirtualLayoutAdapter
- 定義:數據適配器。
繼承自系統的
Adaper
- 作用:創建組件 & 綁定數據到組件
- 額外:定義了兩個接口:
getLayoutHelper()
:用於返回某個位置組件對應的一個LayoutHelper
setLayoutHelpers()
:調用此方法設置整個頁面所需要的一系列LayoutHelper
這兩方法的具體實現委託給VirtualLayoutManager
完成
3. VirtualLayoutManager
- 定義:佈局管理器
繼承自系統的
LinearLayoutManager
- 作用:
- 在
RecyclerView
加載組件或者滑動時調用VirtualLayoutManager
的layoutChunk()
,返回當前還有哪些空白區域可擺放組件 - 管理
LayoutHelper
列表
- 在
- 額外:實現了
VirtualLayoutAdapter
的getLayoutHelper()
&setLayoutHelpers()
4. LayoutHelperFinder
- 定義:
LayoutHelper
尋找器 - 作用:根據頁面狀態 尋找對應的
LayoutHelper
並返回給VirtualLayoutManager
VirtualLayoutManager
會持有一個LayoutHelperFinder
- 當
layoutChunck()
被調用時會傳入一個位置參數,告訴VirtualLayoutManager
當前要佈局第幾個組件
VirtualLayoutManager
通知持有的LayoutHelperFinder
找到傳入參數位置對應的LayoutHelper
(每個LayoutHelper
都會綁定它負責的佈局區域的起始位置和結束位置)
5. LayoutHelper
- 定義:佈局協助器
- 作用:負責具體的佈局邏輯
- 其中定義了一系列接口用於和
VirtualLayoutManager
通信:
接口 | 作用 |
---|---|
isOutOfRange() | 告訴VirtualLayoutManager它所傳遞過來位置是否在當前LayoutHelper的佈局區域內; |
setRange() | 設置當前LayoutHelper負責的佈局區域 |
doLayout() | 真正的佈局邏輯接口 |
beforeLayout() | 在佈局前做一些前置工作 |
afterLayout() | 在佈局完成後做一些後置工作 |
6. MarginLayoutHelper
- 定義:繼承自
LayoutHelper
- 作用:擴展
LayoutHelper
,提供了佈局常用的內邊距padding
、外邊距margin
的計算功能
7. BaseLayoutHelper
- 定義:
MarginLayoutHelper
的第一層具體實現 - 作用:填充 當前
LayoutHelper
在屏幕範圍內的具體區域 背景色、背景圖等邏輯
8. 子LayoutHelper
- 定義:
MarginLayoutHelper
的第二層具體實現 - 作用:負責具體的佈局邏輯
- 每種子
LayoutHelper
負責一種佈局邏輯
- 重點實現了
beforeLayout()
、doLayout()
、afterLayout()
- 特別是
doLayout()
:會獲取一組件,並對組件進行尺寸計算、界面佈局。 V - Layout
默認實現了10種默認佈局:(對應同名的LayoutHelper)
- 每種子
下面會進行詳細介紹。
- 特別注意:
- 每一種
LayoutHelper
負責佈局一批組件範圍內的組件,不同組件範圍內的組件之間,如果類型相同,可以在滑動過程中回收複用。因此回收粒度比較細,且可以跨佈局類型複用。 - 支持擴展外部:即註冊新的
LayoutHelper
,實現特殊的佈局方式。下面會詳細說明
- 每一種
介紹完類之後,我將詳細分析 V - Layout
的工作流程。
4.2 工作流程
V - Layout
的工作流程分爲 初始化 & 佈局流程。如下圖:
- 下面我將對初始化 & 佈局流程作詳細分析。
4.2.1 初始化
- 在使用
V - layout
快速實現複雜佈局前,需要先做一系列的初始化工作。
初始化流程與使用普通的 RecyclerView + LayoutManager 初始化流程基本一致:Vlayout的使用者
此處的初始化 實際上 就是 使用者在使用 V - layout
時需要做的初始化工作,在下面的實例講解我會進行更加詳細的說明。
4.2.2 具體佈局流程
- 當完成初始化工作後,每當用戶剛打開頁面第一次渲染布局 或 用戶滑動頁面時,都會進行一次佈局流程
- 佈局流程的本質是:自定義
VirtualLayoutManager
持續獲取頁面狀態,並通過LayoutHelperFinder
找到對應的LayoutHelper
從而實現對應的佈局邏輯,從而快速實現組合佈局 的需求 - 具體流程如下
總結
下面用一張圖總結 V - Layout
的原理 & 工作流程
在講完原理後,接下來我將如何使用 V - Layout
。
5. 使用步驟
V - Layout
的使用其實就是上面說的初始化工作- 使用步驟如下:
下面我將對每個步驟進行詳細說明。
步驟1:創建RecyclerView & VirtualLayoutManager 對象並進行綁定
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
步驟2:設置回收複用池大小
如果一屏內相同類型的 View 個數比較多,需要設置一個合適的大小,防止來回滾動時重新創建 View)
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
步驟3:設置Adapter
設置 V - Layout的Adapter有兩種方式:
- 方式1:繼承 自
DelegateAdapter
- 方式2:繼承 自
VirtualLayoutAdapter
下面會進行詳細說明:
方式1:繼承 自 DelegateAdapter
- 定義:
DelegateAdapter
是V - Layout專門爲管理LayoutHelper
定製的Adapter
繼承自VirtualLayoutAdapter
-
作用:通過管理不同佈局的Adapter,繼而管理不同的
LayoutHelper
,從而實現使用不同組合佈局- 特別注意:雖不可直接綁定LayoutHelper,但是它內部有一個繼承自RecyclerView.Adapter的內部類Adapter可以綁定LayoutHelper;
- 即通過一個List把綁定好的Adapter打包起來,再放去DelegateAdapter,這樣就可以實現組合使用不同的佈局
-
具體做法:
- 寫法與複寫系統自帶的Adapter非常類似:只比系統自帶的RecyclerAdapter需要多重載onCreateLayoutHelper方法,其餘類似
- 關於Android系統自帶的RecyclerAdapter的使用具體請看我寫的文章Android開發:ListView、AdapterView、RecyclerView全面解析
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
方式2:繼承 自 VirtualLayoutAdapter
-
定義:當需要實現複雜需求時, 可以通過繼承
VirtualLayoutAdapter
從而實現自定義Adapter -
具體使用
- 1
- 2
- 3
- 1
- 2
- 3
步驟4:根據數據列表,創建對應的LayoutHelper
- 系統以封裝好以下佈局類型(對應同名的LayoutHelper)
- 具體使用如下:
1. 線性佈局(LinearLayoutHelper)
- 佈局說明:佈局子元素(
Item
)以線性排布的佈局
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
1. 所有佈局的共有屬性說明:
a. setItemCount屬性
- 作用:設置整個佈局裏的Item數量
如設置的Item總數如與Adapter的getItemCount()方法返回的數量不同,會取決於後者
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
b. Adding & Margin屬性
-
定義:都是邊距的含義,但二者邊距的定義不同:
Padding
:是LayoutHelper
的子元素相對LayoutHelper
邊緣的距離;Margin
:是LayoutHelper
邊緣相對父控件(即RecyclerView
)的距離。具體如下圖:
-
具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
c. bgColor屬性
- 作用:設置佈局背景顏色
- 具體使用:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
d. aspectRatio屬性
- 作用:設置佈局內每行佈局的寬與高的比。如下圖
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
2. LinearLayoutHelper佈局的特有屬性說明
a. dividerHeight屬性
- 作用:設置每行Item之間的距離
設置的間隔會與RecyclerView的addItemDecoration()添加的間隔疊加
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
2. 網格佈局(GridLayout)
- 佈局說明:佈局裏的Item以網格的形式進行排列
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
GridLayoutHelper佈局的特有屬性說明
a. weights屬性
- 作用:設置每行中每個網格寬度佔每行總寬度的比例
- 默認情況下,每行中每個網格中的寬度相等
weights
屬性是一個float數組,每一項代表當個網格佔每行總寬度的百分比;總和是100,否則佈局會超出容器寬度;
- 如果佈局中有4列,那麼weights的長度也應該是4;長度大於4,多出的部分不參與寬度計算;如果小於4,不足的部分默認平分剩餘的空間。
- 默認情況下,每行中每個網格中的寬度相等
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
b. vGap、hGap屬性
- 作用:分別控制子元素之間的垂直間距 和 水平間距。
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
c. spanCount、spanSizeLookup屬性
- 作用:
spanCount
:設置每行多少個網格spanSizeLookup
:設置每個Item
佔用多少個網格(默認= 1)
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
d. autoExpand屬性
- 作用:當一行裏item的個數 < (每行網格列數 - spanCount值/ 每個Item佔有2個網格-setSpanSizeLookup )時,是否自動填滿空白區域
- 若autoExpand=true,那麼視圖的總寬度會填滿可用區域;
- 否則會在屏幕上留空白區域。
- 若autoExpand=true,那麼視圖的總寬度會填滿可用區域;
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
3. 固定佈局(FixLayoutHelper)
- 佈局說明:佈局裏的Item 固定位置
固定在屏幕某個位置,且不可拖拽 & 不隨頁面滾動而滾動。如下圖:(左上角)
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
FixLayoutHelper特有屬性說明
a. AlignType、x、y屬性
- 作用:
- alignType:吸邊基準類型
共有4個取值:TOP_LEFT(默認), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,具體請看下面示意圖
- x:基準位置的橫向偏移量
- y:基準位置的縱向偏移量
- alignType:吸邊基準類型
- 作用對象:FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper的屬性
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
4. 可選顯示的固定佈局(ScrollFixLayoutHelper)
- 佈局說明:佈局裏的Item 固定位置
- 固定在屏幕某個位置,且不可拖拽 & 不隨頁面滾動而滾動(繼承自固定佈局(FixLayoutHelper))
- 唯一不同的是,可以自由設置該Item什麼時候顯示(到頂部顯示 / 到底部顯示),可如下圖:(左上角)
- 需求場景:到頁面底部顯示”一鍵到頂部“的按鈕功能
- 固定在屏幕某個位置,且不可拖拽 & 不隨頁面滾動而滾動(繼承自固定佈局(FixLayoutHelper))
以下示意圖爲:滑動到底部,佈局纔在左上角顯示
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
ScrollFixLayoutHelper特有屬性說明
a. AlignType、x、y屬性
- 作用:
- alignType:吸邊基準類型
共有4個取值:TOP_LEFT(默認), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,具體請看下面示意圖
- x:基準位置的橫向偏移量
- y:基準位置的縱向偏移量
- alignType:吸邊基準類型
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
b. ShowType屬性
-
作用:設置Item的顯示模式
共有三種顯示模式
- SHOW_ALWAYS:永遠顯示(即效果同固定佈局)
- SHOW_ON_ENTER:默認不顯示視圖,當頁面滾動到該視圖位置時才顯示;
- SHOW_ON_LEAVE:默認不顯示視圖,當頁面滾出該視圖位置時才顯示
-
具體使用
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
5. 浮動佈局(FloatLayoutHelper)
- 佈局說明:佈局裏的Item只有一個
- 可隨意拖動,但最終會被吸邊到兩側
- 不隨頁面滾動而移動
- 可隨意拖動,但最終會被吸邊到兩側
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
6. 欄格佈局(ColumnLayoutHelper)
- 佈局說明:該佈局只設有一欄(該欄設置多個Item)
可理解爲只有一行的線性佈局
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
7. 通欄佈局(SingleLayoutHelper)
- 佈局說明:佈局只有一欄,該欄只有一個Item
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
8. 一拖N佈局 (OnePlusNLayoutHelper)
- 佈局說明:將佈局分爲不同比例,最多是1拖4。具體如下圖
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
9. 吸邊佈局(StickyLayoutHelper)
-
佈局說明:佈局只有一個Item,顯示邏輯如下:
- 當它包含的組件處於屏幕可見範圍內時,像正常的組件一樣隨頁面滾動而滾動
- 當組件將要被滑出屏幕返回的時候,可以吸到屏幕的頂部或者底部,實現一種吸住的效果
-
示意圖(吸在頂部)
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
stickyStart、 offset屬性說明
-
作用:
-
stickyStart
:設置吸邊位置當視圖的位置在屏幕範圍內時,視圖會隨頁面滾動而滾動;當視圖的位置滑出屏幕時,StickyLayoutHelper會將視圖固定在頂部(stickyStart = true)或 底部(stickyStart = false)
-
offset
:設置吸邊的偏移量
-
-
具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
10. 瀑布流佈局(StaggeredGridLayoutHelper)
- 佈局說明:以網格的形式進行佈局。與網格佈局類似,區別在於:
- 網格佈局每欄的Item高度是相等的;
- 瀑布流佈局每欄的Item高度是可以不相等的。
- 具體使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
自定義佈局(即自定義LayoutHelper)
除了使用系統提供的默認佈局 LayoutHelper
,開發者還可以通過自定義LayoutHelper從而實現自定義佈局樣式。有三種方式:
-
繼承
BaseLayoutHelper
:從上而下排列的順序 & 內部View
可以按行回收的佈局;主要實現layoutViews()
、computeAlignOffset()
等方法LinearLayoutHelper
、GridLayoutHelper
都是採用該方法實現 -
繼承
AbstractFullFillLayoutHelper
:有些佈局內部的View
並不是從上至下排列的順序(即Adatper
裏的數據順序和物理視圖順序不一致,那麼可能就不能按數據順序佈局和回收),需要一次性佈局
& 回收。主要實現layoutViews()
等方法OnePlusNLayoutHelper
採用該方法實現 -
繼承
FixAreaLayoutHelper
:fix
類型佈局,子節點不隨頁面滾動而滾動。主要實現layoutViews()
、beforeLayout()
、afterLayout()
等方法FixLayoutHelper
採用該方法實現
步驟5:將生成的LayoutHelper 交給Adapter,並綁定到RecyclerView 對象
此處的做法會因步驟3中Adapter的設置而有所不同
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
至此,使用過程講解完畢。
6. 實例說明
- V-Layout的優點在於快速的組合不同佈局
- 下面,我將根據上面的步驟說明,用一個實例來使用
V - Layout
快速組合佈局
步驟1:在Android - Gradle
加入依賴
- 1
- 2
- 3
- 1
- 2
- 3
步驟2:定義主 xml
佈局
activity_main.xml
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
步驟3:定義 RecyclerView
每個子元素( Item
)的xml佈局
item.xml
此處定義的
Item
佈局是常用的 上字下圖
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
步驟4:設置Adapter
-
設置 V - Layout的Adapter有兩種方式:
- 繼承 自
DelegateAdapter
此處主要以該方式進行演示
- 繼承 自
- 繼承 自
VirtualLayoutAdapter
-
具體使用
MyAdapter.Java
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
以下步驟都將寫在同一個.Java
文件裏
步驟5:創建RecyclerView & VirtualLayoutManager 對象並進行綁定
步驟6:設置回收複用池大小
步驟7:設置需要存放的數據
步驟8:根據數據列表,創建對應的LayoutHelper
步驟9:將生成的LayoutHelper 交給Adapter,並綁定到RecyclerView 對象
詳細請看註釋
MainActivity.java
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
效果圖
源碼地址
Carson_Ho的Github地址:V - Layout
參考文檔:
https://github.com/alibaba/vlayout
http://pingguohe.net/2017/02/28/vlayout-design.html
7. 總結
- 看完本文,你應該非常瞭解阿里出品的
V - Layout
的使用 & 原理 - 但該開源庫還是存在許多小
Bug
,我在Github上也提交了一些,希望大家能一起在Github - alibaba - vlayout 上進行完善,共同爲開源事業做貢獻吧! - 下面我將繼續對
Android
其他優秀的開源庫 進行詳細分析,有興趣可以繼續關注Carson_Ho的安卓開發筆記