前言
Tangram是阿里出品、用於快速實現組合佈局的框架模型，在手機天貓Android&iOS版 內廣泛使用
- 今天我將對
Tangram模型 進行全面介紹，希望你們會喜歡。
目錄
1. 為什麼要使用 Tangram 模型
在講解 Tangram模型 前，我們先來搞懂一個問題：為什麼要使用 Tangram模型
1.1 背景
- 技術 是用於 滿足需求業務 的 解決方案，現有的需求業務可分為三類：基礎業務、常規業務 & 臨時性任務。具體細節如下：
1.2 問題
相應的解決方案的特點如下：
- 對於基礎業務，採用
Native的方案，不作過多解釋 - 對於臨時性業務，隨著
WebView效能的提升 和 移動端裝置硬體的發展，現階段HTML載入速度 & 渲染速度慢的缺點將會逐漸被完善，對於臨時性業務的需求能夠滿足
但對於常規業務，至今還沒蓋棺定論的方案，所以才會存在兩種方案：WebView+HTML & Dynative方案。但這兩種方案是存在問題的：
WebView+HTML方案：隨著WebView效能的提升 和 移動端裝置硬體的發展，HTML載入速度 & 渲染速度慢的缺點將會逐漸被完善，所以常規業務需要的效能還是難以滿足。Dynative（如RN、Weex）：雖然效能能滿足，但由於該技術還不成熟，穩定性差，且開發難度大，所以對於常規業務還是非常謹慎的使用。
1.3 解決方案
Tangram 正是解決 常規業務 的方案：在效能、穩定性 & 開發週期 取得較好平衡的一種折中方案。
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的產品，如調整頁面佈局，切換頁面資料等。
- 即 頁面的排版佈局 可 通過後端資料的下發來動態調整
- 服務閘道器的建設目標是最大程度的降低業務建立Tangram頁面的壓力和成本。
但這種動態化 是 面向粗粒度元件：通過 佈局+元件的形式搭建整個頁面，而不是一般從 **基本的UI元素（如按鈕blabla）**搭建頁面。
- 其實也很好理解，業務人員需要用到的是 能承擔一定業務能力的“業務佈局”，而不是單一UI元素（按鈕、文字blabla）
- 好處：使用成本低，上線週期短
4.3 擴充套件性好
採用外掛化擴充套件
內部本來就註冊在框架裡 & 外部也可注入擴充套件模組
4.4 多端一致性
對於業務開發，存在多端表現不一致的問題。為了解決該問題，以前需要通過複雜的閘道器邏輯來相容多端邏輯不一致情況。
為了防止該問題，對於Tangram，預先制定了兩個開發原則：
- 任意新功能的提出都是不區分平臺，在功能設計中必須同時考慮多端功能，具體的實現方案和邏輯必須多端統一Review以保證多端表現一致。
- 任意一端的變更都必須在改動前把方案同步給其他端，而且變更必須多端同步釋出。
5. 架構 & 原理講解
-
Tangram的架構主要由三部分組成：Tangram SDKTangram ACTangram OP
-
每部分的具體細節如下：
本文主要講解的是用於客戶端頁面渲染的Tangram SDK。
5.1 知識儲備
在講解架構前，我們需要先了解Tangram的一些模型知識。
a. 頁面概念模型
-
一個頁面實體由3部分組成：頁面（Page）、卡片（Card） & 元件（Item）
-
具體如下圖：
-
之間的關係：元件 構成 卡片、卡片 構成 頁面。
-
對於
Tangram，他的頁面概念模型可用 樹狀模型（3層結構） 表示：
下面主要講解 三層結構中 的 卡片 & 元件。
b. 卡片
- 作用：負責佈局邏輯
- 即對元件進行 組合 & 佈局
- 只宣告佈局方式，不提供佈局細節
- 組成 卡片由有四部分組成：header、footer、body、style
關於四個部分的細節，我將在Tangram具體使用時進行介紹
c. 元件
- 定義：最小單位的UI元素
日常使用的普通的
View，如按鈕、圖片等等
-
作用：負責UI元素展示 & 業務邏輯
-
組成元素：檢視模型（
ViewModel） & 樣式（Style）
檢視模型：所有元件對有一個統一檢視模型（ViewModel），主要是定義了生命週期事件：
- 元件初始化時會呼叫
init（） - 滑入螢幕繫結資料時，呼叫
bind（） - 滑出螢幕解除繫結時，呼叫
unbind（）
關於 元件的基本樣式 主要包括：元件背景、外邊距、內邊距、元件的寬高比等等。具體細節會在具體使用時介紹。
5.2 Tangram結構
Tangram的結構主要由5部分組成，如下圖：
5.3 原理解析
當頁面資料傳入時：
- 核心引擎呼叫 資料解析器 將 資料 轉換成卡片和元件物件
- 解析過程會根據之前註冊過的卡片、元件型別來解析
- 未定義的資料將會被拋棄
- 資料解析器將解析完畢的卡片、元件物件傳遞給佈局框架，進行頁面渲染。
- 佈局框架 根據卡片提供的佈局資訊進行佈局
- 佈局框架 根據元件提供的元件資訊獲取元件例項，佈局到佈局容器裡
6. 擴充套件模組
- 上面介紹的內容裡是
Tangram的核心功能 - 但當需要落實到具體業務，僅僅該核心功能是無法滿足的，還需要很多輔助、擴充套件的功能
Tangram採用 外掛化形式 進行擴充套件：
7. 具體使用
- 上述講解的 只是
Tangram概念模型基本架構 & 原理 - 在具體實現時 會根據 不同平臺 採用 不同實現 方案：
- 對於
Android：採用基於RecyclerView+自定義LayoutManager的實現方案
- 對於
- 對於
iOS：採用 基於自定義的LazyScrollView的實現方案
8. 總結
-
本文主要詳細講解
Tangram的概念模型 -
關於具體實踐 & 落實到業務使用，請看文章：Android開源庫V - Layout：淘寶、天貓都在用的UI框架，趕緊用起來吧！
-
下面我將繼續對 阿里開源的框架模型
Tangram進行 跟蹤 & 詳細分析 ，有興趣可以繼續關注Carson_Ho的安卓開發筆記