iOS Tangram(VirtualView)动态组件的学习与使用

Tangram 是阿里团队构建的一款能够动态实现修改UI布局和数据展现的UI库, iOS版本最低支持到7.0 , VirtualView 是 Tangram 升级过程当中引入的新的组件开发技术，它开创了一种虚拟化开发基础控件的技术，使用方只要按照指定协议实现一个基础控件的尺寸计算、绘制逻辑、布局逻辑，即能实如今宿主容器的 canvas 里实现直接绘制 UI 内容的，让最终渲染出来的视图结构呈现扁平化，提高组件渲染性能。同时为了解决虚拟化 View 带来的原生 View 的能力损失的问题，它支持加载和渲染原生基础控件，二者组合产生协力，既能最大限度发挥性能提高，又能知足特殊场景下的业务需求。 VirtualView 内置实现了一系列基础控件，可让使用方直接上手尝试；而搭建业务组件的方式采用 XML 模板来编写，这使得业务组件动态更新成为了可能。XML 模板里还支持写数据绑定的表达式，在样式动态化、数据动态化的场景下能很是方便地实现业务需求。

官方学习文档地址是:http://tangram.pingguohe.net/

下面是咱们学习个构建项目的一些demo地址:

• Tangram项目github地址:https://github.com/alibaba/Tangram-iOS
• VirtualView项目github地址:https://github.com/alibaba/VirtualView-iOS
• virtualview_tools 地址:https://github.com/alibaba/virtualview_tools

VirtualView下载后是一个工做空间 使用cocoapods pod install导入所需的库, 其中包含两个项目 一个是 RealtimePreview 其用来动态实现热更新方便调试,下面会详细介绍配合virtualview_tools使用, 另一个是VirtualViewDemo, 其是用来演示官方提供的一些案例,在介绍动态组件的地方在内均可以找到演示demo,方便查找和学习使用,简单了解完这个工做空间(VirtualView)所包含的两个项目后,咱们着重说下virtualview_tools,这个调试工具极大的方便了咱们调试界面,我使用的是atom开发工具编辑此项目,打开项目 进入compiler-tools文件夹下会发现RealtimePreview和TemplateWorkSpace这两个文件,其中RealtimePreview是咱们动态调试使用的 TemplateWorkSpace 是咱们动态调试完打包用的,在RealtimePreview内templates文件内是咱们存放模板文件的地方。

• run.sh(脚本文件,用来启动热更新编译调试 打开终端cd到此文件夹下 sh run.sh 执行此命令 会在本地起一个服务提供对项目RealtimePreview的接口服务,以此来实现热更新调试)

在templates文件夹下回发现有一个HelloWorld文件夹,这个就是demo示例里演示的模板文件,其内部分别包含:

• data.json (其是根据下面json和xml两个文件 生成的数据文件, xml文件会被编译成进制文件写入其内)
• HelloWorld.json (数据文件)
• HelloWorld.xml(布局文件)

下面咱们来快速的使用其构建一个界面:

xcode启动RealtimePreview项目, 而后 执行run.sh脚本启动服务 atom打开virtualview_tools项目:

咱们按照HelloWorld的模板新建自定义模板, 使用RealtimePreview动态调试, run.sh执行脚本成功后,项目以下图显示:

接下来进入HelloWorld就能热更新调试界面了

经过atom修改HelloWorld.xml保存后 界面也随之改变

ps: virtualview_tools 工具须要 java JDK和 python 工具配合使用 其中利用Python会在模板文件内生成二维码图片,用来真机调试使用 具体环境配置搭建就不详细描述 参考官方提供的资料 应该比较详细,看完此篇文章应该再去学习会多少内心有个大致思路(会java开发的更好理解)

经过以上已经简单的能够自定义模板了, 下面在介绍下如何生成咱们须要的.out文件放到ios项目内, 编译好xml模板文件后,咱们把其复制到/compiler-tools/TemplateWorkSpace/template 文件夹下 这里面放置了咱们和官方写好的一些xml模板文件, 而后在上一级目录下咱们会看到 buildTemplate.sh 脚本文件和build文件夹

• buildTemplate.sh 编译最终须要的模板文件的脚本(其会将template内的xml文件分别编译成对应的文件使用 最终生成的文件会导出到build文件夹下 使用方式同run.sh)
• build 其内存放编译好的模板文件

注意: iOS使用out文件夹下的文件 Android使用java文件夹下的(Android须要将.java文件自行再次编译后使用)

将编译好的.out文件直接拖拽到本身的项目中(项目别忘了导所须要的库)

我实现动态布局的思路是, 先在项目内放置.out文件 而后再对应界面内写入本地对应的json数据, 界面初始时 从服务器下载服务端的.out文件到本地沙盒,而后读取沙盒内.out文件和服务端的数据显示界面,若是服务端请求失败加载本地项目内.out文件和本地json数据。具体使用细节如点击事件的获取等等请参考官方提供的文档,好比要先注册自定义组件再加载模板文件等等 最终实现界面如图:

注: 本人在使用时发现了很多问题, 不少地方和Android有出入, 好比布局和显示的层级都有些问题没有获得解决, 而且发现这个库已经有一段时间没有维护 近期也没有更新计划 遂短期内部会再使用此库 可是会长期关注其发展, 文章内若有问题请及时与我联系 谢谢!