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

前言

• Tangram 是阿里出品、用於快速實現組合佈局的框架模型，在手機天貓 Android & iOS版 內普遍使用

• 今天我將對Tangram 模型 進行全面介紹，但願大家會喜歡。

---

目錄

---

1. 爲何要使用 Tangram 模型

在講解 Tangram模型 前，咱們先來搞懂一個問題：爲何要使用 Tangram模型

1.1 背景

• 技術 是用於 知足需求業務 的 解決方案，現有的需求業務可分爲三類：基礎業務、常規業務 & 臨時性任務。具體細節以下：

1.2 問題

相應的解決方案的特色以下：

• 對於基礎業務，採用 Native 的方案，不做過多解釋
• 對於臨時性業務，隨着WebView性能的提高 和 移動端設備硬件的發展，現階段 HTML 加載速度 & 渲染速度慢的缺點將會逐漸被完善，對於臨時性業務的需求可以知足

但對於常規業務，至今還沒蓋棺定論的方案，因此纔會存在兩種方案：WebView+HTML & Dynative方案。但這兩種方案是存在問題的：

1. WebView+HTML方案：隨着WebView性能的提高 和 移動端設備硬件的發展，HTML加載速度 & 渲染速度慢的缺點將會逐漸被完善，因此常規業務須要的性能仍是難以知足。
2. Dynative（如RN、Weex）：雖然性能能知足，但因爲該技術還不成熟，穩定性差，且開發難度大，因此對於常規業務仍是很是謹慎的使用。

1.3 解決方案

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

---

2. 定義

• 是一種用於快速實現組合佈局的框架模型

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

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

就像使用七巧板 經過現有板塊 快速拼湊出 多樣的形狀同樣。

---

3. 應用場景

• 常規業務 中 複雜的佈局格式混排，如：浮動佈局、欄格佈局、通欄佈局、一拖N佈局、瀑布流佈局，還能夠組合使用這些佈局
• 具體場景是：如電商平臺首頁、活動頻道等等

Tangram 模型目前已在手機天貓 & 淘寶 Android 版內普遍使用

---

4. Tangram優勢

4.1 高性能

在性能方面，但願 貼近Native開發，重點：頁面渲染效率 & 組件回收複用

• 頁面渲染：爲了提高渲染效率，Tangram將在視圖渲染以前把大量的計算工做在VM中完成，並緩存在VM組成的樹形結構裏。
• 回收和複用——Tangram在Android和iOS平臺上分別開發了VLayout和 LazyScroll兩個基礎組件，經過一個雙索引可見區域組件發現算法，實現了跨父節點組件的高效回收和複用。

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）

• 具體以下圖：

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

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

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

b. 卡片

• 做用：負責佈局邏輯

1. 即對組件進行 組合 & 佈局
2. 只聲明佈局方式，不提供佈局細節

• 組成 卡片由有四部分組成：header、footer、body、style

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

c. 組件

• 定義：最小單位的UI元素

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

• 做用：負責UI元素展現 & 業務邏輯

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

視圖模型：全部組件對有一個統一視圖模型（ViewModel），主要是定義了生命週期事件：

• 組件初始化時會調用init（）
• 滑入屏幕綁定數據時，調用bind（）
• 滑出屏幕解除綁定時，調用unbind（）

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

---

5.2 Tangram結構

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

5.3 原理解析

當頁面數據傳入時：

• 核心引擎調用 數據解析器 將 數據 轉換成卡片和組件對象

1. 解析過程會根據以前註冊過的卡片、組件類型來解析
2. 未定義的數據將會被拋棄

• 數據解析器將解析完畢的卡片、組件對象傳遞給佈局框架，進行頁面渲染。

1. 佈局框架 根據卡片提供的佈局信息進行佈局
2. 佈局框架 根據組件提供的組件信息獲取組件實例，佈局到佈局容器裏

---

6. 擴展模塊

• 上面介紹的內容裏是Tangram的核心功能
• 但當須要落實到具體業務，僅僅該核心功能是沒法知足的，還須要不少輔助、擴展的功能
• Tangram 採用 插件化形式 進行擴展：

---

7. 具體使用

• 上述講解的 只是Tangram概念模型基本架構 & 原理
• 在具體實現時 會根據 不一樣平臺 採用 不一樣實現 方案：
  1. 對於Android：採用基於RecyclerView+自定義LayoutManager的實現方案

具體請看文章：Android開源庫V - Layout：淘寶、天貓都在用的UI框架，趕忙用起來吧！

2. 對於iOS：採用 基於自定義的 LazyScrollView 的實現方案

---

8. 總結

• 本文主要詳細講解Tangram的概念模型

• 關於具體實踐 & 落實到業務使用，請看文章：Android開源庫V - Layout：淘寶、天貓都在用的UI框架，趕忙用起來吧！

• 下面我將繼續對 阿里開源的框架模型Tangram進行 跟蹤 & 詳細分析 ，有興趣能夠繼續關注Carson_Ho的安卓開發筆記

---

歡迎關注carson_ho的微信公衆號