VirtualView接入及开发环境搭建
2018-12-25 本文已影响9人
MingMing很忙
[TOC]
VirtualView接入
sdk接入
- 引入aar依赖
compile ('com.alibaba.android:virtualview:1.0.5@aar') {
transitive = true
}
- 在application中初始化,提供全局VafContext及ViewManager
//构建VafContext对象
VafContext vafContext = new VafContext(mContext.getApplicationContext());
//初始化ViewManager
ViewManager viewManager = vafContext.getViewManager();
viewManager.init(mContext.getApplicationContext());
-
自定义图片组件并注册，官方demo有picasso的例子。这里以Fresco为例,其他自定义组件也类似，参考自定义基础组件
这里1014是自定义组件的id，每个组件对应一个id，可覆盖自带组件的id实现自定义基础组件。建议从 1001开始，前 1000 保留给系统使用。
sViewManager.getViewFactory().registerBuilder(1014,new FrescoImage.Builder())
- 注册事件，可注册点击、曝光、长按、触摸事件
事件说明
//点击事件
sVafContext.getEventManager().register(EventManager.TYPE_Click, new ClickProcessorImpl());
//曝光事件
sVafContext.getEventManager().register(EventManager.TYPE_Exposure, new ExposureProcessorImpl());
- 加载动态布局二进制文件
//方式1，.out文件路径加载
viewManager.loadBinFileSync(file_path);
//方式2，二进制数组
viewManager.loadBufferSync(byte[])
- 页面中设置容器，绑定数据、渲染
//根据xml文件名获取VirtualView，在编译xml时配置的名称
View container = vafContext.getContainerService().getContainer(name, true);
//数据绑定,绑定对应布局的json数据
IContainer iContainer = (IContainer)container;
iContainer.getVirtualView().setVData(data);
xml开发工具
需要工具
- xml编辑器:SublimeText
- xml编译.out工具:virtualview_tools
- xml界面预览:IOS PlayGround、Android PlayGround
编译工具
下载virtualview_tools，通过VirtualView-tools编译XML模板，输出.out文件及文件MD5
- 配置组件ID及属性type：compiler-tools/config/config.properties
\\配置viewId,例如自定义FrescoImage的id设为1014，这里id需要与virtualview初始化时FrescoImage注册的id一致，这样才能根据xml中组件id映射到native组件。
VIEW_ID_FrescoImage=1014
\\配置属性类型
layoutMarginTop=Number
- 配置需要编译xml文件列表：compiler-tools/config/templatelist.properties
/**
* xmlFileName需要编译的xml文件名
* outFileName编译输出文件名，outFileName会编译进二进制文件中，客户端通过outFileName生成对应VirtualView
* Version xml模板的版本号
*/
xmlFileName=outFileName,Version
- 编写xml模板放在compiler-tools/TemplateWorkSpace/template目录
- 执行sh buildTemplate.sh脚本编译xml模板，输出.out文件，输出目录：compiler-tools/TemplateWorkSpace/build
out目录：xml模板编译成的.out文件
java目录：xml模板编译成的二进制数组类
sign目录：.out文件的MD5码，供客户端校验用
txt目录：XML 模板编译成二进制数据之后的十六进制字符串形式
界面实时预览工具
-
需要环境：
- java- 编译xml
- python- 搭建本地WebServer，提供模板.out及数据json给客户端
- brew- 安装fswatch、qrencode。安装方法1-官网、安装方法2-国内镜像
- fswatch- 监听xml模板文件变化
- qrencode- 生成文件本地服务地址二维码
-
原理：
实时预览原理
通过fswatch监听xml文件变化，将xml编译成.out文件与模板数据json封装成一个data.json文件发布到LocalServer，客户端获取后解析.out文件完成数据绑定和渲染，从而实现实时预览。
-
使用：
1、开启localServer服务，切到 /compiler-tools/realtime-preview 目录执行 run.sh启动服务
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的<模板实时预览>,点击对应模板预览
预览效果
