前言
- 淘寶、天貓一直致力於解決 頁面動態化的問題
- 在2017年的4月釋出了
v1.0解決方案：Tangram模型 及其對應的Android庫vlayout，該解決方案在手機淘寶、天貓Android版 內廣泛使用
若還不瞭解
Tangram模型 和vlayout，具體請看文章
-
在同年的12月，阿里團隊對此作了重大更新：釋出了
Tangram2.0版本，主要是補充了Android庫VirtualView，也廣泛應用於淘寶、天貓客戶端
-
今天，我將帶大家全面瞭解
Tangram 2.0版本的新成員：Virtualview
目錄
1. 為什麼要向 Tangram模型 加入 VirtualView
即 為什麼要更新
Tangram2.0版本
- 結論
- 提升元件動態性，實現動態更新
- 提升了元件的渲染效能
- 具體描述
而上述解決方案的承載方案，則是 VirtualView
2. VirtualView介紹
-
簡介
-
特點
3. 實現原理
3.1 核心思路
根據Tangram v1.0中 出現的問題：UI元件無法動態更新 & 載入效能低，VirtualView的具體解決方案如下
3.2 實現方案
- 根據其原理，
VirtualView的實現方案是：虛擬化開發 - 虛擬化開發的本質：
之所以稱為虛擬化，是因為
Canvas繪製的檢視不存在一一對應的實體View
3.3 總結
從上可知，VirtualView的創新在於：
- 通過
XML模板實現元件的動態性 - 通過 虛擬化技術（本質 =
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內容，從而建立虛擬化元件
即 上述則是虛擬化建立元件的過程
- 具體過程
- 實現基礎元件需遵循一個介面的規範：定義了渲染過程中所需的3個流程：測量尺寸階段、佈局階段 & 繪製階段
a. 定義這3個階段是為了符合
Android系統的使用，即View繪製的三大流程：measure過程、layout過程、draw過程。若不瞭解，請看文章 （2）自定義View Measure過程 - 最易懂的自定義View原理系列 （3）自定義View Layout過程 - 最易懂的自定義View原理系列 （4）自定義View Draw過程- 最易懂的自定義View原理系列 b. 在iOS平臺下也需按照本方案的規範去處理
- 這3個過程具體如下：（與
Android View繪製的三大流程相似）
不論是虛擬 / 原生元件，都採用上述模型 & 流程定義 a. 對於虛擬元件：在這些介面裡實現相關邏輯 / 通過封裝原生元件實現 b. 對於原生元件：在這些介面的實現裡 呼叫原生元件的對應邏輯 結論：可混合使用虛擬控制元件 & 實體控制元件
至此，對於宿主的佈局容器來說，包裝在內部的元件不分虛擬化 /
原生，暴露在外的介面相同，只要將宿主容器像普通的 View 一樣新增到的檢視介面上，就可在後續的渲染過程中顯示出來。
- 特別注意
此處即可解釋 為何渲染效能高：因虛擬元件使用得越多，
View個數就越少，即層級越扁平
如下所示的元件： a. 普通的原生開發：2層（宿主容器層 + 圖片元件層） b. 虛擬化開發：採用虛擬化開發後，最終呈現的 View層級只有一個宿主容器（實際上，圖片元件被繪製在
Canvas裡了）
1.3 總結
建立UI元件有2種方式：
- 直接使用框架內建的
UI元件 - 自定義元件：通過封裝好的
Canvas流程，按照指定介面協議實現繪製邏輯 / 封裝原生元件
流程2：建立介面模板 & 下發
- 該步驟包括多個步驟：建立
XML介面模板、編譯成二進位制資料、下發等 - 具體如下
2.1 建立XML介面模板
- 具體描述 根據業務需求，使用XML編寫模板
注：需使用專門的工具
virtualview_tools編寫，其 使用說明見文章virtualview_tools使用指南
- 此方式類似：
Android平臺上通過XML搭建介面的方式 - 區別在於：
- 脫離了平臺限制，即一套模板可同時在
Android、iOS上使用 - 執行時動態載入
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指向它 & 將它們單獨儲存到一塊區域裡
- 原因：當模板線上釋出、字串有變動的情況下，能夠不影響原來的字串資源索引；否則若按照帶有順序約定的協議來分配資源索引，很容易在模板變更時 同一索引值在變更前後指向的資源內容是不一樣，影響穩定性和動態性
- 序列化的規則如下：
- 編譯流程
2.3 模板資料 下發到客戶端
即 客戶端獲取編譯後的二進位制資料
獲取有2種路徑:
- 直接將編譯後的模板打包到客戶端裡，開發者通過程式碼載入
- 框架先發布到模板管理後臺，客戶端線上更新到模板資料（即實現了動態更新）
流程3：客戶端載入介面
- 客戶端獲取到編譯後的介面模板後，進行載入 & 解析，最終渲染出檢視介面
- 步驟流程如下圖
3.1 解析模板資料
- 具體描述 客戶端獲得編譯後的模板資料（二進位制資料）後，立即 進行解析
- 如校驗版本號，合法性，讀取頭資訊等
- 客戶端渲染元件 從解析 編譯後的模板資料開始
- 流程解析 解析過程 = 二進位制編譯的逆過程
但解析流程只負責提取原始資料 & 組織格式，並無構建出元件物件
3.2 載入元件檢視
-
具體描述 當使用者傳入一個模板名稱，框架內部就會根據名稱去之前解析XML介面模板的資料裡找到 與此名稱匹配的模板資料，然後載入 & 建立出真正的元件
-
流程解析
3.3 繫結業務資料
- 具體描述 開發者在元件屬性裡可通過 表示式 指定使用哪個資料欄位，即將業務資料繫結到元件上
因業務資料是動態的，故從模板建立的元件不含業務資料
- 流程解析 在建立元件的過程中，當解析屬性碰到表示式時，會將該屬性的key、表示式值、所屬的基礎元件等關係儲存起來，等真實資料到達後再通過 表示式裡的定義 訪問資料 & 將真實值設定給元件的屬性，即將真實的資料繫結到基礎元件的屬性上
- 通過表示式解析、訪問得到的屬性值，會快取起來，當原始資料引用不變時，每次訪問都會獲取到快取值
- 此處接收的資料是
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種方式：
- 直接使用框架內建的
UI元件 - 自定義元件：通過封裝好的
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
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的解決的問題 在於：
- 實現元件的動態性：可在端上繫結動態下發的
XML介面模板 & 資料 - 提升了元件的渲染效能：通過 虛擬化技術（本質 =
Canvas）開發元件
7.2 對於整個原生開發技術（Android、iOS）
VirtualView的創新在於：解決了 原生開發中一直被詬病 而 常被叫喧會被 前端、RN技術取代的問題：
-
開發週期長 & 成本大
VirtualView採用XML描述檢視，XML介面模板具備跨平臺使用的特性 -
無法熱更新
VirtualView可在端上繫結動態下發的XML介面模板 & 資料，從而實現熱更新
-
相比於前幾年產品開發的一味求快，如今網際網路行業發展暫緩、使用者需求基本滿足的情況下，更加 講求的是使用者體驗
-
所以，實際上對比於 前端、
RN技術在客戶端的實現，VirtualView的優勢或許會更明顯：在解決了原生開發效率慢、週期長的前提下，保證了原生開發的優勢：效能好
7.3 呼籲
- 雖然
VirtualView推動了原生開發的發展，但目前來說，VirtualView還是存在不少問題 - 希望大家能一起在Github - alibaba - VirtualView 上進行完善，共同為開源事業做貢獻吧！
8. 總結
- 看完本文，你應該非常瞭解阿里出品的
VirtualView的使用 & 原理 - 關於
Tangram的使用，建議看文章：
- 下面我將繼續對
Android其他優秀的開源庫 進行詳細分析，有興趣可以繼續關注Carson_Ho的安卓開發筆記
請幫頂！因為你的鼓勵是我寫作的最大動力！
參考文章： juejin.im/post/5a2a71… tangram.pingguohe.net/docs/virtua…
歡迎關注carson_ho的微信公眾號
