前言

• 淘寶、天貓一直致力於解決 頁面動態化的問題

• 在2017年的4月釋出了v1.0解決方案：Tangram模型 及其對應的 Android庫 vlayout，該解決方案在手機淘寶、天貓 Android版 內廣泛使用

電商圖

• 在同年的12月，阿里團隊對此作了重大更新：釋出了 Tangram2.0 版本，主要是補充了 Android 庫 VirtualView，也廣泛應用於淘寶、天貓客戶端

  示意圖

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

Virtualview的Github地址：

https://github.com/alibaba/Virtualview-Android

目錄

示意圖

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

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

• 結論

1. 提升元件動態性，實現動態更新

2. 提升了元件的渲染效能

• 具體描述

  

  示意圖

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

VirtualView的Github地址：

https://github.com/alibaba/Virtualview-Android

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 平臺下也需按照本方案的規範去處理

2. 這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. 脫離了平臺限制，即一套模板可同時在Android、iOS上使用

2. 執行時動態載入 XML 模板資料，動態更新介面結構

// 引用的元件通過流程1中獲取

// 動態資料通過表示式從 JSON 資料裡獲取



"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"/>







// 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介面模板的資料裡找到 與此名稱匹配的模板資料，然後載入 & 創建出真正的元件

• 流程解析

相關推薦