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

1次阅读

共计 1522 个字符，预计需要花费 4 分钟才能阅读完成。

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

需求背景
页面模板的多维度定投（分时、分人群等）、数据资源位聚合、RecyclerView 的异构和扁平。
Tangram 和 vlayout 介绍
Tangram 的使用
vlayout 原理
Tangram 原理
Tangram 二次封装

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

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

大家都知道，电商行业喜欢造节，从双 11 双 12，到现在的 321、618、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
        }
    ]
}

要实现前边商城首页的复杂布局，通常的思路是定义各种 itemType，然后根据itemType 来解析不同的布局文件，这么做往往需要进行一层嵌套，因为 RecyclerView 自带的 LayoutManager 不支持如此异构的布局，效果如下图左，

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

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