Android Tangram模型:连淘宝、天猫都在用的UI框架模型你一定要懂

本文介绍了阿里巴巴的Tangram框架,它是一个用于快速实现组合布局的模型,广泛应用于手机天猫和淘宝。Tangram旨在解决常规业务的界面开发,提供高性能、面向业务的解决方案,通过页面、卡片和组件的组合实现动态化布局。其特点是组件回收复用、业务组件化和多端一致性。文章详细阐述了Tangram的页面模型、卡片和组件的概念,以及其工作原理。
摘要由CSDN通过智能技术生成

今日科技快讯

乐视网(300104)7月27日晚间发布公告:截至公告日,公司控股股东贾跃亭以及乐视控股合计持有5.24亿股,占公司总股本的比例为26.27%,其中贾跃亭直接持有乐视网5.12亿股,占公司总股本25.67%,直接持有乐视网股份被冻结5.12亿股,占公司总股本的比例为25.67%,直接持有乐视网股份被轮候冻结数量占公司总股本的193.92%。公告称,贾跃亭所持公司股份被冻结与公司本身无关,对贾跃亭公司控制权影响暂无法判断,不会影响公司正常生产经营与管理,也不会导致公司股权分布不具备上市条件。

作者简介

又到周五了,学完本篇文章,愉快地放假吧!

本篇来自 Carson_Ho 的投稿,分享了Android Tangram 模型框架的相关内容,对于有兴趣的同学,特别是喜欢研究UI方面的,可以好好学习学习,希望大家喜欢。

Carson_Ho 的博客地址:

http://my.csdn.net/carson_ho

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

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

目录

为什么要使用 Tangram模型

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

背景

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

问题

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

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

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

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

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

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

解决方案

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

定义

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

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

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

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

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

应用场景

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

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

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

Tangram优点

高性能

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

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

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

面向业务
  • 组件业务化

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

如一种瀑布流布局

  • 动态化

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

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

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

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

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

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

  • 扩展性好

采用插件化扩展

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

  • 多端一致性

对于业务开发,存在多端表现不一致的问题。为了解决该问题,以前需要通过复杂的网关逻辑来兼容多端逻辑不一致情况。为了防止该问题,对于 Tangram,预先制定了两个开发原则:

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

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

架构 & 原理讲解

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

  1. Tangram SDK

  2. Tangram AC

  3. Tangram OP

每部分的具体细节如下:

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

知识储备

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

  • 页面概念模型

一个页面实体由3部分组成:页面(Page)、卡片(Card) & 组件(Item)

具体如下图:

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

对于Tangram,他的页面概念模型可用 树状模型(3层结构) 表示:

下面主要讲解三层结构中的卡片 & 组件

  • 卡片

作用:负责布局逻辑

  1. 即对组件进行 组合 & 布局

  2. 只声明布局方式,不提供布局细节

组成

卡片由有四部分组成:header、footer、body、style

关于四个部分的细节,我将在 Tangram 具体使用时进行介绍

  • 组件

定义:最小单位的 UI 元素

日常使用的普通的 View ,如按钮、图片等等

作用:负责 UI 元素展示 & 业务逻辑

组成元素:视图模型(ViewModel) & 样式(Style)

视图模型:所有组件对有一个统一视图模型(ViewModel),主要是定义了生命周期事件:

  • 组件初始化时会调用 init()

  • 滑入屏幕绑定数据时,调用 bind()

  • 滑出屏幕解除绑定时,调用 unbind()

关于组件的基本样式主要包括:组件背景、外边距、内边距、组件的宽高比等等。具体细节会在具体使用时介绍。

Tangram 结构

Tangram 的结构主要由5部分组成,如下图:

原理解析

当页面数据传入时:

核心引擎调用 数据解析器 将 数据 转换成卡片和组件对象

  1. 解析过程会根据之前注册过的卡片、组件类型来解析

  2. 未定义的数据将会被抛弃

数据解析器将解析完毕的卡片、组件对象传递给布局框架,进行页面渲染。

  1. 布局框架 根据卡片提供的布局信息进行布局

  2. 布局框架 根据组件提供的组件信息获取组件实例,布局到布局容器里

扩展模块

  • 上面介绍的内容里是 Tangram 的核心功能

  • 但当需要落实到具体业务,仅仅该核心功能是无法满足的,还需要很多辅助、扩展的功能

  • Tangram 采用插件化形式进行扩展:

具体使用

  • 上述讲解的只是 Tangram 概念模型基本架构 & 原理

  • 在具体实现时会根据不同平台采用不同实现方案

对于 Android:采用基于 RecyclerView+自定义 LayoutManager 的实现方案 ,具体请看文章:

http://www.jianshu.com/p/6b658c8802d1

对于iOS:采用基于自定义的 LazyScrollView 的实现方案

总结
  1. 本文主要详细讲解Tangram的概念模型

  2. 关于具体实践 & 落实到业务使用,请看文章:

http://blog.csdn.net/carson_ho/article/details/71077193

下面我将继续对 阿里开源的框架模型 Tangram 进行跟踪 & 详细分析,有兴趣可以继续关注:

http://blog.csdn.net/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

更多

每天学习累了,看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号,每天都有好心情。

如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值