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

推荐阅读更多精彩内容