Android-Tangram模型：淘宝、天猫都在用的UI框架模型你一定要懂
3. 应用场景
- 常规业务 中 复杂的布局格式混排，如：浮动布局、栏格布局、通栏布局、一拖N布局、瀑布流布局，还可以组合使用这些布局
- 具体场景是：如电商平台首页、活动频道等等
Tangram模型目前已在手机天猫 & 淘宝 Android 版内广泛使用
4. Tangram优点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1BuGTVOn-1650983084934)(//upload-images.jianshu.io/upload_images/944365-de4973c49886aae1.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)]
4.1 高性能
在性能方面，希望 贴近Native开发，重点：页面渲染效率 & 组件回收复用
- 页面渲染：为了提升渲染效率，Tangram将在视图渲染之前把大量的计算工作在VM中完成，并缓存在VM组成的树形结构里。
- 回收和复用——Tangram在Android和iOS平台上分别开发了
VLayout和LazyScroll两个基础组件，通过一个双索引可见区域组件发现算法，实现了跨父节点组件的高效回收和复用。
4.2 面向业务
a. 组件业务化
根据 业务类型 将组件 封装成 能承担一定业务能力的复用单元。
如一种瀑布流布局
b. 动态化
提供 控制台 让业务方可直接控制基于Tangram的产品，如调整页面布局，切换页面数据等。
- 即 页面的排版布局 可 通过后端数据的下发来动态调整
- 服务网关的建设目标是最大程度的降低业务创建Tangram页面的压力和成本。
但这种动态化 是 面向粗粒度组件：通过 布局+组件的形式搭建整个页面，而不是一般从 **基本的UI元素（如按钮blabla）**搭建页面。
- 其实也很好理解，业务人员需要用到的是 能承担一定业务能力的“业务布局”，而不是单一UI元素（按钮、文本blabla）
- 好处：使用成本低，上线周期短
4.3 扩展性好
采用插件化扩展
内部本来就注册在框架里 & 外部也可注入扩展模块
4.4 多端一致性
对于业务开发，存在多端表现不一致的问题。为了解决该问题，以前需要通过复杂的网关逻辑来兼容多端逻辑不一致情况。
为了防止该问题，对于Tangram，预先制定了两个开发原则：
- 任意新功能的提出都是不区分平台，在功能设计中必须同时考虑多端功能，具体的实现方案和逻辑必须多端统一Review以保证多端表现一致。
- 任意一端的变更都必须在改动前把方案同步给其他端，而且变更必须多端同步发布。
5. 架构 & 原理讲解
Tangram的架构主要由三部分组成：
Tangram SDKTangram ACTangram OP
- 每部分的具体细节如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tDmi5FcY-1650983084935)(//upload-images.jianshu.io/upload_images/944365-b2f0d39a3d0bc121.png?imageMogr2/auto-orient/strip|imageView2/2/w/1092/format/webp)]
本文主要讲解的是用于客户端页面渲染的Tangram SDK。
5.1 知识储备
在讲解架构前，我们需要先了解Tangram的一些模型知识。
a. 页面概念模型
-
一个页面实体由3部分组成：页面（Page）、卡片（Card） & 组件（Item）
-
具体如下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aLhzAkx5-1650983084935)(//upload-images.jianshu.io/upload_images/944365-eb 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】 7c5d4acab30ace.png?imageMogr2/auto-orient/strip|imageView2/2/w/680/format/webp)]
-
之间的关系：组件 构成 卡片、卡片 构成 页面。
-
对于
Tangram，他的页面概念模型可用 树状模型（3层结构） 表示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ecQRRA0n-1650983084937)(//upload-images.jianshu.io/upload_images/944365-cdfc8fa53eabdeb3.png?imageMogr2/auto-orient/strip|imageView2/2/w/580/format/webp)]
下面主要讲解 三层结构中 的 卡片 & 组件。
b. 卡片
- 作用：负责布局逻辑
- 即对组件进行 组合 & 布局
- 只声明布局方式，不提供布局细节
- 组成
卡片由有四部分组成：header、footer、body、style
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dhKmJPB9-1650983084938)(//upload-images.jianshu.io/upload_images/944365-06b12ff779f31cf9.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FCWgdoo8-1650983084940)(//upload-images.jianshu.io/upload_images/944365-b4b06b15e1f8168a.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)]
关于四个部分的细节，我将在Tangram具体使用时进行介绍
c. 组件
- 定义：最小单位的UI元素
日常使用的普通的
View，如按钮、图片等等
-
作用：负责UI元素展示 & 业务逻辑
-
组成元素：视图模型（
ViewModel） & 样式（Style）
视图模型：所有组件对有一个统一视图模型（ViewModel），主要是定义了生命周期事件：
- 组件初始化时会调用
init（） - 滑入屏幕绑定数据时，调用
bind（） - 滑出屏幕解除绑定时，调用
unbind（）
关于 组件的基本样式 主要包括：组件背景、外边距、内边距、组件的宽高比等等。具体细节会在具体使用时介绍。
5.2 Tangram结构
Tangram的结构主要由5部分组成，如下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2s0OQnJR-1650983084941)(//upload-images.jianshu.io/upload_images/944365-b62ac1e5e10a5890.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)]
5.3 原理解析
当页面数据传入时：
- 核心引擎调用 数据解析器 将 数据 转换成卡片和组件对象
- 解析过程会根据之前注册过的卡片、组件类型来解析
- 未定义的数据将会被抛弃
- 数据解析器将解析完毕的卡片、组件对象传递给布局框架，进行页面渲染。
- 布局框架 根据卡片提供的布局信息进行布局
- 布局框架 根据组件提供的组件信息获取组件实例，布局到布局容器里
6. 扩展模块
- 上面介绍的内容里是
Tangram的核心功能 - 但当需要落实到具体业务，仅仅该核心功能是无法满足的，还需要很多辅助、扩展的功能
Tangram采用 插件化形式 进行扩展：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ZW6N7XJ-1650983084941)(//upload-images.jianshu.io/upload_images/944365-11adc46f3a47c15c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)]
展模块
- 上面介绍的内容里是
Tangram的核心功能 - 但当需要落实到具体业务，仅仅该核心功能是无法满足的，还需要很多辅助、扩展的功能
Tangram采用 插件化形式 进行扩展：
[外链图片转存中…(img-2ZW6N7XJ-1650983084941)]