Tangram 是阿里團隊構建的一款可以動態實現修改UI佈局和資料展示的UI庫, iOS版本最低支援到7.0 , VirtualView 是 Tangram 升級過程中引入的新的元件開發技術，它開創了一種虛擬化開發基礎控制元件的技術，使用方只要按照指定協議實現一個基礎控制元件的尺寸計算、繪製邏輯、佈局邏輯，即能實現在宿主容器的 canvas 裡實現直接繪製 UI 內容的，讓最終渲染出來的檢視結構呈現扁平化，提升元件渲染效能。同時為了解決虛擬化 View 帶來的原生 View 的能力損失的問題，它支援載入和渲染原生基礎控制元件，兩者組合產生合力，既能最大限度發揮效能提升，又能滿足特殊場景下的業務需求。 VirtualView 內建實現了一系列基礎控制元件，可以讓使用方直接上手嘗試；而搭建業務元件的方式採用 XML 模板來編寫，這使得業務元件動態更新成為了可能。XML 模板裡還支援寫資料繫結的表示式，在樣式動態化、資料動態化的場景下能非常方便地實現業務需求。
官方學習文件地址是:http://tangram.pingguohe.net/
下面是我們學習個構建專案的一些demo地址:
- Tangram專案github地址:
https://github.com/alibaba/Tangram-iOS - VirtualView專案github地址:
https://github.com/alibaba/VirtualView-iOS - virtualview_tools 地址:
https://github.com/alibaba/virtualview_tools
VirtualView下載後是一個工作空間 使用cocoapods pod install匯入所需的庫, 其中包含兩個專案 一個是 RealtimePreview 其用來動態實現熱更新方便除錯,下面會詳細介紹配合virtualview_tools使用, 另外一個是VirtualViewDemo, 其是用來演示官方提供的一些案例,在介紹動態元件的地方在內都可以找到演示demo,方便查詢和學習使用,簡單瞭解完這個工作空間(VirtualView)所包含的兩個專案後,我們著重說下virtualview_tools,這個除錯工具極大的方便了我們除錯介面,我使用的是atom開發工具編輯此專案,開啟專案 進入compiler-tools資料夾下會發現RealtimePreview和TemplateWorkSpace這兩個檔案,其中RealtimePreview是我們動態除錯使用的 TemplateWorkSpace 是我們動態除錯完打包用的,在RealtimePreview內templates檔案內是我們存放模板檔案的地方。
- run.sh(指令碼檔案,用來啟動熱更新編譯除錯 開啟終端cd到此資料夾下 sh run.sh 執行此命令 會在本地起一個服務提供對專案RealtimePreview的介面服務,以此來實現熱更新除錯)
在templates資料夾下回發現有一個HelloWorld資料夾,這個就是demo示例裡演示的模板檔案,其內部分別包含:
- data.json (其是根據下面json和xml兩個檔案 生成的資料檔案, xml檔案會被編譯成進位制檔案寫入其內)
- HelloWorld.json (資料檔案)
- HelloWorld.xml(佈局檔案)
下面我們來快速的使用其構建一個介面:
xcode啟動RealtimePreview專案, 然後 執行run.sh指令碼啟動服務 atom開啟virtualview_tools專案:
我們按照HelloWorld的模板新建自定義模板, 使用RealtimePreview動態除錯, run.sh執行指令碼成功後,專案如下圖顯示:
接下來進入HelloWorld就能熱更新除錯介面了
通過atom修改HelloWorld.xml儲存後 介面也隨之改變
ps: virtualview_tools 工具需要 java JDK和 python 工具配合使用 其中利用Python會在模板檔案內生成二維碼圖片,用來真機除錯使用 具體環境配置搭建就不詳細描述 參考官方提供的資料 應該比較詳細,看完此篇文章應該再去學習會多少心裡有個大體思路(會java開發的更好理解)
通過以上已經簡單的可以自定義模板了, 下面在介紹下如何生成我們需要的.out檔案放到ios專案內, 編譯好xml模板檔案後,我們把其複製到/compiler-tools/TemplateWorkSpace/template 資料夾下 這裡面放置了我們和官方寫好的一些xml模板檔案, 然後在上一級目錄下我們會看到 buildTemplate.sh 指令碼檔案和build資料夾
- buildTemplate.sh 編譯最終需要的模板檔案的指令碼(其會將template內的xml檔案分別編譯成對應的檔案使用 最終生成的檔案會匯出到build資料夾下 使用方式同run.sh)
- build 其記憶體放編譯好的模板檔案
注意: iOS使用out資料夾下的檔案 Android使用java資料夾下的(Android需要將.java檔案自行再次編譯後使用)
將編譯好的.out檔案直接拖拽到自己的專案中(專案別忘了導所需要的庫)
我實現動態佈局的思路是, 先在專案內放置.out檔案 然後再對應介面內寫入本地對應的json資料, 介面初始時 從伺服器下載服務端的.out檔案到本地沙盒,然後讀取沙盒內.out檔案和服務端的資料顯示介面,如果服務端請求失敗載入本地專案內.out檔案和本地json資料。具體使用細節如點選事件的獲取等等請參考官方提供的文件,比如要先註冊自定義元件再載入模板檔案等等 最終實現介面如圖:
注: 本人在使用時發現了不少問題, 很多地方和Android有出入, 比如佈局和顯示的層級都有些問題沒有得到解決, 並且發現這個庫已經有一段時間沒有維護 近期也沒有更新計劃 遂短時間內部會再使用此庫 但是會長期關注其發展, 文章內如有問題請及時與我聯絡 謝謝!