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有出入, 比如布局和显示的层级都有些问题没有得到解决, 并且发现这个库已经有一段时间没有维护 近期也没有更新计划 遂短时间内部会再使用此库 但是会长期关注其发展, 文章内如有问题请及时与我联系 谢谢!

转载于:https://juejin.im/post/5c734145f265da2de4507d40