Android Virtualview:淘寶、天貓 又一個動態化、高效能的UI框架力作

Carson_Ho發表於2018-02-24

Android Virtualview:淘寶、天貓 又一個動態化、高效能的UI框架力作


前言

  • 淘寶、天貓一直致力於解決 頁面動態化的問題
  • 在2017年的4月釋出了v1.0解決方案:Tangram模型 及其對應的 Androidvlayout,該解決方案在手機淘寶、天貓 Android版 內廣泛使用

電商圖

若還不瞭解Tangram模型 和 vlayout,具體請看文章

  1. Android Tangram模型:連淘寶、天貓都在用的UI框架模型你一定要懂
  2. Android開源庫V - Layout:淘寶、天貓都在用的UI框架,趕緊用起來吧!
  • 在同年的12月,阿里團隊對此作了重大更新:釋出了Tangram2.0版本,主要是補充了AndroidVirtualView,也廣泛應用於淘寶、天貓客戶端

    示意圖

  • 今天,我將帶大家全面瞭解Tangram 2.0版本的新成員:Virtualview

Virtualview的Github地址


目錄

示意圖


1. 為什麼要向 Tangram模型 加入 VirtualView

即 為什麼要更新 Tangram2.0版本

  • 結論
  1. 提升元件動態性,實現動態更新
  2. 提升了元件的渲染效能
  • 具體描述
    示意圖

而上述解決方案的承載方案,則是 VirtualView

VirtualView的Github地址


2. VirtualView介紹

  • 簡介

    示意圖

  • 特點

示意圖


3. 實現原理

3.1 核心思路

根據Tangram v1.0中 出現的問題:UI元件無法動態更新 & 載入效能低,VirtualView的具體解決方案如下

示意圖

3.2 實現方案

  • 根據其原理,VirtualView的實現方案是:虛擬化開發
  • 虛擬化開發的本質:

示意圖

之所以稱為虛擬化,是因為Canvas繪製的檢視不存在一一對應的實體View

3.3 總結

從上可知,VirtualView的創新在於:

  1. 通過 XML 模板實現元件的動態性
  2. 通過 虛擬化技術(本質 = Canvas)開發元件,提升了元件的渲染效能

4. 工作流程

  • 在瞭解了VirtualView的本質原理 & 整體架構後
  • 下面,我將開始講解VirtualView的工作流程

4.1 流程概述

  • 根據上述方案,VirtualView的工作流程分為3大部分:建立UI元件、建立介面模板 & 客戶端載入介面
  • 具體如下

示意圖

4.2 流程詳細分析

下面我將對每個流程的原理 & 過程詳細分析

流程1:建立UI元件

  • 具體描述 根據業務需求,建立所需要的UI元件

示意圖

有2種建立方式:使用框架內建(封裝好)的UI元件 / 自定義

1.1 使用框架內建(封裝好)的UI元件

  • 即 可直接使用封裝好的UI元件而不需自身建立
  • 具體如下(含元件基礎屬性)

注: a. 自定義元件應繼承基礎元件 b. 系統封裝UI元件的原理 同 “自定義UI元件,下面將具體講解

示意圖

###1.2 自定義UI元件 若框架內建的UI元件無法滿足需求,則開發者可自定義UI元件

  • 自定義流程 VirtualView抽象 & 封裝了 Canvas繪製檢視的流程,使得開發者只需按指定的介面協議實現1個元件的繪製邏輯:測量、繪製 & 繪製,即能實現在宿主容器通過 Canvas 直接繪製 UI內容,從而建立虛擬化元件

即 上述則是虛擬化建立元件的過程

  • 具體過程
  1. 實現基礎元件需遵循一個介面的規範:定義了渲染過程中所需的3個流程:測量尺寸階段、佈局階段 & 繪製階段

a. 定義這3個階段是為了符合Android系統的使用,即View繪製的三大流程:measure過程、layout過程、draw過程。若不瞭解,請看文章 (2)自定義View Measure過程 - 最易懂的自定義View原理系列 (3)自定義View Layout過程 - 最易懂的自定義View原理系列 (4)自定義View Draw過程- 最易懂的自定義View原理系列 b. 在 iOS 平臺下也需按照本方案的規範去處理

  1. 這3個過程具體如下:(與Android View繪製的三大流程相似)
    示意圖

不論是虛擬 / 原生元件,都採用上述模型 & 流程定義 a. 對於虛擬元件:在這些介面裡實現相關邏輯 / 通過封裝原生元件實現 b. 對於原生元件:在這些介面的實現裡 呼叫原生元件的對應邏輯 結論:可混合使用虛擬控制元件 & 實體控制元件

至此,對於宿主的佈局容器來說,包裝在內部的元件不分虛擬化 / 原生,暴露在外的介面相同,只要將宿主容器像普通的 View 一樣新增到的檢視介面上,就可在後續的渲染過程中顯示出來。

  • 特別注意 此處即可解釋 為何渲染效能高:因虛擬元件使用得越多,View個數就越少,即層級越扁平

如下所示的元件: a. 普通的原生開發:2層(宿主容器層 + 圖片元件層) b. 虛擬化開發:採用虛擬化開發後,最終呈現的 View層級只有一個宿主容器(實際上,圖片元件被繪製在Canvas裡了)

示意圖

1.3 總結

建立UI元件有2種方式:

  1. 直接使用框架內建的UI元件
  2. 自定義元件:通過封裝好的Canvas流程,按照指定介面協議實現繪製邏輯 / 封裝原生元件

流程2:建立介面模板 & 下發

  • 該步驟包括多個步驟:建立XML介面模板、編譯成二進位制資料、下發等
  • 具體如下

示意圖

2.1 建立XML介面模板

  • 具體描述 根據業務需求,使用XML編寫模板

注:需使用專門的工具virtualview_tools編寫,其 使用說明見文章virtualview_tools使用指南

  • 此方式類似:Android 平臺上通過 XML 搭建介面的方式
  • 區別在於:
    1. 脫離了平臺限制,即一套模板可同時在AndroidiOS上使用
    2. 執行時動態載入 XML 模板資料,動態更新介面結構
// 引用的元件通過流程1中獲取
// 動態資料通過表示式從 JSON 資料裡獲取

<?xml version="1.0" encoding="utf-8"?>
<VHLayout
        flag="flag_exposure|flag_clickable"
        orientation="H"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
    <NImage
            id="1"
            src="${logoUrl}"
            layoutMarginLeft="8"
            layoutMarginRight="8"
            layoutMarginTop="8"
            layoutMarginBottom="8"
            layoutWidth="32"
            layoutHeight="32"/>
    <NText
            id="2"
            text="${title}"
            layoutGravity="v_center"
            gravity="${style.text-align}"
            textSize="${style.font-size}"
            textColor="${style.color}"
            layoutWidth="match_parent"
            layoutHeight="wrap_content"/>
</VHLayout>


// JSON資料
{
  "style": {
    "text-align": "h_center",
    "font-size": "20",
    "color": "#FF5000"
  },
  "title": "超高性 99.9% 的使用者覺得很快",
  "logoUrl": "https://gw.alicdn.com/tfs/TB1yGIdkb_I8KJjy1XaXXbsxpXa-72-72.png"
}


複製程式碼

2.2 編譯成二進位制資料

2.2.1 具體描述

使用專門的工具virtualview_tools將編寫好的XML介面模板編譯成二進位制資料,編譯後的檔案的字尾名是.out

示意圖

使用說明見文章virtualview_tools使用指南

注:為什麼通過 XML 編寫的業務元件 不直接在客戶端裡執行使用,而是先進行一次二進位制序列化操作?

示意圖

2.2.2 二進位制檔案描述

借鑑了 Android 系統編譯模板檔案的思路,格式 & 描述具體如下

示意圖

2.2.2 編譯流程

  • 一個業務元件對應著一份 XML 模板 = 單獨編譯成二進位制資料

編譯資料 含除內建字串資源外 它依賴的所有字串、表示式資源

  • 編譯規則 編譯時,模板裡涉及的資源包括顏色值、各種列舉、基礎元件的型別等都會被序列化對映成整數;不能序列化成整數的資源如字串,就分配一個索引 Id 指向它 & 將它們單獨儲存到一塊區域裡
  1. 原因:當模板線上釋出、字串有變動的情況下,能夠不影響原來的字串資源索引;否則若按照帶有順序約定的協議來分配資源索引,很容易在模板變更時 同一索引值在變更前後指向的資源內容是不一樣,影響穩定性和動態性
  2. 序列化的規則如下:

示意圖

  • 編譯流程

示意圖

2.3 模板資料 下發到客戶端

即 客戶端獲取編譯後的二進位制資料

獲取有2種路徑:

  1. 直接將編譯後的模板打包到客戶端裡,開發者通過程式碼載入
  2. 框架先發布到模板管理後臺,客戶端線上更新到模板資料(即實現了動態更新)

流程3:客戶端載入介面

  • 客戶端獲取到編譯後的介面模板後,進行載入 & 解析,最終渲染出檢視介面
  • 步驟流程如下圖

示意圖

3.1 解析模板資料

  • 具體描述 客戶端獲得編譯後的模板資料(二進位制資料)後,立即 進行解析
  1. 如校驗版本號,合法性,讀取頭資訊等
  2. 客戶端渲染元件 從解析 編譯後的模板資料開始
  • 流程解析 解析過程 = 二進位制編譯的逆過程

但解析流程只負責提取原始資料 & 組織格式,並無構建出元件物件

示意圖

3.2 載入元件檢視

  • 具體描述 當使用者傳入一個模板名稱,框架內部就會根據名稱去之前解析XML介面模板的資料裡找到 與此名稱匹配的模板資料,然後載入 & 建立出真正的元件

  • 流程解析

示意圖

3.3 繫結業務資料

  • 具體描述 開發者在元件屬性裡可通過 表示式 指定使用哪個資料欄位,即將業務資料繫結到元件上

因業務資料是動態的,故從模板建立的元件不含業務資料

  • 流程解析 在建立元件的過程中,當解析屬性碰到表示式時,會將該屬性的key、表示式值、所屬的基礎元件等關係儲存起來,等真實資料到達後再通過 表示式裡的定義 訪問資料 & 將真實值設定給元件的屬性,即將真實的資料繫結到基礎元件的屬性上
  1. 通過表示式解析、訪問得到的屬性值,會快取起來,當原始資料引用不變時,每次訪問都會獲取到快取值
  2. 此處接收的資料是 JSON 格式

示意圖

4.3 總結

示意圖


5. 整體架構設計

  • 根據上述方案 & 工作流程,VirtualView的整體框架分為2部分:核心功能模組(5個模組) + 配套工具 & 服務。具體如下:

示意圖

  • 下面,我將對每部分進行詳細分析

模組1:載入模組

  • 示意圖

    示意圖

  • 說明

    示意圖

模組2:構造模組

  • 示意圖

    示意圖

  • 說明

    示意圖

此處詳細分析 基礎元件模型 & 虛擬元件

a. 基礎元件模型

含基礎元件 & 基礎屬性,具體如下

注:自定義的基礎元件應繼承基礎定義 & 擴充套件

示意圖

模組3:輔助模組

  • 示意圖

    示意圖

  • 說明

    示意圖

  • 特別注意:引入使用者資料繫結的表示式的原因 開發業務元件時,基礎屬性 / 樣式不能在模板裡直接寫死,而是需從資料裡動態獲取

/**
  * 訪問資料屬性的表示式
  * 語法說明
  *       a. 以 “${” 開頭、以 “}” 結束
  *       b. 對於Map,通過“.”操作符訪問
  *       c. 對於 Array  /  List,通過 “[]” 操作符訪問
  * 示例如下
  */

  ${benefitImgUrl}${data[0].benefitImgUrl};

/**
  * 條件表示式
  * 作用:根據資料中某個欄位 來設定值的屬性
  * 語法說明
  *       a. 以 “@{” 開頭、以 “}” 結束,
  *       b. 中間部分 = 表示式的具體內容:  條件表示式 ? 結果表示式[1] : 結果表示式[2]
  *           注:1. 當條件表示式成立的時,使用結果表示式[1],否則使用結果表示式[2]
  *              2. 條件表示式支援布林型別、字串型別、JSONObject、JSONArray
  *       c. 對於 Array  /  List,通過 “[]” 操作符訪問
  * 示例如下
  */
  @{${logoUrl} ? visible : invisible };

複製程式碼

模組4:管理模組

  • 示意圖

    示意圖

  • 說明

    示意圖

模組5:更新模組

  • 示意圖

    示意圖

  • 說明

    示意圖

配套使用的工具 & 服務

  • 示意圖

    示意圖

  • 說明

    示意圖

總結

示意圖


6. 使用教程

  • 根據上述工作流程,其使用流程同樣分為3步:建立UI元件、建立介面模板 & 客戶端載入介面
  • 下面,我將根據上述3個步驟進行詳細解析

6.1 建立UI元件

從一文可知,建立UI元件有2種方式:

  1. 直接使用框架內建的UI元件
  2. 自定義元件:通過封裝好的Canvas流程,按照指定介面協議實現繪製邏輯 / 封裝原生元件

此處為方便講解,直接使用框架內建的UI元件

6.2 建立介面模板

此步驟包括:建立XML介面模板、編譯成二進位制資料、模板下發

6.2.1 建立XML介面模板

根據業務需求,使用XML編寫模板

注:需使用專門的工具virtualview_tools編寫,其 使用說明見文章virtualview_tools使用指南

  • 示例佈局
/**
  * 使用說明:
  *     1. 控制元件引用:通過XML引用控制元件為方便講解,XML內引用的VHLayout、NImage、NText 都是框架內建的控制元件:2個橫向線性佈局;每個佈局 = 1個圖 + 1個文字
  *     2. 屬性設定:可寫死 / 通過表示式繫結一個資料欄位(JSON)引用
  * 佈局說明:
  *     1. 引用的控制元件VHLayout、NImage、NText等都是框架內建的控制元件
  *     2. 整個佈局 = 2個橫向線性佈局,每個佈局 = 1個圖 + 1個文字
  */

<?xml version="1.0" encoding="utf-8"?>
<VHLayout
        flag="flag_exposure|flag_clickable"
        orientation="V"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
    <VHLayout
            flag="flag_exposure|flag_clickable"
            orientation="H"
            layoutWidth="match_parent"
            layoutHeight="wrap_content">
        <NImage
                id="1"
                src="${logoUrl}"
                layoutMarginLeft="8"
                layoutMarginRight="8"
                layoutMarginTop="8"
                layoutMarginBottom="8"
                layoutWidth="32"
                layoutHeight="32"/>
        <NText
                id="2"
                text="${title}"
                layoutGravity="v_center"
                gravity="${style.text-align}"
                textSize="${style.font-size}"
                textColor="${style.color}"
                layoutWidth="match_parent"
                layoutHeight="wrap_content"/>
    </VHLayout>
    <VHLayout
            flag="flag_exposure|flag_clickable"
            orientation="H"
            layoutWidth="match_parent"
            layoutHeight="wrap_content">
        <VImage
                id="1"
                src="${logoUrl}"
                layoutMarginLeft="8"
                layoutMarginRight="8"
                layoutMarginTop="8"
                layoutMarginBottom="8"
                layoutWidth="32"
                layoutHeight="32"/>
        <VText
                id="2"
                text="${title}"
                layoutGravity="v_center"
                gravity="${style.text-align}"
                textSize="${style.font-size}"
                textColor="${style.color}"
                layoutWidth="match_parent"
                layoutHeight="wrap_content"/>
    </VHLayout>
</VHLayout>


複製程式碼
  • 屬性資料來源:JSON
{
  "style": {
    "text-align": "h_center",
    "font-size": "20",
    "color": "#FF5000"
  },
  "title": "超高性 99.9% 的使用者覺得很快",
  "logoUrl": "https://gw.alicdn.com/tfs/TB1yGIdkb_I8KJjy1XaXXbsxpXa-72-72.png"
}

複製程式碼

6.2.2 編譯成二進位制資料

使用專門的工具virtualview_tools將編寫好的XML介面模板編譯成二進位制資料,編譯後的檔案的字尾名是.out

示意圖

使用說明見文章virtualview_tools使用指南

6.2.3 模板下發到客戶端

有2種路徑:

  1. 直接將編譯後的模板打包到客戶端裡,開發者通過程式碼載入
  2. 框架先發布到模板管理後臺,客戶端線上更新到模板資料(即實現了動態更新)

此處選擇方式1

6.3 客戶端解析 & 載入介面模板

具體使用如下

// 1. 初始化圖片載入器
    VafContext.loadImageLoader(mContext.getApplicationContext());

// 2. 初始化 ViewManager 物件
    ViewManager viewManager = vafContext.getViewManager();
    viewManager.init(mContext.getApplicationContext());

// 3. 載入編譯後的模板資料(二進位制檔案)
     // 方式1:直接載入二進位制位元組陣列(推薦使用)
     viewManager.loadBinBufferSync(TMALLCOMPONENT1.BIN);
     viewManager.loadBinBufferSync(TMALLCOMPONENT2.BIN);
     // 方式2:通過二進位制檔案路徑載入
     viewManager.loadBinFileSync(TMALLCOMPONENT1_PATH);
     viewManager.loadBinFileSync(TMALLCOMPONENT2_PATH);

// 4. 註冊事件處理器,如常用的點選、曝光處理
    vafContext.getEventManager().register(EventManager.TYPE_Click, new IEventProcessor() {

        @Override
        public boolean process(EventData data) {
            //handle here
            return true;
        }
    });
    vafContext.getEventManager().register(EventManager.TYPE_Exposure, new IEventProcessor() {

        @Override
        public boolean process(EventData data) {
            //handle here
            return true;
        }
    });

// 5. 通過元件名引數 name 生成元件例項
    View container = vafContext.getContainerService().getContainer(name, true);
    mLinearLayout.addView(container);

// 6. 為元件繫結真實的資料
    // 假若您在元件模板裡寫了資料繫結的表示式
    IContainer iContainer = (IContainer)container;
    JSONObject json = getJSONDataFromAsset(data);
    if (json != null) {
        iContainer.getVirtualView().setVData(json);
    }

複製程式碼
  • 測試結果

下圖展示的“超高性 99.9% 的使用者覺得很快”即為VirtualView的展示效果

示意圖

至此,關於VirtualView的使用講解完畢

更加詳細使用,請參考文章VirtualView的使用文件


7.VirtualView 的意義

對於個人的看法,VirtualView的補充其重大意義在於2個方面:對於 阿里Tangram 模型 & 整個原生開發技術(Android、iOS)

7.1 對於 Tangram 模型

VirtualView的解決的問題 在於:

  1. 實現元件的動態性:可在端上繫結動態下發的 XML 介面模板 & 資料
  2. 提升了元件的渲染效能:通過 虛擬化技術(本質 = Canvas)開發元件

7.2 對於整個原生開發技術(Android、iOS)

VirtualView的創新在於:解決了 原生開發中一直被詬病 而 常被叫喧會被 前端、RN技術取代的問題

  1. 開發週期長 & 成本大 VirtualView 採用XML描述檢視,XML介面模板具備跨平臺使用的特性

  2. 無法熱更新 VirtualView可在端上繫結動態下發的 XML 介面模板 & 資料,從而實現熱更新

  • 相比於前幾年產品開發的一味求快,如今網際網路行業發展暫緩、使用者需求基本滿足的情況下,更加 講求的是使用者體驗

  • 所以,實際上對比於 前端、RN技術在客戶端的實現,VirtualView的優勢或許會更明顯:在解決了原生開發效率慢、週期長的前提下,保證了原生開發的優勢:效能好

7.3 呼籲

  • 雖然VirtualView 推動了原生開發的發展,但目前來說,VirtualView 還是存在不少問題
  • 希望大家能一起在Github - alibaba - VirtualView 上進行完善,共同為開源事業做貢獻吧!

8. 總結

  • 看完本文,你應該非常瞭解阿里出品的VirtualView 的使用 & 原理
  • 關於Tangram的使用,建議看文章:
  1. Android Tangram模型:連淘寶、天貓都在用的UI框架模型你一定要懂
  2. Android開源庫V - Layout:淘寶、天貓都在用的UI框架,趕緊用起來吧!

請幫頂!因為你的鼓勵是我寫作的最大動力!

參考文章: juejin.im/post/5a2a71… tangram.pingguohe.net/docs/virtua…


歡迎關注carson_ho的微信公眾號

示意圖

示意圖

相關文章