Tangram系列（一）iOS Tangram入门

iOS入门

timg.jpeg

Tangram2.0库

Android

Tangram-Android
Virtualview-Android

iOS

Tangram-iOS
Virtualview-iOS

tangram 使用的工具类
virtualview_tools

Tangram

ios的Tagram总体由四部分构成：Core,Layout,EventBus,Helper

13399000.jpg

1、Core

Tangram的复用和回收机制是由core负责的。主要的原理就是使用了LazyScroll（底层是UIScrollView），就是先把LazyScroll里面所有需要回收复用的视图的绝对坐标先整理出来，然后在LazyScroll滚动的时候，查找哪些视图需要回收，哪些视图需要复用。core主要是TangramView。

TangramView的核心方法：

15752663230718.jpg

2、LayOut

LayOut主要负责处理内部组件摆放的位置。布局需要实现TangramLayoutProtocol。它的核心方法是calculateLayout，这里面需要安排内部ViewModel的位置，决定后面要生成的视图要如何摆放。
Tangram有丰富的内置布局可供选择，比如 流式布局、一拖N的、浮标、固定、吸顶、吸底、轮播、线性滚动、瀑布流等布局，当然布局也可以自行拓展。因为有些布方式比较特殊，TangramView会对它们有特殊的处理逻辑。

布局样式：

15749110216877.jpg

内置的布局类型，可以参考
http://tangram.pingguohe.net/docs/layout-support/inner-support

3、EventBus

事件总线用于组件和Controller，layout、TangramView之间的通信。点击、曝光就是典型的事件总线使用场景。
事件总线的使用方法：

15749109334425.jpg

4、Helper

Helper的作用是简化代码，快速生成布局、组件。

Helper具体是指TangramDefaultDataSourceHelper, 这个解析器具备以下功能：

• 快速解析layout---(NSDictionary -> layout实例)
• 快速解析Model-----(NSDictionary -> model实例)
• 从model快速生成element----(model实例 ->组件实例)
• 用新的model刷新即将被复用的element

15752573326331.jpg

TangramDefaultDataSourceHelper实际上是串联起来了三种类型的工厂类，每种各需要一个。Helper在这三个工厂提供的API基础上，再封装成更易于使用的API。这三个工厂默认的是

• TangramDefaultLayoutFactory
• TangramDefaultItemModelFactory
• TangramDefaultElementFactory

15752581576050.jpg

VirtualView

VirtualView简介

VirtualView 是 Tangram 2.0 库中的一个重要组成部分。是Tangram模型在V2.0补充的UI开源库。

VirtualView的作用
解决Tangram V1.0中加载性能低和UI组件没有办法动态更新的问题。

VirtualView的功能

1. 使用Canvas绘制视图，创建虚拟化组件
2. 通过XML快速的创建界面模版
3. 客户端运行时动态加载XML模版，从而渲染界面

15754410484609.jpg

VirtualView被称为虚拟组件的原因
1、使用canvas绘制视图
2、不存在实际的view，依赖于宿主容器视图
3、VirtualView不想我们平常使用的一些控件，比如Label，Button等等

15754427907248.jpg

VirtualView的主要流程

提供了用 XML 去书写 UI 组件的方案，然后动态化下发编译好的二进制文件，最后再利用客户端内置的 SDK 来解析展示这些 UI 组件。

VirtualView的主要流程：

15752725196473.jpg

流程：

1. 编写业务组件模板
2. 通过工具将模板数据编译成二进制数据。注意加载 XML 并不是直接加载原始 XML 文件，而是先通过 virtualview_tools 编译成一段二进制数据，生成后缀为 .out的文件。
3. 下发到客户端。客户端加载二进制数据可以有两种路径：
   第一种：直接将编译结果打包到客户端里加载，
   第二种：是发布到模板管理后台cdn上，让客户端去下载，在线更新到模版数据。
4. 加载解析二进制数据。不论是那种方式加载二进制数据，客户端的工作都需要解析二进制数据，比如校验版本号，合法性，读取头信息等等。
5. 创建组件视图。会根据组件名称找到二进制数据，通过上面介绍过的Helper工具解析并且创建出真正的组件模型数据。
6. 绑定业务数据。用户需要获取到业务数据绑定到组件上，组件的属性里可以写表达式来指定使用哪一个数据字段。
7. 显示，组件结合业务数据渲染在视图上面。

VirtualView的特点

15754284596053.jpg

1、渲染性能高。渲染出来的视图结构呈现扁平化。
2、组建热更新。可以通过配套的xml模版来更新sdk；可以动态更新组件和界面。
3、跨平台。一套xml模版，可以android、iOS俩个不同的平台使用。
4、兼容性好。可以支持加载、渲染原生基础组件；也可以解决虚拟化view带来的原生view的能力损失的问题。
5、使用方便。它内置了一系列基础组件可以直接被使用；也支持数据绑定的表达式。也可以在样式动态化。数据动态化的场景下能非常方便地实现业务需求。

参考文件

https://www.jianshu.com/p/48764ff8449f

https://www.jianshu.com/p/cd634106f533

http://pingguohe.net/2017/04/24/tangram-ios-structure.html

http://tangram.pingguohe.net/docs/ios/tangram-core