Android-Tangram动态页面之路（一）需求背景

本系列文章主要介绍天猫团队开源的Tangram框架的使用心得和原理，因为Tangram底层基于vlayout，因此也会简单讲解，该系列将按如下大纲进行介绍：

1. 需求背景

   页面模板的多维度定投（分时、分人群等）、数据资源位聚合、RecyclerView的异构和扁平。

2. Tangram和vlayout介绍

3. Tangram的使用

4. vlayout原理

5. Tangram原理

6. Tangram二次封装

本文先主要介绍下需求背景。

需求背景

首先，笔者在工做中（生产环境）使用的并不是Tangram，而是公司内部的框架（未开源），不过原理都大同小异，本系列文章也不会精细到每一行源码，不求齐全，只求用尽量小的篇幅讲明白。

页面定投

你们都知道，电商行业喜欢造节，从双11双12，到如今的32一、61八、921等，几乎一年四季都会有营销活动，这些活动能带动GMV持续造血。一场大促，一般会分预热期和正式期。预热期用来造势，着重透出主会场、活动等内容；正式期则在接近尾声时，着重透出倒计时内容加强紧迫感（再不剁手就没机会了），以下图：

能够看出，从预热期到正式期，着重透出的内容不一样，结构也不一样。也就是说，须要足够灵活的页面模板，知足不一样时间，不一样人群（如多人多面）展现不一样结构的页面。固然这点h5也能作到，可是h5体验要差于native，通常用于临时活动页或高度灵活的页面。像商城首页，商品详情等相对稳定的页面，对灵活性的要求并不是无限制的，只要各模块足够抽象、细粒度，native也是能够知足平常和大促需求的。

数据聚合

如前边的商城首页，数据来源也是多渠道的，好比头部的banner、各种入口、类目模块，数据来源于一个个不一样的资源位，由不一样的人进行配置，而尾部的商品流数据则来源于推荐引擎，以下图，

客户端不可能去发起多个请求拉取不一样资源位的数据，因此就有了聚合层接口，客户端经过一个聚合接口，获取聚合数据，

商品流不属于资源位数据，因此独立成一个接口。至此，咱们会发现，页面模板不只要描述页面结构，还要描述各模块所需的数据来源。大概以下所示：

{
 "template":[  {  "component":"banner", //轮播图模块  "data":"makeup:banner" //数据来源于聚合接口，key为banner  },  {  "component":"category", //类目模块  "data":"makeup:category" //数据来源于聚合接口，key为category  },  {  "component":"goods", //商品流模块  "data":"request:recommend" //数据来源于request，key为recommend  }  ] } 复制代码

RecyclerView的异构和扁平

要实现前边商城首页的复杂布局，一般的思路是定义各类itemType，而后根据itemType来解析不一样的布局文件，这么作每每须要进行一层嵌套，由于RecyclerView自带的LayoutManager不支持如此异构的布局，效果以下图左，

而使用vlayout，能够免去这层嵌套，如上图右，让子view成为RecyclerView的直接子view，具体咱们运行vlayout的官方Demo，而后使用AS的Tools - Layout inspector功能查看view树，可见图中的39和43两个小模块都是RecyclerView的直接子view，有着平级关系，

这就是用RecyclerView实现异构和扁平化的基本概念，vlayout经过自定义LayoutManager进行了实现。关于异构和扁平，更详细的分析可见参考文章。

参考文章

• 苹果核 - RecyclerView 里的自定义 LayoutManager 的一种设计与实现

本文使用 mdnice 排版