Android | Tangram 动态页面之路(二)介绍
本系列文章主要介绍天猫团队开源的Tangram框架的使用心得和原理,由于Tangram
底层基于vlayout,所以也会简单讲解,该系列将按以下大纲进行介绍:
Tangram 和 vlayout 介绍
Tangram 的使用
vlayout 原理
Tangram 原理
Tangram 二次封装
本文主要对Tangram
和vlayout
的一些概念进行介绍。
vlayout
因为Tangram
底层基于vlayout
,所以需要先了解下vlayout
。
首先,在 view 上的性能消耗通常有以下几种:
布局嵌套导致多重 measure/layout
可以使用ConstraintLayout
或RelativeLayout
减少布局嵌套
view 的频繁创建与销毁
列表使用RecyclerView
来复用布局
xml 转换成 view 解析过程产生的内存和耗时
如果列表的样式不多,使用RecyclerView
的复用机制可以避免大量的 xml 解析;如果样式比较多比如商品图墙等,则有必要把 xml 解析提前到编译期,在编译期根据注解将 xml 转成对应的 view 类,直接使用 view 类创建 viewHolder,当然这么做会势必会增大包体积,需要克制使用
然后,vlayout
主要解决前两点,做到复杂布局下扁平和细粒度复用。
常规的RecyclerView
使用:
其中LayoutManager
有 3 种,
在面对比较复杂的布局时,如 1 拖 3 样式,
通常只能在 1 拖 3 外边套上一层 layout,然后使用LinearLayoutManager
实现。为了解决这个问题,
vlayout 自定义了一个 VirtualLayoutManager,它继承自 LinearLayoutManager;引入了 LayoutHelper 的概念,它负责具体的布局逻辑;VirtualLayoutManager 管理了一系列 LayoutHelper,将具体的布局能力交给 LayoutHelper 来完成,每一种 LayoutHelper 提供一种布局方式,框架内置提供了几种常用的布局类型,包括:网格布局、线性布局、瀑布流布局、悬浮布局、吸边布局等。这样实现了混合布局的能力,并且支持扩展外部,注册新的 LayoutHelper,实现特殊的布局方式。
大致意思是这样,
在vlayout
Demo 中,使用代码是这样,
可以看到,随着布局样式越来越多,代码量也会越来越多,于是,用json模板描述页面
的Tangram
诞生了。
Tangram
把vlayout
直接给到业务方使用,这样的接入成本是不能接受的,于是需要屏蔽掉vlayout
细节,让业务方用的更舒服。至于为何要引入json模板
,需求背景里已经做过介绍。
Tangram
的意思是七巧板,旨在用七巧板的方式拼凑出各式各样的页面。他抽象了两个概念,Card
和Cell
,Card
用于描述布局方式,Cell
用于描述在这个布局方式下,用什么样的 view 去展示,比如Tangram
Demo 里的data.json
,
这些布局方式Card
,在Tangram
内部会进行注册,
布局方式确定好后,需要具体的 View 来展示,也就是Cell
,比如单图SingleImageView
,纯文本RatioTextView
等等,这些Cell
则需手动注册,如果是偏业务的Cell
,可以在业务层按需注册,如果是更抽象的通用Cell
,则应该下沉到基础库里全局注册,更抽象的Cell
意味着需要提供更为通用的配置属性,能提供给更多不同的业务方使用。Cell
的手动注册如下,
Card
和Cell
都注册好了,通过TangramEngine
将数据设置进去,跟进去可以看到,Tangram
把布局能力交给了vlayout
,
Tangram
把 json 模板中描述的一个个Card
解析成了所对应的vlayout
的布局方式LayoutHelper
,
值得注意的是,Tangram
Demo 里的 json 模板都是包含了业务数据的,这么做可能是为了剔除掉网络请求的代码,方便开源学习,而在实际业务中不太可能把数据绑定在模板里,这样模板会很臃肿,我们要做的是,用模板描述页面结构和数据源
,而非数据本身,如,
既然 json 模板可以由后端下发,也就意味着,我们可以让运营同学通过后台拖动模块搭建页面,选择资源位设置数据源,然后生成 json 模板下发,开发同学从此就可以解放双手,做更有趣(更有挑战)的事情了。
不过这都是后话了,对Tangram
和vlayout
的介绍就到这里了,下篇文章将对 Tangram 的使用进行更详细的讲解,点关注,不迷路~
参考文章
版权声明: 本文为 InfoQ 作者【哈利迪】的原创文章。
原文链接:【http://xie.infoq.cn/article/de3f045f7390b848fa70f0c82】。文章转载请联系作者。
评论 (2 条评论)