注:本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布
Tangram
是阿里出品、用于快速实现组合布局的框架模型,在手机天猫 Android
& iOS
版 内广泛使用Tangram
模型 进行全面介绍,希望你们会喜欢。
在讲解 Tangram
模型 前,我们先来搞懂一个问题:为什么要使用 Tangram
模型
相应的解决方案的特点如下:
Native
的方案,不作过多解释WebView
性能的提升 和 移动端设备硬件的发展,现阶段 HTML
加载速度 & 渲染速度慢的缺点将会逐渐被完善,对于临时性业务的需求能够满足但对于常规业务,至今还没盖棺定论的方案,所以才会存在两种方案:WebView+HTML
& Dynative
方案。但这两种方案是存在问题的:
WebView+HTML
方案:随着WebView
性能的提升 和 移动端设备硬件的发展,HTML加载速度 & 渲染速度慢的缺点将会逐渐被完善,所以常规业务需要的性能还是难以满足。Dynative
(如RN
、Weex
):虽然性能能满足,但由于该技术还不成熟,稳定性差,且开发难度大,所以对于常规业务还是非常谨慎的使用。Tangram
正是解决 常规业务 的方案:在性能、稳定性 & 开发周期 取得较好平衡的一种折中方案。
Tangram
的具体实现是一种 Native
(iOS
& Android
)的快速实现 组合布局 的界面开发框架,下面会详细说明Tangram
模型目前已在手机天猫 & 淘宝 Android 版内广泛使用在性能方面,希望 贴近Native开发,重点:页面渲染效率 & 组件回收复用
VLayout
和 LazyScroll
两个基础组件,通过一个双索引可见区域组件发现算法,实现了跨父节点组件的高效回收和复用。根据 业务类型 将组件 封装成 能承担一定业务能力的复用单元。
如一种瀑布流布局
提供 控制台 让业务方可直接控制基于Tangram的产品,如调整页面布局,切换页面数据等。
但这种动态化 是 面向粗粒度组件:通过 布局+组件的形式搭建整个页面,而不是一般从 基本的UI元素(如按钮blabla)搭建页面。
采用插件化扩展
内部本来就注册在框架里 & 外部也可注入扩展模块
对于业务开发,存在多端表现不一致的问题。为了解决该问题,以前需要通过复杂的网关逻辑来兼容多端逻辑不一致情况。
为了防止该问题,对于Tangram,预先制定了两个开发原则:
Tangram
的架构主要由三部分组成:
Tangram SDK
Tangram AC
Tangram OP
本文主要讲解的是用于客户端页面渲染的Tangram SDK
。
在讲解架构前,我们需要先了解Tangram
的一些模型知识。
Tangram
,他的页面概念模型可用 树状模型(3层结构) 表示:下面主要讲解 三层结构中 的 卡片 & 组件。
关于四个部分的细节,我将在Tangram具体使用时进行介绍
View
,如按钮、图片等等
ViewModel
) & 样式(Style
)视图模型:所有组件对有一个统一视图模型(ViewModel
),主要是定义了生命周期事件:
init()
bind()
unbind()
关于 组件的基本样式 主要包括:组件背景、外边距、内边距、组件的宽高比等等。具体细节会在具体使用时介绍。
Tangram
的结构主要由5部分组成,如下图:
当页面数据传入时:
Tangram
的核心功能Tangram
采用 插件化形式 进行扩展:Tangram
概念模型基本架构 & 原理Android
:采用基于RecyclerView
+自定义LayoutManager
的实现方案
具体请看文章:Android开源库V - Layout:淘宝、天猫都在用的UI框架,赶紧用起来吧!iOS
:采用 基于自定义的 LazyScrollView
的实现方案
Tangram
的概念模型Tangram
进行 跟踪 & 详细分析 ,有兴趣可以继续关注Carson_Ho的安卓开发笔记参考文章: 1. http://pingguohe.net/2017/03/30/what-is-tangram.html 2. http://pingguohe.net/2016/12/20/Tangram-design-and-practice.html?from=timeline 3. http://pingguohe.net/2017/04/24/tangram-1.0.html?from=timeline