VirtualView接入及开发环境搭建

[TOC]

VirtualView接入

sdk接入

1. 引入aar依赖

compile ('com.alibaba.android:virtualview:1.0.5@aar') {
    transitive = true
}

2. 在application中初始化,提供全局VafContext及ViewManager

//构建VafContext对象
VafContext vafContext = new VafContext(mContext.getApplicationContext());
//初始化ViewManager
ViewManager viewManager = vafContext.getViewManager();
viewManager.init(mContext.getApplicationContext());

3. 自定义图片组件并注册，官方demo有picasso的例子。这里以Fresco为例,其他自定义组件也类似，参考自定义基础组件

   这里1014是自定义组件的id，每个组件对应一个id，可覆盖自带组件的id实现自定义基础组件。建议从 1001开始，前 1000 保留给系统使用。

sViewManager.getViewFactory().registerBuilder(1014,new FrescoImage.Builder())

4. 注册事件，可注册点击、曝光、长按、触摸事件
   事件说明

//点击事件
sVafContext.getEventManager().register(EventManager.TYPE_Click, new ClickProcessorImpl());
//曝光事件
sVafContext.getEventManager().register(EventManager.TYPE_Exposure, new ExposureProcessorImpl());

5. 加载动态布局二进制文件

//方式1，.out文件路径加载
viewManager.loadBinFileSync(file_path);
//方式2，二进制数组
viewManager.loadBufferSync(byte[])

6. 页面中设置容器，绑定数据、渲染

//根据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

1. 配置组件ID及属性type：compiler-tools/config/config.properties

\\配置viewId,例如自定义FrescoImage的id设为1014，这里id需要与virtualview初始化时FrescoImage注册的id一致，这样才能根据xml中组件id映射到native组件。
VIEW_ID_FrescoImage=1014
\\配置属性类型
layoutMarginTop=Number

2. 配置需要编译xml文件列表：compiler-tools/config/templatelist.properties

/**
 * xmlFileName需要编译的xml文件名
 * outFileName编译输出文件名，outFileName会编译进二进制文件中，客户端通过outFileName生成对应VirtualView
 * Version xml模板的版本号
 */
xmlFileName=outFileName,Version

3. 编写xml模板放在compiler-tools/TemplateWorkSpace/template目录
4. 执行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的<模板实时预览>,点击对应模板预览

  
  
  预览效果