iOS入門

Tangram2.0庫

Android

Tangram-Android
Virtualview-Android

iOS

Tangram-iOS
Virtualview-iOS

tangram 使用的工具類
virtualview_tools

Tangram

ios的Tagram總體由四部分構成：Core,Layout,EventBus,Helper

1、Core

Tangram的複用和回收機制是由core負責的。主要的原理就是使用了LazyScroll（底層是UIScrollView），就是先把LazyScroll裏面所有需要回收復用的視圖的絕對座標先整理出來，然後在LazyScroll滾動的時候，查找哪些視圖需要回收，哪些視圖需要複用。core主要是TangramView。

TangramView的核心方法：

2、LayOut

LayOut主要負責處理內部組件擺放的位置。佈局需要實現TangramLayoutProtocol。它的核心方法是calculateLayout，這裏面需要安排內部ViewModel的位置，決定後面要生成的視圖要如何擺放。
Tangram有豐富的內置佈局可供選擇，比如流式佈局、一拖N的、浮標、固定、吸頂、吸底、輪播、線性滾動、瀑布流等佈局，當然佈局也可以自行拓展。因爲有些布方式比較特殊，TangramView會對它們有特殊的處理邏輯。

佈局樣式：

內置的佈局類型，可以參考
http://tangram.pingguohe.net/docs/layout-support/inner-support

3、EventBus

事件總線用於組件和Controller，layout、TangramView之間的通信。點擊、曝光就是典型的事件總線使用場景。
事件總線的使用方法：

4、Helper

Helper的作用是簡化代碼，快速生成佈局、組件。

Helper具體是指TangramDefaultDataSourceHelper, 這個解析器具備以下功能：

快速解析layout—(NSDictionary -> layout實例)
快速解析Model-----(NSDictionary -> model實例)
從model快速生成element----(model實例 ->組件實例)
用新的model刷新即將被複用的element

TangramDefaultDataSourceHelper實際上是串聯起來了三種類型的工廠類，每種各需要一個。Helper在這三個工廠提供的API基礎上，再封裝成更易於使用的API。這三個工廠默認的是

TangramDefaultLayoutFactory
TangramDefaultItemModelFactory
TangramDefaultElementFactory

VirtualView

VirtualView簡介

VirtualView 是 Tangram 2.0 庫中的一個重要組成部分。是Tangram模型在V2.0補充的UI開源庫。

VirtualView的作用
解決Tangram V1.0中加載性能低和UI組件沒有辦法動態更新的問題。

VirtualView的功能

使用Canvas繪製視圖，創建虛擬化組件
通過XML快速的創建界面模版
客戶端運行時動態加載XML模版，從而渲染界面

VirtualView被稱爲虛擬組件的原因
1、使用canvas繪製視圖
2、不存在實際的view，依賴於宿主容器視圖
3、VirtualView不想我們平常使用的一些控件，比如Label，Button等等

VirtualView的主要流程

提供了用 XML 去書寫 UI 組件的方案，然後動態化下發編譯好的二進制文件，最後再利用客戶端內置的 SDK 來解析展示這些 UI 組件。

VirtualView的主要流程：

流程：

編寫業務組件模板
通過工具將模板數據編譯成二進制數據。注意加載 XML 並不是直接加載原始 XML 文件，而是先通過 virtualview_tools 編譯成一段二進制數據，生成後綴爲 .out的文件。
下發到客戶端。客戶端加載二進制數據可以有兩種路徑：
第一種：直接將編譯結果打包到客戶端里加載，
第二種：是發佈到模板管理後臺cdn上，讓客戶端去下載，在線更新到模版數據。
加載解析二進制數據。不論是那種方式加載二進制數據，客戶端的工作都需要解析二進制數據，比如校驗版本號，合法性，讀取頭信息等等。
創建組件視圖。會根據組件名稱找到二進制數據，通過上面介紹過的Helper工具解析並且創建出真正的組件模型數據。
綁定業務數據。用戶需要獲取到業務數據綁定到組件上，組件的屬性裏可以寫表達式來指定使用哪一個數據字段。
顯示，組件結合業務數據渲染在視圖上面。

VirtualView的特點

1、渲染性能高。渲染出來的視圖結構呈現扁平化。
2、組建熱更新。可以通過配套的xml模版來更新sdk；可以動態更新組件和界面。
3、跨平臺。一套xml模版，可以android、iOS倆個不同的平臺使用。
4、兼容性好。可以支持加載、渲染原生基礎組件；也可以解決虛擬化view帶來的原生view的能力損失的問題。
5、使用方便。它內置了一系列基礎組件可以直接被使用；也支持數據綁定的表達式。也可以在樣式動態化。數據動態化的場景下能非常方便地實現業務需求。

參考文件

https://www.jianshu.com/p/48764ff8449f

https://www.jianshu.com/p/cd634106f533

http://pingguohe.net/2017/04/24/tangram-ios-structure.html

http://tangram.pingguohe.net/docs/ios/tangram-core

Tangram入門