Android-Tangram動態頁面之路（一）需求背景

本系列文章主要介紹天貓團隊開源的Tangram框架的使用心得和原理，因爲Tangram底層基於vlayout，因此也會簡單講解，該系列將按如下大綱進行介紹：

1. 需求背景

   頁面模板的多維度定投（分時、分人羣等）、數據資源位聚合、RecyclerView的異構和扁平。

2. Tangram和vlayout介紹

3. Tangram的使用

4. vlayout原理

5. Tangram原理

6. Tangram二次封裝

本文先主要介紹下需求背景。

需求背景

首先，筆者在工做中（生產環境）使用的並不是Tangram，而是公司內部的框架（未開源），不過原理都大同小異，本系列文章也不會精細到每一行源碼，不求齊全，只求用盡量小的篇幅講明白。

頁面定投

你們都知道，電商行業喜歡造節，從雙11雙12，到如今的32一、61八、921等，幾乎一年四季都會有營銷活動，這些活動能帶動GMV持續造血。一場大促，一般會分預熱期和正式期。預熱期用來造勢，着重透出主會場、活動等內容；正式期則在接近尾聲時，着重透出倒計時內容加強緊迫感（再不剁手就沒機會了），以下圖：

能夠看出，從預熱期到正式期，着重透出的內容不一樣，結構也不一樣。也就是說，須要足夠靈活的頁面模板，知足不一樣時間，不一樣人羣（如多人多面）展現不一樣結構的頁面。固然這點h5也能作到，可是h5體驗要差於native，通常用於臨時活動頁或高度靈活的頁面。像商城首頁，商品詳情等相對穩定的頁面，對靈活性的要求並不是無限制的，只要各模塊足夠抽象、細粒度，native也是能夠知足平常和大促需求的。

數據聚合

如前邊的商城首頁，數據來源也是多渠道的，好比頭部的banner、各種入口、類目模塊，數據來源於一個個不一樣的資源位，由不一樣的人進行配置，而尾部的商品流數據則來源於推薦引擎，以下圖，

客戶端不可能去發起多個請求拉取不一樣資源位的數據，因此就有了聚合層接口，客戶端經過一個聚合接口，獲取聚合數據，

商品流不屬於資源位數據，因此獨立成一個接口。至此，咱們會發現，頁面模板不只要描述頁面結構，還要描述各模塊所需的數據來源。大概以下所示：

{
 "template":[  {  "component":"banner", //輪播圖模塊  "data":"makeup:banner" //數據來源於聚合接口，key爲banner  },  {  "component":"category", //類目模塊  "data":"makeup:category" //數據來源於聚合接口，key爲category  },  {  "component":"goods", //商品流模塊  "data":"request:recommend" //數據來源於request，key爲recommend  }  ] } 複製代碼

RecyclerView的異構和扁平

要實現前邊商城首頁的複雜佈局，一般的思路是定義各類itemType，而後根據itemType來解析不一樣的佈局文件，這麼作每每須要進行一層嵌套，由於RecyclerView自帶的LayoutManager不支持如此異構的佈局，效果以下圖左，

而使用vlayout，能夠免去這層嵌套，如上圖右，讓子view成爲RecyclerView的直接子view，具體咱們運行vlayout的官方Demo，而後使用AS的Tools - Layout inspector功能查看view樹，可見圖中的39和43兩個小模塊都是RecyclerView的直接子view，有着平級關係，

這就是用RecyclerView實現異構和扁平化的基本概念，vlayout經過自定義LayoutManager進行了實現。關於異構和扁平，更詳細的分析可見參考文章。

參考文章

• 蘋果核 - RecyclerView 裏的自定義 LayoutManager 的一種設計與實現

本文使用 mdnice 排版