Android Tangram模型：手把手帶你學習淘寶、天貓都在用的UI架構模型

Android Tangram模型：手把手帶你學習淘寶、天貓都在用的UI架構模型 前言

Tangram 是阿里出品、用於快速實現組合布局的架構模型，在手機天貓 Android & iOS版 內廣泛使用
電商圖

今天我將對Tangram 模型 進行全面介紹，希望你們會喜歡。 目錄

目錄

1. 為什麼要使用 Tangram 模型

在講解 Tangram模型 前，我們先來搞懂一個問題：為什麼要使用 Tangram模型 1.1 背景 技術 是用於 滿足需求業務 的 解決方案，現有的需求業務可分為三類：基礎業務、常規業務 & 臨時性任務。具體細節如下：
示意圖1 1.2 問題

相應的解決方案的特點如下：

示意圖2

對於基礎業務，採用 Native 的方案，不作過多解釋 對於臨時性業務，隨著WebView效能的提升 和 移動端裝置硬體的發展，現階段 HTML 載入速度 & 渲染速度慢的缺點將會逐漸被完善，對於臨時性業務的需求能夠滿足

但對於常規業務，至今還沒蓋棺定論的方案，所以才會存在兩種方案：WebView+HTML & Dynative方案。但這兩種方案是存在問題的： WebView+HTML方案：隨著WebView效能的提升 和 移動端裝置硬體的發展，HTML載入速度 & 渲染速度慢的缺點將會逐漸被完善，所以常規業務需要的效能還是難以滿足。 Dynative（如RN、Weex）：雖然效能能滿足，但由於該技術還不成熟，穩定性差，且開發難度大，所以對於常規業務還是非常謹慎的使用。 1.3 解決方案

Tangram 正是解決 常規業務 的方案：在效能、穩定性 & 開發週期 取得較好平衡的一種折中方案。 2. 定義

是一種用於快速實現組合布局的架構模型 所謂概念性模型，即只停留在定性分析的解決方案 & 思路，還未真正具體實現
Tangram的具體實現是一種 Native（iOS & Android）的快速實現 組合布局 的介面開發架構，下面會詳細說明

中文即七巧板，即該架構 提供一系列基本單元布局，通過快速拼裝就能搭建出一個具備多種布局的頁面

就像使用七巧板 通過現有板塊 快速拼湊出 多樣的形狀一樣。
示意圖

3. 應用情境 常規業務 中 複雜的布局格式混排，如：浮動布局、欄格布局、通欄布局、一拖N布局、瀑布流布局，還可以組合使用這些布局 具體情境是：如電商平台首頁、Active Channel等等> Tangram 模型目前已在手機天貓 & 淘寶 Android 版內廣泛使用 4. Tangram優點

示意圖

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的架構主要由三部分組成：

1.  `Tangram SDK`

Tangram AC Tangram OP

每部分的具體細節如下：
示意圖

本文主要講解的是用於用戶端頁面渲染的Tangram SDK。 5.1 知識儲備

在講解架構前，我們需要先瞭解Tangram的一些模型知識。 a. 頁面概念性模型

一個頁面實體由3部分組成：頁面（Page）、卡片（Card） & 組件（Item）

具體如下圖：
頁面元素拆解

之間的關係：組件 構成 卡片、卡片 構成 頁面。

對於Tangram，他的頁面概念性模型可用 樹狀模型（3層結構） 表示：
示意圖

下面主要講解 三層結構中 的 卡片 & 組件。 b. 卡片

作用：負責布局邏輯 即對組件進行 組合 & 布局
只聲明布局方式，不提供布局細節

組成
卡片由有四部分組成：header、footer、body、style
示意圖1
示意圖2

關於四個部分的細節，我將在Tangram具體使用時進行介紹 c. 組件

定義：最小單位的UI元素

日常使用的普通的View，如按鈕、圖片等等

作用：負責UI元素展示 & 商務邏輯

組成元素：視圖模型（ViewModel） & 樣式（Style）

視圖模型：所有組件對有一個統一視圖模型（ViewModel），主要是定義了生命週期事件： 組件初始化時會調用init（） 滑入螢幕綁定資料時，調用bind（） 滑出螢幕解除綁定時，調用unbind（）

關於 組件的基本樣式 主要包括：組件背景、外邊距、內邊距、組件的寬高比等等。具體細節會在具體使用時介紹。 5.2 Tangram結構

Tangram的結構主要由5部分組成，如下圖：

示意圖

5.3 原理解析

當頁面資料傳入時：

核心引擎調用 資料解析器 將 資料 轉換成卡片和組件對象 解析過程會根據之前註冊過的卡片、組件類型來解析
未定義的資料將會被拋棄

資料解析器將解析完畢的卡片、組件對象傳遞給布局架構，進行頁面渲染。 布局架構 根據卡片提供的布局資訊進行布局
布局架構 根據組件提供的組件資訊擷取組件執行個體，布局到版面配置容器裡 6. 擴充模組 上面介紹的內容裡是Tangram的核心功能 但當需要落實到具體業務，僅僅該核心功能是無法滿足的，還需要很多輔助、擴充的功能 Tangram 採用 外掛程式化形式 進行擴充：
示意圖 7. 具體使用 上述講解的 只是Tangram概念性模型基本架構 & 原理

在具體實現時 會根據 不同平台 採用 不同實現 方案：

1.  對於`Android`：採用基於`RecyclerView`+自訂`LayoutManager`的實現方案> 具體請看文章：[Android開源庫V - Layout：淘寶、天貓都在用的UI架構，趕緊用起來吧。](https://link.juejin.im?target=http%3A%2F%2Fwww.jianshu.com%2Fp%2F6b658c8802d1)2.  對於`iOS`：採用 基於自訂的 `LazyScrollView` 的實現方案

8. 總結 本文主要詳細講解Tangram的概念性模型 關於具體實踐 & 落實到業務使用，請看文章：Android開源庫V - Layout：淘寶、天貓都在用的UI架構，趕緊用起來吧。