前言
- 淘寶、天貓一直致力於解決 頁面動態化的問題
- 在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…