Android-Tangram动态页面之路二介绍

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

需求背景
Tangram 和 vlayout 介绍
Tangram 的使用
vlayout 原理
Tangram 原理
Tangram 二次封装

本文主要对 Tangram 和vlayout的一些概念进行介绍。

因为 Tangram 底层基于vlayout，所以需要先了解下vlayout。

首先，在 view 上的性能消耗通常有以下几种：

布局嵌套导致多重 measure/layout

可以使用 ConstraintLayout 或RelativeLayout减少布局嵌套

view 的频繁创建与销毁

列表使用 RecyclerView 来复用布局

xml 转换成 view 解析过程产生的内存和耗时

如果列表的样式不多，使用 RecyclerView 的复用机制可以避免大量的 xml 解析；如果样式比较多比如商品图墙等，则有必要把 xml 解析提前到编译期，在编译期根据注解将 xml 转成对应的 view 类，直接使用 view 类创建 viewHolder，当然这么做会势必会增大包体积，需要克制使用

然后，vlayout主要解决前两点，做到复杂布局下扁平和细粒度复用。

常规的 RecyclerView 使用：

// 设置适配器，管理数据源和 view
recyclerView.setAdapter()
// 设置 LayoutManager，指定布局方式
recyclerView.setLayoutManager()

其中 LayoutManager 有 3 种，

LinearLayoutManager extends LayoutManager  // 线性
GridLayoutManager extends LinearLayoutManager  // 网格
StaggeredGridLayoutManager extends LayoutManager  // 瀑布流

在面对比较复杂的布局时，如 1 拖 3 样式，

通常只能在 1 拖 3 外边套上一层 layout，然后使用 LinearLayoutManager 实现。为了解决这个问题，

vlayout 自定义了一个 VirtualLayoutManager，它继承自 LinearLayoutManager；引入了 LayoutHelper 的概念，它负责具体的布局逻辑；VirtualLayoutManager 管理了一系列 LayoutHelper，将具体的布局能力交给 LayoutHelper 来完成，每一种 LayoutHelper 提供一种布局方式，框架内置提供了几种常用的布局类型，包括：网格布局、线性布局、瀑布流布局、悬浮布局、吸边布局等。这样实现了混合布局的能力，并且支持扩展外部，注册新的 LayoutHelper，实现特殊的布局方式。

引用自苹果核 – Tangram 的基础 —— vlayout（Android）

大致意思是这样，

在vlayoutDemo 中，使用代码是这样，

//VLayoutActivity.java

// 子适配器集合
List<DelegateAdapter.Adapter> adapters = new LinkedList<>();

// 创建子适配器，需指定其布局方式
SubAdapter subAdapter1 = new SubAdapter(new LinearLayoutHelper());
adapters.add(subAdapter1);
SubAdapter subAdapter2 = new SubAdapter(new ColumnLayoutHelper());
adapters.add(subAdapter2);

// 把子适配器集合设置给代理适配器
delegateAdapter.setAdapters(adapters);

recyclerView.setAdapter(delegateAdapter);

可以看到，随着布局样式越来越多，代码量也会越来越多，于是，用 json 模板描述页面 的Tangram诞生了。

把 vlayout 直接给到业务方使用，这样的接入成本是不能接受的，于是需要屏蔽掉 vlayout 细节，让业务方用的更舒服。至于为何要引入json 模板，需求背景里已经做过介绍。

Tangram的意思是七巧板，旨在用七巧板的方式拼凑出各式各样的页面。他抽象了两个概念，Card和 Cell，Card 用于描述布局方式，Cell用于描述在这个布局方式下，用什么样的 view 去展示，比如TangramDemo 里的data.json，

[
    {
        "type": "container-oneColumn",  //Card，布局方式
        "items": [
            {
                "imgUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
                "arrowImgUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
                "title": "标题 1",
                "type": "vvtest"  //Cell，具体展示的 view
            },
            {
                "imgUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
                "arrowImgUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
                "title": "标题 2",
                "type": "vvtest"
            }
        ]
    }
]

这些布局方式 Card，在Tangram 内部会进行注册，

//TangramBuilder.java
void installDefaultRegistry(final DefaultResolverRegistry registry) {
    // built-in cards
    registry.registerCard(TYPE_CONTAINER_BANNER, BannerCard.class);
    registry.registerCard(TYPE_SINGLE_COLUMN_COMPACT, SingleColumnCard.class);
    //...
}

布局方式确定好后，需要具体的 View 来展示，也就是 Cell，比如单图SingleImageView，纯文本RatioTextView 等等，这些 Cell 则需手动注册，如果是偏业务的 Cell，可以在业务层按需注册，如果是更抽象的通用Cell，则应该下沉到基础库里全局注册，更抽象的Cell 意味着需要提供更为通用的配置属性，能提供给更多不同的业务方使用。Cell的手动注册如下，

//TangramActivity.java
void onCreate(Bundle savedInstanceState) {
    //Step 3: register business cells and cards
    builder.registerCell(1, TestView.class);
    builder.registerCell(2, SimpleImgView.class);
    
    // 绑定 recyclerView
    engine.bindView(recyclerView);
    
    JSONArray data = new JSONArray(new String(getAssertsFile(this, "data.json")));
    // 设置 json 数据
    engine.setData(data);
}

Card和 Cell 都注册好了，通过 TangramEngine 将数据设置进去，跟进去可以看到，Tangram把布局能力交给了vlayout，

//GroupBasicAdapter extends VirtualLayoutAdapter
void setData(List<L> cards, boolean silence) {
    // 把 Card 转成 LayoutHelper
    setLayoutHelpers(transformCards(cards, mData, mCards));
}

Tangram把 json 模板中描述的一个个 Card 解析成了所对应的 vlayout 的布局方式LayoutHelper，

值得注意的是，TangramDemo 里的 json 模板都是包含了业务数据的，这么做可能是为了剔除掉网络请求的代码，方便开源学习，而在实际业务中不太可能把数据绑定在模板里，这样模板会很臃肿，我们要做的是，用模板描述页面结构和数据源，而非数据本身，如，

{
    "template":[
        {
            "card": "container-banner",  // 轮播图模块，使用 banner 布局方式
            "cell":"imageView",  // 具体的 view 就是一张图片
            "data":"makeup:banner"  // 数据来源于聚合接口，key 为 banner
        },
        {
            "card": "container-fiveColumn",  // 类目模块，使用 Column 布局方式
            "cell":"imageAndTextView",  // 具体的 view 是上图下文本
            "data":"makeup:category"  // 数据来源于聚合接口，key 为 category
        },
        {
            "card": "container-waterfall",  // 商品流模块，使用 Staggered 布局方式
            "cell":"goodsView",  // 具体的 view 是商品样式
            "data":"request:recommend"  // 数据来源于 request，key 为 recommend
        }
    ]
}

既然 json 模板可以由后端下发，也就意味着，我们可以让运营同学通过后台拖动模块搭建页面，选择资源位设置数据源，然后生成 json 模板下发，开发同学从此就可以解放双手，做 ~~更有趣~~（更有挑战）的事情了。

不过这都是后话了，对 Tangram 和vlayout的介绍就到这里了，下篇文章将对 Tangram 的使用进行更详细的讲解，点关注，不迷路~

苹果核 – Tangram 的基础 —— vlayout（Android）
苹果核 – 页面动态化的基础 —— Tangram

vlayout

Tangram

参考文章