写点什么

Android Tangram 模型:手把手带你学习淘宝、天猫都在用的 UI 框架模型

用户头像
Android架构
关注
发布于: 47 分钟前

前言

  • Tangram 是阿里出品、用于快速实现组合布局的框架模型,在手机天猫 Android & iOS版 内广泛使用



  • 今天我将对Tangram 模型 进行全面介绍,希望你们会喜欢。



目录

![目录](https:


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


//user-gold-cdn.xitu.io/2017/10/17/6e3bfc09e9a7da96e1f189e3be919a22?imageView2/0/w/1280/h/960/ignore-error/1)



1. 为什么要使用 Tangram 模型

在讲解 Tangram模型 前,我们先来搞懂一个问题:为什么要使用 Tangram模型

1.1 背景

  • 技术 是用于 满足需求业务 的 解决方案,现有的需求业务可分为三类:基础业务、常规业务 & 临时性任务。具体细节如下:


1.2 问题

相应的解决方案的特点如下:



  • 对于基础业务,采用 Native 的方案,不作过多解释

  • 对于临时性业务,随着WebView性能的提升 和 移动端设备硬件的发展,现阶段 HTML 加载速度 & 渲染速度慢的缺点将会逐渐被完善,对于临时性业务的需求能够满足


但对于常规业务,至今还没盖棺定论的方案,所以才会存在两种方案:WebView+HTML & Dynative方案。但这两种方案是存在问题的:


  1. WebView+HTML方案:随着WebView性能的提升 和 移动端设备硬件的发展,HTML 加载速度 & 渲染速度慢的缺点将会逐渐被完善,所以常规业务需要的性能还是难以满足。

  2. Dynative(如RNWeex):虽然性能能满足,但由于该技术还不成熟,稳定性差,且开发难度大,所以对于常规业务还是非常谨慎的使用。

1.3 解决方案

Tangram 正是解决 常规业务 的方案:在性能、稳定性 & 开发周期 取得较好平衡的一种折中方案。



2. 定义

  • 是一种用于快速实现组合布局的框架模型


  1. 所谓概念模型,即只停留在定性分析的解决方案 & 思路,还未真正具体实现

  2. Tangram的具体实现是一种 NativeiOS & Android)的快速实现 组合布局 的界面开发框架,下面会详细说明


  • 中文即七巧板,即该框架 提供一系列基本单元布局,通过快速拼装就能搭建出一个具备多种布局的页面


就像使用七巧板 通过现有板块 快速拼凑出 多样的形状一样。




3. 应用场景

  • 常规业务 中 复杂的布局格式混排,如:浮动布局、栏格布局、通栏布局、一拖 N 布局、瀑布流布局,还可以组合使用这些布局

  • 具体场景是:如电商平台首页、活动频道等等


Tangram 模型目前已在手机天猫 & 淘宝 Android 版内广泛使用



4. Tangram 优点

4.1 高性能

在性能方面,希望 贴近 Native 开发,重点:页面渲染效率 & 组件回收复用


  • 页面渲染:为了提升渲染效率,Tangram 将在视图渲染之前把大量的计算工作在 VM 中完成,并缓存在 VM 组成的树形结构里。

  • 回收和复用——Tangram 在 Android 和 iOS 平台上分别开发了VLayoutLazyScroll两个基础组件,通过一个双索引可见区域组件发现算法,实现了跨父节点组件的高效回收和复用。

4.2 面向业务

a. 组件业务化

根据 业务类型 将组件 封装成 能承担一定业务能力的复用单元。


如一种瀑布流布局

b. 动态化

提供 控制台 让业务方可直接控制基于 Tangram 的产品,如调整页面布局,切换页面数据等。


  1. 即 页面的排版布局 可 通过后端数据的下发来动态调整

  2. 服务网关的建设目标是最大程度的降低业务创建 Tangram 页面的压力和成本。


但这种动态化 是 面向粗粒度组件:通过 布局+组件的形式搭建整个页面,而不是一般从 **基本的 UI 元素(如按钮 blabla)**搭建页面。


  1. 其实也很好理解,业务人员需要用到的是 能承担一定业务能力的“业务布局”,而不是单一 UI 元素(按钮、文本 blabla)

  2. 好处:使用成本低,上线周期短

4.3 扩展性好

采用插件化扩展


内部本来就注册在框架里 & 外部也可注入扩展模块

4.4 多端一致性

对于业务开发,存在多端表现不一致的问题。为了解决该问题,以前需要通过复杂的网关逻辑来兼容多端逻辑不一致情况。


为了防止该问题,对于 Tangram,预先制定了两个开发原则:


  1. 任意新功能的提出都是不区分平台,在功能设计中必须同时考虑多端功能,具体的实现方案和逻辑必须多端统一 Review 以保证多端表现一致。

  2. 任意一端的变更都必须在改动前把方案同步给其他端,而且变更必须多端同步发布。



5. 架构 & 原理讲解

  • Tangram的架构主要由三部分组成:


  1. Tangram SDK

  2. Tangram AC

  3. Tangram OP


  • 每部分的具体细节如下:



本文主要讲解的是用于客户端页面渲染的Tangram SDK

5.1 知识储备

在讲解架构前,我们需要先了解Tangram的一些模型知识。

a. 页面概念模型
  • 一个页面实体由 3 部分组成:页面(Page)、卡片(Card) & 组件(Item)

  • 具体如下图:



  • 之间的关系:组件 构成 卡片、卡片 构成 页面。

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Android Tangram模型:手把手带你学习淘宝、天猫都在用的UI框架模型