说一说V-Layout框架的原理和使用场景

blueduck 发布于2年前
0 条问题

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

查看原文: 说一说V-Layout框架的原理和使用场景

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。