[TOC]
VirtualView接入
sdk接入
- 引入aar依賴
compile ('com.alibaba.android:virtualview:1.0.5@aar') {
transitive = true
}
- 在application中初始化,提供全局VafContext及ViewManager
//構(gòu)建VafContext對象
VafContext vafContext = new VafContext(mContext.getApplicationContext());
//初始化ViewManager
ViewManager viewManager = vafContext.getViewManager();
viewManager.init(mContext.getApplicationContext());
-
自定義圖片組件并注冊，官方demo有picasso的例子。這里以Fresco為例,其他自定義組件也類似，參考自定義基礎(chǔ)組件
這里1014是自定義組件的id，每個組件對應(yīng)一個id，可覆蓋自帶組件的id實現(xiàn)自定義基礎(chǔ)組件。建議從 1001開始，前 1000 保留給系統(tǒng)使用。
sViewManager.getViewFactory().registerBuilder(1014,new FrescoImage.Builder())
- 注冊事件，可注冊點擊、曝光、長按、觸摸事件
事件說明
//點擊事件
sVafContext.getEventManager().register(EventManager.TYPE_Click, new ClickProcessorImpl());
//曝光事件
sVafContext.getEventManager().register(EventManager.TYPE_Exposure, new ExposureProcessorImpl());
- 加載動態(tài)布局二進制文件
//方式1，.out文件路徑加載
viewManager.loadBinFileSync(file_path);
//方式2，二進制數(shù)組
viewManager.loadBufferSync(byte[])
- 頁面中設(shè)置容器，綁定數(shù)據(jù)、渲染
//根據(jù)xml文件名獲取VirtualView，在編譯xml時配置的名稱
View container = vafContext.getContainerService().getContainer(name, true);
//數(shù)據(jù)綁定,綁定對應(yīng)布局的json數(shù)據(jù)
IContainer iContainer = (IContainer)container;
iContainer.getVirtualView().setVData(data);
xml開發(fā)工具
需要工具
- xml編輯器:SublimeText
- xml編譯.out工具:virtualview_tools
- xml界面預(yù)覽:IOS PlayGround、Android PlayGround
編譯工具
下載virtualview_tools，通過VirtualView-tools編譯XML模板，輸出.out文件及文件MD5
- 配置組件ID及屬性type：compiler-tools/config/config.properties
\\配置viewId,例如自定義FrescoImage的id設(shè)為1014，這里id需要與virtualview初始化時FrescoImage注冊的id一致，這樣才能根據(jù)xml中組件id映射到native組件。
VIEW_ID_FrescoImage=1014
\\配置屬性類型
layoutMarginTop=Number
- 配置需要編譯xml文件列表：compiler-tools/config/templatelist.properties
/**
* xmlFileName需要編譯的xml文件名
* outFileName編譯輸出文件名，outFileName會編譯進二進制文件中，客戶端通過outFileName生成對應(yīng)VirtualView
* Version xml模板的版本號
*/
xmlFileName=outFileName,Version
- 編寫xml模板放在compiler-tools/TemplateWorkSpace/template目錄
- 執(zhí)行sh buildTemplate.sh腳本編譯xml模板，輸出.out文件，輸出目錄：compiler-tools/TemplateWorkSpace/build
out目錄：xml模板編譯成的.out文件
java目錄：xml模板編譯成的二進制數(shù)組類
sign目錄：.out文件的MD5碼，供客戶端校驗用
txt目錄：XML 模板編譯成二進制數(shù)據(jù)之后的十六進制字符串形式
界面實時預(yù)覽工具
-
需要環(huán)境：
- java- 編譯xml
- python- 搭建本地WebServer，提供模板.out及數(shù)據(jù)json給客戶端
- brew- 安裝fswatch、qrencode。安裝方法1-官網(wǎng)、安裝方法2-國內(nèi)鏡像
- fswatch- 監(jiān)聽xml模板文件變化
- qrencode- 生成文件本地服務(wù)地址二維碼
-
原理：
實時預(yù)覽原理
通過fswatch監(jiān)聽xml文件變化，將xml編譯成.out文件與模板數(shù)據(jù)json封裝成一個data.json文件發(fā)布到LocalServer，客戶端獲取后解析.out文件完成數(shù)據(jù)綁定和渲染，從而實現(xiàn)實時預(yù)覽。
-
使用：
1、開啟localServer服務(wù)，切到 /compiler-tools/realtime-preview 目錄執(zhí)行 run.sh啟動服務(wù)
2、修改Playground的LocalServer地址
https://github.com/alibaba/Virtualview-Android/blob/master/app/src/main/java/com/tmall/wireless/virtualviewdemo/preview/util/HttpUtil.java#L16，改為localServer地址，3、打開demo的<模板實時預(yù)覽>,點擊對應(yīng)模板預(yù)覽
預(yù)覽效果
