iOS Tangram(VirtualView)動態組件的學習與使用

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有出入, 好比佈局和顯示的層級都有些問題沒有獲得解決, 而且發現這個庫已經有一段時間沒有維護 近期也沒有更新計劃 遂短期內部會再使用此庫 可是會長期關注其發展, 文章內若有問題請及時與我聯繫 謝謝!