前言
V- Layout
是阿里出品的基础 UI 框架,用于快速实现页面的复杂布局,在手机天猫 Android
版 内广泛使用
![电商图](https://i-blog.csdnimg.cn/blog_migrate/c8961422c07cd53ffaef46c728ab70cd.webp?x-image-process=image/format,png)
- 在五一假期我对
V- Layout
进行了详细分析,我将献上一份 V- Layout
的使用攻略 & 源码分析,希望你们会喜欢。
目录
![目录](https://i-blog.csdnimg.cn/blog_migrate/463066f63daa3fec7407aec026e5ffe3.webp?x-image-process=image/format,png)
1. 为什么要使用 V - Layout
在讲解 `V - Layout` 前,我们先来搞懂一个问题:为什么要使用 `V - Layout`
1.1 背景
但是,很多时候我们需要在一个长列表下做多种类型的布局来分配各种元素,,特别是电商平台首页等页面,布局元素结构更加复杂多样。如下图:
![电商图](https://i-blog.csdnimg.cn/blog_migrate/c8961422c07cd53ffaef46c728ab70cd.webp?x-image-process=image/format,png)
此时的解决方案有所变化:不采用子View
的复用,只采用一个主要的复用容器(如ListView
或 RecyclerView
+LinearLayoutManager
),然后在其中使用嵌套方式直接用各个组件进行拼接,减少了复用的能力
1.2 问题
这种做法还是会损失Android应用的性能。
1.3 解决方案
- 通过自定义
LayoutManager
管理所有的布局类型 - 即阿里出品的基础 UI 框架项目
VirtualLayout
就是采用该方式来解决上述问题
2. 简介
- 定义:
VirtualLayout
是阿里出品的基础 UI 框架项目 - 作用:快速实现复杂的布局格式的混排
3. 应用场景
- 复杂的布局格式混排,如:浮动布局、栏格布局、通栏布局、一拖N布局、瀑布流布局,还可以组合使用这些布局
- 具体场景是:如电商平台首页、活动页等等
V - Layout 目前已在手机天猫 & 淘宝 Android 版内广泛使用
4. 原理解析
V - Layout
的本质原理是:通过自定义一个VirtualLayoutManager
(继承自 LayoutManager),用于管理一系列LayoutHelper
,将具体的布局能力交给LayoutHelper
来完成,从而 快速实现组合布局 的需求。
- 每个
LayoutHelper
负责 页面某一个范围内的布局 V - Layout
默认实现了10种默认布局:(对应同名的LayoutHelper)
![布局类型](https://i-blog.csdnimg.cn/blog_migrate/090f91adac6539784cffaccd8473462b.webp?x-image-process=image/format,png)
4.1 源码类说明
V - Layout
的源码类图如下:
![UML类图](https://i-blog.csdnimg.cn/blog_migrate/5817cfc3fb467f0103cf495fd4292bff.webp?x-image-process=image/format,png)
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)
![布局类型](https://i-blog.csdnimg.cn/blog_migrate/090f91adac6539784cffaccd8473462b.webp?x-image-process=image/format,png)
下面会进行详细介绍。
- 特别注意:
- 每一种
LayoutHelper
负责布局一批组件范围内的组件,不同组件范围内的组件之间,如果类型相同,可以在滑动过程中回收复用。因此回收粒度比较细,且可以跨布局类型复用。 - 支持扩展外部:即注册新的
LayoutHelper
,实现特殊的布局方式。下面会详细说明
介绍完类之后,我将详细分析 V - Layout
的工作流程。
4.2 工作流程
V - Layout
的工作流程分为 初始化 & 布局流程。如下图:
![工作流程](https://i-blog.csdnimg.cn/blog_migrate/569fe4f63a5d127952d7f01d5538c506.webp?x-image-process=image/format,png)
4.2.1 初始化
- 在使用
V - layout
快速实现复杂布局前,需要先做一系列的初始化工作。
初始化流程与使用普通的 RecyclerView + LayoutManager 初始化流程基本一致:Vlayout的使用者
![初始化流程](https://i-blog.csdnimg.cn/blog_migrate/6488f477daf44db839b64f04a20c2e78.webp?x-image-process=image/format,png)
此处的初始化 实际上 就是 使用者在使用 V - layout
时需要做的初始化工作,在下面的实例讲解我会进行更加详细的说明。
4.2.2 具体布局流程
- 当完成初始化工作后,每当用户刚打开页面第一次渲染布局 或 用户滑动页面时,都会进行一次布局流程
- 布局流程的本质是:自定义
VirtualLayoutManager
持续获取页面状态,并通过LayoutHelperFinder
找到对应的LayoutHelper
从而实现对应的布局逻辑,从而快速实现组合布局 的需求 - 具体流程如下
![布局流程](https://i-blog.csdnimg.cn/blog_migrate/7cc65f1a5d7337823eeaa77a02e0b469.webp?x-image-process=image/format,png)
总结
下面用一张图总结 V - Layout
的原理 & 工作流程
![原理 & 工作流程](https://i-blog.csdnimg.cn/blog_migrate/172fa403a6cc0280e44519c48ae0fa09.webp?x-image-process=image/format,png)
在讲完原理后,接下来我将如何使用 V - Layout
。
5. 使用步骤
V - Layout
的使用其实就是上面说的初始化工作- 使用步骤如下:
![使用步骤](https://i-blog.csdnimg.cn/blog_migrate/b3f06d07d9b791d8f9b3c897b77cfde0.webp?x-image-process=image/format,png)
下面我将对每个步骤进行详细说明。
步骤1:创建RecyclerView & VirtualLayoutManager 对象并进行绑定
recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
步骤2:设置回收复用池大小
如果一屏内相同类型的 View 个数比较多,需要设置一个合适的大小,防止来回滚动时重新创建 View)
// 设置组件复用回收池
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool()
recyclerView.setRecycledViewPool(viewPool)
viewPool.setMaxRecycledViews(0, 10)
步骤3:设置Adapter
设置 V - Layout的Adapter有两种方式:
- 方式1:继承 自
DelegateAdapter
- 方式2:继承 自
VirtualLayoutAdapter
下面会进行详细说明:
方式1:继承 自 DelegateAdapter
public class MyAdapter extends DelegateAdapter.Adapter<MyAdapter.MainViewHolder> {
@Override
public LayoutHelper onCreateLayoutHelper() {
return layoutHelper;
}
...
}
方式2:继承 自 VirtualLayoutAdapter
public class MyAdapter extends VirtualLayoutAdapter {
...
}
步骤4:根据数据列表,创建对应的LayoutHelper
- 系统以封装好以下布局类型(对应同名的LayoutHelper)
![布局类型](https://i-blog.csdnimg.cn/blog_migrate/090f91adac6539784cffaccd8473462b.webp?x-image-process=image/format,png)
1. 线性布局(LinearLayoutHelper)
![示意图](https://i-blog.csdnimg.cn/blog_migrate/e0dbc89e8a911079e41b926f7a5d0a3d.webp?x-image-process=image/format,png)
/**
设置线性布局
*/
LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper();
linearLayoutHelper.setItemCount(4);
linearLayoutHelper.setPadding(10,10,10,10);
linearLayoutHelper.setMargin(10,10,10,10);
linearLayoutHelper.setBgColor(Color.GRAY);
linearLayoutHelper.setAspectRatio(6);
linearLayoutHelper.setDividerHeight(1);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
1. 所有布局的共有属性说明:
a. setItemCount属性
- 作用:设置整个布局里的Item数量
如设置的Item总数如与Adapter的getItemCount()方法返回的数量不同,会取决于后者
public void setItemCount(int Count)
// 具体使用
linearLayoutHelper.setItemCount(4);
b. Adding & Margin属性
-
定义:都是边距的含义,但二者边距的定义不同:
Padding
:是 LayoutHelper
的子元素相对 LayoutHelper
边缘的距离;Margin
:是 LayoutHelper
边缘相对父控件(即RecyclerView
)的距离。具体如下图:
![示意图](https://i-blog.csdnimg.cn/blog_migrate/c00c83582b81e65ae77b9d379125a33b.webp?x-image-process=image/format,png)
-
具体使用
public void setPadding(int leftPadding, int topPadding, int rightPadding, int bottomPadding)
public void setMargin(int leftMargin, int topMargin, int rightMargin, int bottomMargin)
// 具体使用
linearLayoutHelper.setPadding(10,10,10,10);
linearLayoutHelper.setMargin(10,10,10,10);
c. bgColor属性
public void setBgColor(int bgColor)
// 具体使用
linearLayoutHelper.setBgColor(Color.YELLOW);
d. aspectRatio属性
![示意图](https://i-blog.csdnimg.cn/blog_migrate/e653d3a98a05ca0a044a7766ad25af36.webp?x-image-process=image/format,png)
public void setAspectRatio(float aspectRatio);
((VirutalLayoutManager.LayoutParams) layoutParams).mAspectRatio
linearLayoutHelper.setAspectRatio(6);
2. LinearLayoutHelper布局的特有属性说明
a. dividerHeight属性
- 作用:设置每行Item之间的距离
设置的间隔会与RecyclerView的addItemDecoration()添加的间隔叠加
public void setDividerHeight(int dividerHeight)
// 具体使用
linearLayoutHelper.setDividerHeight(1);
2. 网格布局(GridLayout)
![示意图](https://i-blog.csdnimg.cn/blog_migrate/360b478ed35bdbd0c08ce5584fe3a280.webp?x-image-process=image/format,png)
/**
设置Grid布局
*/
GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(3);
gridLayoutHelper.setItemCount(6);
gridLayoutHelper.setPadding(20, 20, 20, 20);
gridLayoutHelper.setMargin(20, 20, 20, 20);
gridLayoutHelper.setBgColor(Color.GRAY);
gridLayoutHelper.setAspectRatio(6);
gridLayoutHelper.setWeights(new float[]{40, 30, 30});
gridLayoutHelper.setVGap(20);
gridLayoutHelper.setHGap(20);
gridLayoutHelper.setAutoExpand(false);
gridLayoutHelper.setSpanCount(3);
gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
if (position > 7 ) {
return 3;
}else {
return 2;
}
}
});
- 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,不足的部分默认平分剩余的空间。
public void setWeights(float[] weights)
// 具体使用
gridLayoutHelper.setWeights(new float[]{40, 30, 30});
b. vGap、hGap属性
- 作用:分别控制子元素之间的垂直间距 和 水平间距。
![示意图](https://i-blog.csdnimg.cn/blog_migrate/e073c458cd687f504dcb7b9b78590d8c.webp?x-image-process=image/format,png)
public void setHGap(int hGap)
public void setVGap(int vGap)
// 具体使用
gridLayoutHelper.setVGap(20);
gridLayoutHelper.setHGap(20);
c. spanCount、spanSizeLookup属性
- 作用:
spanCount
:设置每行多少个网格spanSizeLookup
:设置每个 Item
占用多少个网格(默认= 1)
![示意图](https://i-blog.csdnimg.cn/blog_migrate/b7cd5161bbdd9155fde9b910a3643b53.webp?x-image-process=image/format,png)
public void setSpanCount(int spanCount)
public void setSpanSizeLookup(SpanSizeLookup spanSizeLookup)
// 具体使用
gridLayoutHelper.setSpanCount(5);
gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
if (position > 7 ) {
return 3;
}else {
return 2;
}
}
});
- 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,那么视图的总宽度会填满可用区域;
- 否则会在屏幕上留空白区域。
public void setAutoExpand(boolean isAutoExpand)
// 具体使用
gridLayoutHelper.setAutoExpand(false);
3. 固定布局(FixLayoutHelper)
- 布局说明:布局里的Item 固定位置
固定在屏幕某个位置,且不可拖拽 & 不随页面滚动而滚动。如下图:(左上角)
/**
设置固定布局
*/
FixLayoutHelper fixLayoutHelper = new FixLayoutHelper(FixLayoutHelper.TOP_LEFT,40,100);
fixLayoutHelper.setItemCount(1);
fixLayoutHelper.setPadding(20, 20, 20, 20);
fixLayoutHelper.setMargin(20, 20, 20, 20);
fixLayoutHelper.setBgColor(Color.GRAY);
fixLayoutHelper.setAspectRatio(6);
fixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);
fixLayoutHelper.setX(30);
fixLayoutHelper.setY(50);
- 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:基准位置的纵向偏移量
- 作用对象:FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper的属性
public void setAlignType(int alignType)
public void setX(int x)
public void setY(int y)
// 具体使用
fixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);
fixLayoutHelper.setX(30);
fixLayoutHelper.setY(50);
- 布局说明:布局里的Item 固定位置
- 固定在屏幕某个位置,且不可拖拽 & 不随页面滚动而滚动(继承自固定布局(FixLayoutHelper))
- 唯一不同的是,可以自由设置该Item什么时候显示(到顶部显示 / 到底部显示),可如下图:(左上角)
- 需求场景:到页面底部显示”一键到顶部“的按钮功能
以下示意图为:滑动到底部,布局才在左上角显示
/**
设置可选固定布局
*/
ScrollFixLayoutHelper scrollFixLayoutHelper = new ScrollFixLayoutHelper(ScrollFixLayoutHelper.TOP_RIGHT,0,0);
scrollFixLayoutHelper.setItemCount(1);
scrollFixLayoutHelper.setPadding(20, 20, 20, 20);
scrollFixLayoutHelper.setMargin(20, 20, 20, 20);
scrollFixLayoutHelper.setBgColor(Color.GRAY);
scrollFixLayoutHelper.setAspectRatio(6);
scrollFixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);
scrollFixLayoutHelper.setX(30);
scrollFixLayoutHelper.setY(50);
scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);
- 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
a. AlignType、x、y属性
- 作用:
- alignType:吸边基准类型
共有4个取值:TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,具体请看下面示意图
- x:基准位置的横向偏移量
- y:基准位置的纵向偏移量
public void setAlignType(int alignType)
public void setX(int x)
public void setY(int y)
// 具体使用
ScrollFixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);
ScrollFixLayoutHelper.setX(30);
ScrollFixLayoutHelper.setY(50);
b. ShowType属性
-
作用:设置Item的显示模式
共有三种显示模式
- SHOW_ALWAYS:永远显示(即效果同固定布局)
- SHOW_ON_ENTER:默认不显示视图,当页面滚动到该视图位置时才显示;
- SHOW_ON_LEAVE:默认不显示视图,当页面滚出该视图位置时才显示
-
具体使用
public void setShowType(int showType)
// 具体使用
scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);
5. 浮动布局(FloatLayoutHelper)
- 布局说明:布局里的Item只有一个
- 可随意拖动,但最终会被吸边到两侧
- 不随页面滚动而移动
/**
设置浮动布局
*/
FloatLayoutHelper floatLayoutHelper = new FloatLayoutHelper();
floatLayoutHelper.setItemCount(1);
floatLayoutHelper.setPadding(20, 20, 20, 20);
floatLayoutHelper.setMargin(20, 20, 20, 20);
floatLayoutHelper.setBgColor(Color.GRAY);
floatLayoutHelper.setAspectRatio(6);
floatLayoutHelper.setDefaultLocation(300,300);
- 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)
可理解为只有一行的线性布局
/**
设置栏格布局
*/
ColumnLayoutHelper columnLayoutHelper = new ColumnLayoutHelper();
columnLayoutHelper.setItemCount(3);
columnLayoutHelper.setPadding(20, 20, 20, 20);
columnLayoutHelper.setMargin(20, 20, 20, 20);
columnLayoutHelper.setBgColor(Color.GRAY);
columnLayoutHelper.setAspectRatio(6);
columnLayoutHelper.setWeights(new float[]{30, 40, 30});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
7. 通栏布局(SingleLayoutHelper)
![示意图](https://i-blog.csdnimg.cn/blog_migrate/e16e6a223d9d5fcf3cd51b3a3c193077.webp?x-image-process=image/format,png)
/**
设置通栏布局
*/
SingleLayoutHelper singleLayoutHelper = new SingleLayoutHelper();
singleLayoutHelper.setItemCount(3);
singleLayoutHelper.setPadding(20, 20, 20, 20);
singleLayoutHelper.setMargin(20, 20, 20, 20);
singleLayoutHelper.setBgColor(Color.GRAY);
singleLayoutHelper.setAspectRatio(6);
8. 一拖N布局 (OnePlusNLayoutHelper)
- 布局说明:将布局分为不同比例,最多是1拖4。具体如下图
![示意图1](https://i-blog.csdnimg.cn/blog_migrate/0c4fda02fc968c9b342ebe5a51c57c9e.webp?x-image-process=image/format,png)
![示意图2](https://i-blog.csdnimg.cn/blog_migrate/85766904257f82c9d57e3fc2311db44a.webp?x-image-process=image/format,png)
/**
设置1拖N布局
*/
OnePlusNLayoutHelper onePlusNLayoutHelper = new OnePlusNLayoutHelper(5);
onePlusNLayoutHelper.setItemCount(3);
onePlusNLayoutHelper.setPadding(20, 20, 20, 20);
onePlusNLayoutHelper.setMargin(20, 20, 20, 20);
onePlusNLayoutHelper.setBgColor(Color.GRAY);
onePlusNLayoutHelper.setAspectRatio(3);
9. 吸边布局(StickyLayoutHelper)
-
布局说明:布局只有一个Item,显示逻辑如下:
- 当它包含的组件处于屏幕可见范围内时,像正常的组件一样随页面滚动而滚动
- 当组件将要被滑出屏幕返回的时候,可以吸到屏幕的顶部或者底部,实现一种吸住的效果
-
示意图(吸在顶部)
![示意图](https://i-blog.csdnimg.cn/blog_migrate/475fa81ab9a3402d14f3727d1d105e55.webp?x-image-process=image/format,png)
/**
设置吸边布局
*/
StickyLayoutHelper stickyLayoutHelper = new StickyLayoutHelper();
stickyLayoutHelper.setItemCount(3);
stickyLayoutHelper.setPadding(20, 20, 20, 20);
stickyLayoutHelper.setMargin(20, 20, 20, 20);
stickyLayoutHelper.setBgColor(Color.GRAY);
stickyLayoutHelper.setAspectRatio(3);
stickyLayoutHelper.setStickyStart(true);
stickyLayoutHelper.setOffset(100);
Adapter_StickyLayout = new MyAdapter(this, stickyLayoutHelper,1, listItem) {
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
if (position == 0) {
holder.Text.setText("Stick");
}
}
};
adapters.add(Adapter_StickyLayout) ;
- 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
:设置吸边的偏移量
-
具体使用
public void setStickyStart(boolean stickyStart)
public void setOffset(int offset)
// 具体使用
stickyLayoutHelper.setStickyStart(true);
stickyLayoutHelper.setOffset(100);
10. 瀑布流布局(StaggeredGridLayoutHelper)
- 布局说明:以网格的形式进行布局。与网格布局类似,区别在于:
- 网格布局每栏的Item高度是相等的;
- 瀑布流布局每栏的Item高度是可以不相等的。
![示意图](https://i-blog.csdnimg.cn/blog_migrate/2bdfa9ee8486c0e61be5939f1d9f585e.webp?x-image-process=image/format,png)
/**
设置瀑布流布局
*/
StaggeredGridLayoutHelper staggeredGridLayoutHelper = new StaggeredGridLayoutHelper();
staggeredGridLayoutHelper.setItemCount(20);
staggeredGridLayoutHelper.setPadding(20, 20, 20, 20);
staggeredGridLayoutHelper.setMargin(20, 20, 20, 20);
staggeredGridLayoutHelper.setBgColor(Color.GRAY);
staggeredGridLayoutHelper.setAspectRatio(3);
staggeredGridLayoutHelper.setLane(3);
staggeredGridLayoutHelper.setHGap(20);
staggeredGridLayoutHelper.setVGap(15);
- 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:Adapter继承 自 DelegateAdapter -->
List<DelegateAdapter.Adapter> adapters = new LinkedList<>();
MyAdapter Adapter_linearLayout = new MyAdapter(this, linearLayoutHelper,ListItem);
MyAdapter Adapter_gridLayoutHelper = new MyAdapter(this, gridLayoutHelper,ListItem);
adapters.add(Adapter_linearLayout ) ;
adapters.add(Adapter_gridLayoutHelper ) ;
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager);
delegateAdapter.setAdapters(adapters);
recyclerView.setAdapter(delegateAdapter);
<-- 方式2:Adapter继承 自 VirtualLayoutAdapter -->
List<LayoutHelper> helpers = new LinkedList<>();
helpers.add(Adapter_linearLayout );
helpers.add(Adapter_gridLayoutHelper ) ;
MyAdapter myAdapter = new MyAdapter(layoutManager);
myAdapter.setLayoutHelpers(helpers);
recycler.setAdapter(myAdapter);
- 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
加入依赖
compile ('com.alibaba.android:vlayout:1.0.3@aar') {
transitive = true
}
步骤2:定义主 xml
布局
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="scut.carson_ho.v_layoutusage.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal" />
</RelativeLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
步骤3:定义 RecyclerView
每个子元素( Item
)的xml布局
item.xml
此处定义的 Item
布局是常用的 上字下图
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="New Text"
android:id="@+id/Item" />
<ImageView
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/Image"/>
</LinearLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
步骤4:设置Adapter
MyAdapter.java
public class MyAdapter extends DelegateAdapter.Adapter<MyAdapter.MainViewHolder> {
private ArrayList<HashMap<String, Object>> listItem;
private Context context;
private LayoutHelper layoutHelper;
private RecyclerView.LayoutParams layoutParams;
private int count = 0;
private MyItemClickListener myItemClickListener;
public MyAdapter(Context context, LayoutHelper layoutHelper, int count, ArrayList<HashMap<String, Object>> listItem) {
this(context, layoutHelper, count, new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300), listItem);
}
public MyAdapter(Context context, LayoutHelper layoutHelper, int count, @NonNull RecyclerView.LayoutParams layoutParams, ArrayList<HashMap<String, Object>> listItem) {
this.context = context;
this.layoutHelper = layoutHelper;
this.count = count;
this.layoutParams = layoutParams;
this.listItem = listItem;
}
@Override
public MainViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new MainViewHolder(LayoutInflater.from(context).inflate(R.layout.item, parent, false));
}
@Override
public LayoutHelper onCreateLayoutHelper() {
return layoutHelper;
}
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
holder.Text.setText((String) listItem.get(position).get("ItemTitle"));
holder.image.setImageResource((Integer) listItem.get(position).get("ItemImage"));
}
@Override
public int getItemCount() {
return count;
}
public void setOnItemClickListener(MyItemClickListener listener) {
myItemClickListener = listener;
}
class MainViewHolder extends RecyclerView.ViewHolder {
public TextView Text;
public ImageView image;
public MainViewHolder(View root) {
super(root);
Text = (TextView) root.findViewById(R.id.Item);
image = (ImageView) root.findViewById(R.id.Image);
root.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (myItemClickListener != null)
myItemClickListener.onItemClick(v, getPosition());
}
}
);
}
public TextView getText() {
return Text;
}
}
}
- 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
public class MainActivity extends AppCompatActivity implements MyItemClickListener {
RecyclerView recyclerView;
MyAdapter Adapter_linearLayout,Adapter_GridLayout,Adapter_FixLayout,Adapter_ScrollFixLayout
,Adapter_FloatLayout,Adapter_ColumnLayout,Adapter_SingleLayout,Adapter_onePlusNLayout,
Adapter_StickyLayout,Adapter_StaggeredGridLayout;
private ArrayList<HashMap<String, Object>> listItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/**
* 步骤1:创建RecyclerView & VirtualLayoutManager 对象并进行绑定
* */
recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
/**
* 步骤2:设置组件复用回收池
* */
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);
viewPool.setMaxRecycledViews(0, 10);
/**
* 步骤3:设置需要存放的数据
* */
listItem = new ArrayList<HashMap<String, Object>>();
for (int i = 0; i < 100; i++) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("ItemTitle", "第" + i + "行");
map.put("ItemImage", R.mipmap.ic_launcher);
listItem.add(map);
}
/**
* 步骤4:根据数据列表,创建对应的LayoutHelper
* */
/**
设置线性布局
*/
LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper();
linearLayoutHelper.setItemCount(4);
linearLayoutHelper.setPadding(20, 20, 20, 20);
linearLayoutHelper.setMargin(20, 20, 20, 20);
linearLayoutHelper.setAspectRatio(6);
linearLayoutHelper.setDividerHeight(10);
linearLayoutHelper.setMarginBottom(100);
Adapter_linearLayout = new MyAdapter(this, linearLayoutHelper, 4, listItem) {
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
if (position == 0) {
holder.Text.setText("Linear");
}
if (position < 2) {
holder.itemView.setBackgroundColor(0x66cc0000 + (position - 6) * 128);
} else if (position % 2 == 0) {
holder.itemView.setBackgroundColor(0xaa22ff22);
} else {
holder.itemView.setBackgroundColor(0xccff22ff);
}
}
};
Adapter_linearLayout.setOnItemClickListener(this);
....
/**
*步骤5:将生成的LayoutHelper 交给Adapter,并绑定到RecyclerView 对象
**/
List<DelegateAdapter.Adapter> adapters = new LinkedList<>();
adapters.add(Adapter_linearLayout) ;
adapters.add(Adapter_StickyLayout) ;
adapters.add(Adapter_ScrollFixLayout) ;
adapters.add(Adapter_GridLayout) ;
adapters.add(Adapter_FixLayout) ;
adapters.add(Adapter_FloatLayout) ;
adapters.add(Adapter_ColumnLayout) ;
adapters.add(Adapter_SingleLayout) ;
adapters.add(Adapter_onePlusNLayout) ;
adapters.add(Adapter_StaggeredGridLayout) ;
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager);
delegateAdapter.setAdapters(adapters);
recyclerView.setAdapter(delegateAdapter);
/**
*步骤6:Item之间的间隔
**/
recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
outRect.set(5, 5, 5, 5);
}
});
}
/**
*步骤7:实现Item点击事件
**/
@Override
public void onItemClick(View view, int postion) {
System.out.println("点击了第"+postion+"行");
Toast.makeText(this, (String) listItem.get(postion).get("ItemTitle"), Toast.LENGTH_SHORT).show();
}
}
- 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
效果图
![总效果图](https://i-blog.csdnimg.cn/blog_migrate/1d4f5cf83953592ca27c9848d4e231e4.webp?x-image-process=image/format,png)
源码地址
Carson_Ho的Github地址:V - Layout
参考文档:
https://github.com/alibaba/vlayout
http://pingguohe.net/2017/02/28/vlayout-design.html
7. 总结
请帮顶或评论点赞!因为你的鼓励是我写作的最大动力!