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

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

1. 需求背景
2. Tangram 和 vlayout 介绍
3. Tangram 的使用
4. vlayout 原理
5. Tangram 原理
6. 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 使用：

// 设置适配器，管理数据源和 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诞生了。

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