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方案。但這兩種方案是存在問題的：

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

1.3 解決方案

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

---

2. 定義

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

  1. 所謂概念模型，即只停留在定性分析的解決方案 & 思路，還未真正具體實現
     
     1. 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`
  

  1. Tangram AC
  2. Tangram OP

• 每部分的具體細節如下：
  

  示意圖

本文主要講解的是用於客戶端頁面渲染的Tangram SDK。

5.1 知識儲備

在講解架構前，我們需要先了解Tangram的一些模型知識。

a. 頁面概念模型

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

• 具體如下圖：
  

  頁面元素拆解

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

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

  示意圖

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

b. 卡片

• 作用：負責佈局邏輯

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

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

  示意圖1

  
  

  示意圖2

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

c. 組件

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

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

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

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

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

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

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

---

5.2 Tangram結構

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

示意圖

5.3 原理解析

當頁面數據傳入時：

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

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

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

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

---

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框架，趕緊用起來吧！