前言
V- Layout
是阿里出品的基础 UI 框架,用于快速实现页面的复杂布局,在手机天猫Android
版 内广泛使用
电商图
- 让人激动的是,在上个月
V- Layout
终于在Github上开源!
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
的源码类图如下:UML类图
-
具体类说明
示意图
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 对象并进行绑定
recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
// 创建RecyclerView对象
VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
// 创建VirtualLayoutManager对象
// 同时内部会创建一个LayoutHelperFinder对象,用来后续的LayoutHelper查找
recyclerView.setLayoutManager(layoutManager);
// 将VirtualLayoutManager绑定到recyclerView
步骤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
- 定义:
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全面解析
public class MyAdapter extends DelegateAdapter.Adapter<MyAdapter.MainViewHolder> {
// 比系统自带的RecyclerAdapter需要多重载onCreateLayoutHelper()
@Override
public LayoutHelper onCreateLayoutHelper() {
return layoutHelper;
}
... // 其余写法与复写系统自带的Adapter相同
}
方式2:继承 自 VirtualLayoutAdapter
-
定义:当需要实现复杂需求时, 可以通过继承
VirtualLayoutAdapter
从而实现自定义Adapter -
具体使用
<