vlayout的使用

1.簡介

vlayout全稱VirtualLayout，是一個針對RecyclerView的LayoutManager擴展。是阿里最近開源的一個庫，主要提供一整套佈局方案和佈局間的組件複用的問題。

GitHub地址

demo示例

demo地址

2.優勢

經過定製化的LayoutManager，接管整個RecyclerView的佈局邏輯；LayoutManager管理了一系列LayoutHelper，LayoutHelper負責具體佈局邏輯實現的地方；每個LayoutHelper負責頁面某一個範圍內的組件佈局；不一樣的LayoutHelper能夠作不一樣的佈局邏輯，所以能夠在一個RecyclerView頁面裏提供異構的佈局結構，這就能比RecylerView自帶的LinearLayoutManager、GridLayoutManager、StaggeredGridLayoutManager等提供更加豐富的能力。同時支持擴展LayoutHelper來提供更多的佈局能力。

3.功能（helper類介紹）

• 默認通用佈局實現，解耦全部的View和佈局之間的關係: Linear, Grid, 吸頂, 浮動, 固定位置等。

  • LinearLayoutHelper: 線性佈局
  • GridLayoutHelper: Grid佈局， 支持橫向的colspan
  • FixLayoutHelper: 固定佈局，始終在屏幕固定位置顯示
  • ScrollFixLayoutHelper: 固定佈局，但以後當頁面滑動到該圖片區域才顯示, 能夠用來作返回頂部或其餘書籤等
  • FloatLayoutHelper: 浮動佈局，能夠固定顯示在屏幕上，但用戶能夠拖拽其位置
  • ColumnLayoutHelper: 欄格佈局，都佈局在一排，能夠配置不一樣列之間的寬度比值
  • SingleLayoutHelper: 通欄佈局，只會顯示一個組件View
  • OnePlusNLayoutHelper: 一拖N佈局，能夠配置1-5個子元素
  • StickyLayoutHelper: stikcy佈局， 能夠配置吸頂或者吸底
  • StaggeredGridLayoutHelper: 瀑布流佈局，可配置間隔高度/寬度

• 上述默認實現裏能夠大體分爲兩類：一是非fix類型佈局，像線性、Grid、欄格等，它們的特色是佈局在整個頁面流裏，隨頁面滾動而滾動；另外一類就是fix類型的佈局，它們的子節點每每不隨頁面滾動而滾動。

• 全部除佈局外的組件複用，VirtualLayout將用來管理大的模塊佈局組合，擴展了RecyclerView，使得同一RecyclerView內的組件能夠複用，減小View的建立和銷燬過程。

4.使用

01.在項目中的build.gradle配置

compile ('com.alibaba.android:vlayout:1.0.4@aar') { transitive = true }

• 1
• 2
• 3

或者maven: 
pom.xml

<dependency> <groupId>com.alibaba.android</groupId> <artifactId>vlayout</artifactId> <version>1.0.4</version> <type>aar</type> </dependency>

• 1
• 2
• 3
• 4
• 5
• 6

02.初始化VirtualLayoutManager

VirtualLayoutManager virtualLayoutManager = new VirtualLayoutManager(this); mRecylerView.setLayoutManager(virtualLayoutManager); 

• 1
• 2
• 3

03.設置緩存view個數(當視圖中view的個數不少時，設置合理的緩存大小，防止來回滾動時從新建立 View)

final RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool(); mRecylerView.setRecycledViewPool(viewPool); viewPool.setMaxRecycledViews(0, 20);

• 1
• 2
• 3

04.RecylerView建立適配器，初始化DelegateAdapter

DelegateAdapter是vlayout封裝好的adapter。

DelegateAdapter delegateAdapter = new DelegateAdapter(virtualLayoutManager, false); mRecylerView.setAdapter(delegateAdapter);

• 1
• 2

經過調用delegateAdapter.addAdapters或addAdapter中傳入DelegateAdapter.Adapter實現類的集合或者單個對象，實現各類不一樣item佈局。

delegateAdapter.addAdapters(adapters);

delegateAdapter.addAdapter(new MyAdapter(this,new LinearLayoutHelper(,0)));

• 1
• 2
• 3

05.建立adapter，並繼承DelegateAdapter.Adapter

比繼承RecyclerView.Adapter多實現二個方法:onCreateLayoutHelper和onBindViewHolderWithOffset

onCreateLayoutHelper方法經過傳給adapter指定的layoutHelper類來設置item的佈局樣式。

onBindViewHolderWithOffset方法跟原有onBindViewHolder相似，只是多了一個參數offsetTotal，做用是指當前item在全部adapter item總和個數的位置。

5.Helper類使用示例

LinearLayoutHelper使用

線性佈局

效果演示：

GridLayoutHelper使用

效果演示：

FixLayoutHelper使用

固定佈局，可以讓item固定在屏幕某個位置

效果演示：

FloatLayoutHelper使用

浮動佈局，可以讓item任意拖動

效果演示

ColumnLayoutHelper使用

列表佈局，1行可顯示多列item。

效果演示：

SingleLayoutHelper使用

單行佈局，可用來單獨顯示廣告輪播圖

效果演示：

OnePlusNLayoutHelper使用

一拖N佈局（N最大爲4）,即OnePlusNLayoutHelper最多隻能有5個item。

效果演示：

StickyLayoutHelper使用

吸附佈局，可將item吸附在頂部 以及 底部，並進行偏移。

效果演示：

StaggeredGridLayoutHelper使用

瀑布流佈局

效果演示

6.helper類內部方法說明

setBgColor：設置item背景顏色

setMargin：設置item外間距

setPadding：設置item內間距

setAspectRatio：設置item寬高比例。

setDeviderHeight：設置間距（LinearLayoutHelper擁有方法）

代碼演示：

LinearLayoutHelper layoutHelper2 = new LinearLayoutHelper(); layoutHelper2.setAspectRatio(4.0f); layoutHelper2.setDividerHeight(10); layoutHelper2.setMargin(10, 30, 10, 10);//左 上 右 下 layoutHelper2.setPadding(10, 30, 10, 10);//左 上 右 下 layoutHelper2.setBgColor(0xFFF5A623)；

• 1
• 2
• 3
• 4
• 5
• 6

效果演示：

setGap：設置item與item之間的距離（（GridLayoutHelper和StaggeredGridLayoutHelper擁有方法）

setHGap: 設置水平方向item與item之間的距離（GridLayoutHelper和StaggeredGridLayoutHelper擁有方法）

setVGap：設置垂直方向item與item之間的距離（GridLayoutHelper和StaggeredGridLayoutHelper擁有方法）

代碼示例：

GridLayoutHelper helper = new GridLayoutHelper(3); helper.setMargin(7, 7, 7, 7); helper.setPadding(10, 10, 10, 10); helper.setBgColor(0xff87e543); helper.setGap(3); helper.setHGap(3); helper.setVGap(3); helper.setAutoExpand(true); MyAdapter myAdapter = new MyAdapter(this, helper, 10); adapters.add(myAdapter);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

效果演示：

setAlignType: 設置擺放位置（FloatLayoutHelper、FixLayoutHelper、ScrollFixLayoutHelper擁有方法）

代碼示例：

layoutHelper.setAlignType(FixLayoutHelper.BOTTOM_RIGHT); //右下 layoutHelper.setAlignType(FixLayoutHelper.BOTTOM_LEFT); //左下 layoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT); //左上 layoutHelper.setAlignType(FixLayoutHelper.TOP_RIGHT); //右上

• 1
• 2
• 3
• 4

setWeights:設置每一個item的比重,權重屬性（ColumLayoutHelper擁有方法）

setColWeights和setRowWeight: 設置行跟內每一個item的比重 ，權重屬性（OnePlusNLayoutHelper擁有方法）

總結

相比RecylerView的自帶的LayoutManager強大不少。在開發中能夠靈活使用多種Helper，拓展布局的多樣性。