背景
Tangram是阿里出品、用于快速實(shí)現(xiàn)組合布局的框架模型，在手機(jī)天貓 Android & iOS版 內(nèi)廣泛使用。
移動(dòng)端原生App最大的弱點(diǎn)就是不能像Web端那樣即改即用，需要等到下一個(gè)版本發(fā)布之后才能看到效果，而衍生出的如多動(dòng)態(tài)方案（如RN）在動(dòng)態(tài)化或性能方面都不太完美。所以產(chǎn)生了用于快速實(shí)現(xiàn)組合布局的框架模型Tangram。
Tangram基本理念是粗顆粒度組件化+靈活布局容器，重點(diǎn)關(guān)注高性能（頁(yè)面渲染效率&組件回收復(fù)用，跨父節(jié)點(diǎn)組件的高效回收與復(fù)用）；面向業(yè)務(wù)（組件業(yè)務(wù)化、動(dòng)態(tài)化，通過布局+組件的形式搭建整個(gè)頁(yè)面，而不是從基本的UI元素搭建頁(yè)面）；多終端一致性（一個(gè)json描述的布局可以同時(shí)在iOS端與Android端使用，且表現(xiàn)一致）。
整體頁(yè)面由卡片組成，卡片由組件組成。在Tangram中組件模型是抽象出的最小的可復(fù)用單元，承載業(yè)務(wù)邏輯和UI展示，以盡可能小的業(yè)務(wù)單元為顆粒度，而卡片模型負(fù)責(zé)邏輯，粗顆粒化，不提供布局細(xì)節(jié)描述，只聲明布局方式。
本篇會(huì)從Tangram布局框架VLayout（Android）、VirtualView初探兩方面來進(jìn)行初步的介紹。
VLayout（Android）
思路
針對(duì)需要在長(zhǎng)列表下做各種形態(tài)來分配不同元素的電商頁(yè)首頁(yè)，傳統(tǒng)的復(fù)用容器（ListView或RecyclerView）會(huì)出現(xiàn)復(fù)用性降低以及需要處理嵌套滑動(dòng)的情況，所以VLayout提供了一個(gè)基于RecyclerView的自定義LayoutManger，可以實(shí)現(xiàn)不同布局格式混排。
RecyclerView中正常只有一種布局，如果列表需要使用不同的布局，可以通過設(shè)置不同的ItemType，提供多種ViewHolder實(shí)現(xiàn)。而VLayout使用了不同的思路，其Adapter是串聯(lián)自多個(gè)繼承RecyclerView.Adapter的Adapter來管理視圖的適配和數(shù)據(jù)，同時(shí)實(shí)現(xiàn)緩存。
VLayout中具體布局邏輯在LayoutHelper中實(shí)現(xiàn)，每個(gè)Adapter和LayoutHelper負(fù)責(zé)一個(gè)區(qū)域范圍內(nèi)的組件，不同范圍內(nèi)的組件之間如果類型相同，可以在滑動(dòng)過程中回收復(fù)用。
實(shí)現(xiàn)原理
LayoutHelper包含了它負(fù)責(zé)的組件的位置起始區(qū)域，它們會(huì)被傳遞給自定義的LayoutManager。當(dāng)RecyclerView開始渲染頁(yè)面或者滑動(dòng)時(shí)，它內(nèi)部維護(hù)了一個(gè)布局狀態(tài)，獲取當(dāng)前屏幕范圍內(nèi)還有多少區(qū)域是空白的，下一個(gè)要加載的View的位置是多少，然后把這些信息告訴LayoutManager去加載View做布局。我們?nèi)缓蠼唤oLayoutHelper去布局，不同的LayoutHelper會(huì)按照約定的協(xié)議進(jìn)行進(jìn)一的自定義LayoutManager拿到這個(gè)位置之后，就反向查找對(duì)應(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)了頁(yè)面布局的動(dòng)態(tài)化，我們可以通過配置json文件自由的布局；但還有一個(gè)局限性，json中使用的卡片或者組件的type，必須是在客戶端已經(jīng)實(shí)現(xiàn)好的才能使用；如果想要在原來的版本中新增一個(gè)type類型的組件，這是沒有辦法做到的，還是只能通過升級(jí)客戶端來實(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)過計(jì)算尺寸階段、布局階段、繪制階段來定義，再加上相同的尺寸計(jì)算接口、布局接口、繪制接口，這樣對(duì)于宿主容器來說，包裝在內(nèi)部的組件就不分虛擬化還是原生，一視同仁，暴露給外面的接口也是一樣的，只要將宿主容器像普通的 View 一樣添加到的視圖界面上，就可以在后續(xù)的渲染過程中顯示出來。如果虛擬組件使用的越多，View 的個(gè)數(shù)就越少，對(duì)于系統(tǒng)來說層級(jí)越扁平。以示例的組件來說，最終呈現(xiàn)的 View 只有宿主容器和兩個(gè)圖片組件，如果將圖片也用虛擬化的方式實(shí)現(xiàn)，最終 View 只有一個(gè)宿主容器，而界面仍然保持不變。
優(yōu)化問題及特點(diǎn)
優(yōu)化問題
1.動(dòng)態(tài)更新UI組件：實(shí)現(xiàn)了模板與數(shù)據(jù)分離，使用XML描述視圖然后在
端上綁定動(dòng)態(tài)下發(fā)的界面模板&數(shù)據(jù)，最終渲染。
2.提高性能：通過使用Canvas繪制減少視圖的層級(jí)和個(gè)數(shù)來提高布局加載
效率。
特點(diǎn)
1.渲染性能高：渲染出來的視圖結(jié)構(gòu)呈現(xiàn)扁平化；
2.組件熱更新：通過配套XML模板更新sdk；
3.跨平臺(tái)：一套XML模板，可以Android、iOS通用；
4.兼容性好：支持加載&渲染原生基礎(chǔ)組件；
5.使用方便：內(nèi)置一系列基礎(chǔ)組件可以直接使用。
VirtualView接入
在Tangram里使用VirtualView的時(shí)候，很多步驟已經(jīng)內(nèi)置到 Tangram 的初始化里了，外部只需要注冊(cè)業(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 注冊(cè)組件和卡片
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");//注冊(cè)組件，只需要提供組件類型名稱即可
//Step 4: new engine
engine = builder.build();
engine.setVirtualViewTemplate(VVTEST.BIN);//加載模板數(shù)據(jù)
//注冊(cè)事件處理器
engine.getService(VafContext.class).setImageLoaderAdapter(new IImageLoaderAdapter() {.../}
基礎(chǔ)布局描述實(shí)例
基本布局描術(shù)文件是一個(gè)XML文件，并附帶一個(gè)json數(shù)據(jù)文件，其中的相關(guān)數(shù)據(jù)來源都可以從數(shù)據(jù)json文件中使用表達(dá)式獲取。一個(gè)XML就是一個(gè)組件，Tangram通過加載這個(gè)XML文件即可使用該XML文件所描述的組件，從而實(shí)現(xiàn)了動(dòng)態(tài)新增組件類型的功能。
參考
https://github.com/alibaba/tangram-android
https://www.sohu.com/a/122226581_505818
http://www.lxweimin.com/p/48764ff8449f
http://www.lxweimin.com/p/cd634106f533
http://pingguohe.net/2017/02/28/vlayout-design.html
