背景
Tangram是阿里出品茧痕、用于快速實(shí)現(xiàn)組合布局的框架模型突梦，在手機(jī)天貓 Android & iOS版 內(nèi)廣泛使用。
移動端原生App最大的弱點(diǎn)就是不能像Web端那樣即改即用姆吭，需要等到下一個版本發(fā)布之后才能看到效果已艰，而衍生出的如多動態(tài)方案（如RN）在動態(tài)化或性能方面都不太完美痊末。所以產(chǎn)生了用于快速實(shí)現(xiàn)組合布局的框架模型Tangram。
Tangram基本理念是粗顆粒度組件化+靈活布局容器哩掺，重點(diǎn)關(guān)注高性能（頁面渲染效率&組件回收復(fù)用凿叠，跨父節(jié)點(diǎn)組件的高效回收與復(fù)用）；面向業(yè)務(wù)（組件業(yè)務(wù)化、動態(tài)化盒件，通過布局+組件的形式搭建整個頁面蹬碧，而不是從基本的UI元素搭建頁面）；多終端一致性（一個json描述的布局可以同時在iOS端與Android端使用履恩，且表現(xiàn)一致）锰茉。
整體頁面由卡片組成呢蔫，卡片由組件組成切心。在Tangram中組件模型是抽象出的最小的可復(fù)用單元，承載業(yè)務(wù)邏輯和UI展示片吊，以盡可能小的業(yè)務(wù)單元為顆粒度绽昏，而卡片模型負(fù)責(zé)邏輯，粗顆燎渭梗化全谤，不提供布局細(xì)節(jié)描述，只聲明布局方式爷贫。
本篇會從Tangram布局框架VLayout（Android）认然、VirtualView初探兩方面來進(jìn)行初步的介紹。
VLayout（Android）
思路
針對需要在長列表下做各種形態(tài)來分配不同元素的電商頁首頁漫萄，傳統(tǒng)的復(fù)用容器（ListView或RecyclerView）會出現(xiàn)復(fù)用性降低以及需要處理嵌套滑動的情況卷员，所以VLayout提供了一個基于RecyclerView的自定義LayoutManger，可以實(shí)現(xiàn)不同布局格式混排腾务。
RecyclerView中正常只有一種布局毕骡，如果列表需要使用不同的布局，可以通過設(shè)置不同的ItemType岩瘦，提供多種ViewHolder實(shí)現(xiàn)未巫。而VLayout使用了不同的思路兜辞，其Adapter是串聯(lián)自多個繼承RecyclerView.Adapter的Adapter來管理視圖的適配和數(shù)據(jù)蕉毯，同時實(shí)現(xiàn)緩存提陶。
VLayout中具體布局邏輯在LayoutHelper中實(shí)現(xiàn)丧荐，每個Adapter和LayoutHelper負(fù)責(zé)一個區(qū)域范圍內(nèi)的組件氢妈，不同范圍內(nèi)的組件之間如果類型相同愈污，可以在滑動過程中回收復(fù)用拨拓。
實(shí)現(xiàn)原理
LayoutHelper包含了它負(fù)責(zé)的組件的位置起始區(qū)域狠轻，它們會被傳遞給自定義的LayoutManager苏遥。當(dāng)RecyclerView開始渲染頁面或者滑動時饼拍，它內(nèi)部維護(hù)了一個布局狀態(tài)，獲取當(dāng)前屏幕范圍內(nèi)還有多少區(qū)域是空白的田炭，下一個要加載的View的位置是多少师抄，然后把這些信息告訴LayoutManager去加載View做布局。我們?nèi)缓蠼唤oLayoutHelper去布局教硫，不同的LayoutHelper會按照約定的協(xié)議進(jìn)行進(jìn)一的自定義LayoutManager拿到這個位置之后叨吮，就反向查找對應(yīng)的LayoutHelper去布局辆布。
public void appendGroup(@Nullable List<L> cards) {
if (cards == null || cards.size() == 0)
return;
createSnapshot();
final List<LayoutHelper> helpers = new LinkedList<>(getLayoutHelpers());
//根據(jù)組件大小進(jìn)行擴(kuò)容
mCards.ensureCapacity(mCards.size() + cards.size());
//add helper負(fù)責(zé)布局內(nèi)的組件以及數(shù)據(jù)
helpers.addAll(transformCards(cards, mData, mCards));
setLayoutHelpers(helpers);
diffWithSnapshot();
//刷新展示
notifyDataSetChanged();
}
VirtualView初探
Tangram中已經(jīng)實(shí)現(xiàn)了頁面布局的動態(tài)化，我們可以通過配置json文件自由的布局茶鉴；但還有一個局限性锋玲，json中使用的卡片或者組件的type，必須是在客戶端已經(jīng)實(shí)現(xiàn)好的才能使用涵叮；如果想要在原來的版本中新增一個type類型的組件惭蹂，這是沒有辦法做到的，還是只能通過升級客戶端來實(shí)現(xiàn)割粮。于是2.0版本出現(xiàn)了虛擬化控件VirtualView盾碗。
虛擬化
VirtualView抽象&封裝了Canvas繪制視圖流程，通過使用Canvas來實(shí)現(xiàn)UI控件的繪制舀瓢，虛擬化就是實(shí)現(xiàn)依賴于宿主容器而沒有實(shí)際View（不同于常見的Button廷雅、TextView）。通過XML引用繪制好的UI組件京髓，從而創(chuàng)建出界面模板航缀，客戶端通過解析和加載XML界面模板最終渲染出界面。
虛擬組件
不論是虛擬化組件還是原生組件堰怨，都要經(jīng)過計算尺寸階段芥玉、布局階段、繪制階段來定義诚些，再加上相同的尺寸計算接口飞傀、布局接口、繪制接口诬烹，這樣對于宿主容器來說砸烦，包裝在內(nèi)部的組件就不分虛擬化還是原生，一視同仁绞吁，暴露給外面的接口也是一樣的幢痘，只要將宿主容器像普通的 View 一樣添加到的視圖界面上，就可以在后續(xù)的渲染過程中顯示出來家破。如果虛擬組件使用的越多颜说，View 的個數(shù)就越少，對于系統(tǒng)來說層級越扁平汰聋。以示例的組件來說门粪，最終呈現(xiàn)的 View 只有宿主容器和兩個圖片組件，如果將圖片也用虛擬化的方式實(shí)現(xiàn)烹困，最終 View 只有一個宿主容器玄妈，而界面仍然保持不變。
優(yōu)化問題及特點(diǎn)
優(yōu)化問題
1.動態(tài)更新UI組件：實(shí)現(xiàn)了模板與數(shù)據(jù)分離，使用XML描述視圖然后在
端上綁定動態(tài)下發(fā)的界面模板&數(shù)據(jù)拟蜻，最終渲染绎签。
2.提高性能：通過使用Canvas繪制減少視圖的層級和個數(shù)來提高布局加載
效率。
特點(diǎn)
1.渲染性能高：渲染出來的視圖結(jié)構(gòu)呈現(xiàn)扁平化酝锅；
2.組件熱更新：通過配套XML模板更新sdk诡必；
3.跨平臺：一套XML模板，可以Android搔扁、iOS通用爸舒；
4.兼容性好：支持加載&渲染原生基礎(chǔ)組件；
5.使用方便：內(nèi)置一系列基礎(chǔ)組件可以直接使用阁谆。
VirtualView接入
在Tangram里使用VirtualView的時候碳抄，很多步驟已經(jīng)內(nèi)置到 Tangram 的初始化里了愉老，外部只需要注冊業(yè)務(wù)組件類型场绿、加載模板數(shù)據(jù)、提供事件處理器嫉入。
//Step 1: init tangram
TangramBuilder.init(this, new IInnerImageSetter() {
@Override
public <IMAGE extends ImageView> void doLoadImageUrl(@NonNull IMAGE view,
@Nullable String url) {
Picasso.with(BannerTestActivity.this).load(url).into(view);
}
}, ImageView.class);
//Tangram.switchLog(true);
mMainHandler = new Handler(getMainLooper());
//Step 2: register build=in cells and cards
builder = TangramBuilder.newInnerBuilder(this);
//Step 3: register business cells and cards 注冊組件和卡片
builder.registerCell(1, TestView.class);
builder.registerCell(10, SimpleImgView.class);
builder.registerCell(2, SimpleImgView.class);
builder.registerCell(110,
TestViewHolderCell.class,
new ViewHolderCreator<>(R.layout.item_holder, TestViewHolder.class, TextView.class));
builder.registerCell(199,SingleImageView.class);
builder.registerVirtualView("vvtest");//注冊組件焰盗，只需要提供組件類型名稱即可
//Step 4: new engine
engine = builder.build();
engine.setVirtualViewTemplate(VVTEST.BIN);//加載模板數(shù)據(jù)
//注冊事件處理器
engine.getService(VafContext.class).setImageLoaderAdapter(new IImageLoaderAdapter() {.../}
基礎(chǔ)布局描述實(shí)例
基本布局描術(shù)文件是一個XML文件，并附帶一個json數(shù)據(jù)文件咒林，其中的相關(guān)數(shù)據(jù)來源都可以從數(shù)據(jù)json文件中使用表達(dá)式獲取熬拒。一個XML就是一個組件，Tangram通過加載這個XML文件即可使用該XML文件所描述的組件垫竞，從而實(shí)現(xiàn)了動態(tài)新增組件類型的功能澎粟。
參考
https://github.com/alibaba/tangram-android
https://www.sohu.com/a/122226581_505818
http://www.reibang.com/p/48764ff8449f
http://www.reibang.com/p/cd634106f533
http://pingguohe.net/2017/02/28/vlayout-design.html
