背景

Tangram是阿里出品、用于快速實現(xiàn)組合布局的框架模型，在手機天貓 Android & iOS版 內(nèi)廣泛使用。
移動端原生App最大的弱點就是不能像Web端那樣即改即用，需要等到下一個版本發(fā)布之后才能看到效果，而衍生出的如多動態(tài)方案（如RN）在動態(tài)化或性能方面都不太完美。所以產(chǎn)生了用于快速實現(xiàn)組合布局的框架模型Tangram。

Tangram基本理念是粗顆粒度組件化+靈活布局容器，重點關(guān)注高性能（頁面渲染效率&組件回收復(fù)用，跨父節(jié)點組件的高效回收與復(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，可以實現(xiàn)不同布局格式混排。

RecyclerView中正常只有一種布局，如果列表需要使用不同的布局，可以通過設(shè)置不同的ItemType，提供多種ViewHolder實現(xiàn)。而VLayout使用了不同的思路，其Adapter是串聯(lián)自多個繼承RecyclerView.Adapter的Adapter來管理視圖的適配和數(shù)據(jù)，同時實現(xiàn)緩存。

VLayout中具體布局邏輯在LayoutHelper中實現(xiàn)，每個Adapter和LayoutHelper負(fù)責(zé)一個區(qū)域范圍內(nèi)的組件，不同范圍內(nèi)的組件之間如果類型相同，可以在滑動過程中回收復(fù)用。

系統(tǒng)默認(rèn)布局類型

實現(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)行擴容
        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)實現(xiàn)了頁面布局的動態(tài)化，我們可以通過配置json文件自由的布局；但還有一個局限性，json中使用的卡片或者組件的type，必須是在客戶端已經(jīng)實現(xiàn)好的才能使用；如果想要在原來的版本中新增一個type類型的組件，這是沒有辦法做到的，還是只能通過升級客戶端來實現(xiàn)。于是2.0版本出現(xiàn)了虛擬化控件VirtualView。

虛擬化

VirtualView抽象&封裝了Canvas繪制視圖流程，通過使用Canvas來實現(xiàn)UI控件的繪制，虛擬化就是實現(xiàn)依賴于宿主容器而沒有實際View（不同于常見的Button、TextView）。通過XML引用繪制好的UI組件，從而創(chuàng)建出界面模板，客戶端通過解析和加載XML界面模板最終渲染出界面。

虛擬組件

不論是虛擬化組件還是原生組件，都要經(jīng)過計算尺寸階段、布局階段、繪制階段來定義，再加上相同的尺寸計算接口、布局接口、繪制接口，這樣對于宿主容器來說，包裝在內(nèi)部的組件就不分虛擬化還是原生，一視同仁，暴露給外面的接口也是一樣的，只要將宿主容器像普通的 View 一樣添加到的視圖界面上，就可以在后續(xù)的渲染過程中顯示出來。如果虛擬組件使用的越多，View 的個數(shù)就越少，對于系統(tǒng)來說層級越扁平。以示例的組件來說，最終呈現(xiàn)的 View 只有宿主容器和兩個圖片組件，如果將圖片也用虛擬化的方式實現(xiàn)，最終 View 只有一個宿主容器，而界面仍然保持不變。

虛擬組件

優(yōu)化問題及特點

優(yōu)化問題
1.動態(tài)更新UI組件：實現(xiàn)了模板與數(shù)據(jù)分離，使用XML描述視圖然后在
端上綁定動態(tài)下發(fā)的界面模板&數(shù)據(jù)，最終渲染。
2.提高性能：通過使用Canvas繪制減少視圖的層級和個數(shù)來提高布局加載
效率。

特點
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ù)文件是一個XML文件，并附帶一個json數(shù)據(jù)文件，其中的相關(guān)數(shù)據(jù)來源都可以從數(shù)據(jù)json文件中使用表達(dá)式獲取。一個XML就是一個組件，Tangram通過加載這個XML文件即可使用該XML文件所描述的組件，從而實現(xiàn)了動態(tài)新增組件類型的功能。

描述布局文件示例

json文件示例

參考

https://github.com/alibaba/tangram-android
https://www.sohu.com/a/122226581_505818
http://www.itdecent.cn/p/48764ff8449f
http://www.itdecent.cn/p/cd634106f533
http://pingguohe.net/2017/02/28/vlayout-design.html