前言
在日常開發(fā)過程中，我們會遇到一些需要不定期動態(tài)改變布局的頁面或視圖塊，下面用張圖展示一下：
我以這張圖解釋一下需求，圖上的幾塊都是需要顯示不同的功能模塊，點擊的時候也需要跳轉(zhuǎn)到不同頁面。這個布局實現(xiàn)很簡單，但是如果這個布局需要不定期的更改，比如A換到右邊，大小發(fā)生變化等不確定因素，我們不可能就發(fā)布一個新的版本去修改這個頁面。所以大部分人會選擇
webView來實現(xiàn)，或者事先約定好幾種布局格式，由后臺來隨時改變布局。
解決思路
事實上這一塊并占不了整個頁面，大部分情況下只是在tableView中嵌套一截這樣的需求，我公司項目的實現(xiàn)用的一直是webView來實現(xiàn)，但是這樣就會有很多不必要的問題，比如webView的高度計算，如果客戶端來計算高度，在一些網(wǎng)絡不穩(wěn)定情況下，webView的資源沒有加載完全，高度就會出現(xiàn)偏差，而且webView的加載速度，性能，和js的交互都是很不理想的。（總之，我大原生就是不愛用h5啦）
這里其實有兩種解決方案：
- 方案1：和后臺約定好幾種布局樣式，客戶端根據(jù)后臺參數(shù)來動態(tài)顯示。
- 方案2：這塊視圖看為一個整體，根據(jù)
json數(shù)據(jù)將其分為X個子塊，理論上可以根據(jù)數(shù)據(jù)無限分割下去。
優(yōu)缺點：
第一種方案實現(xiàn)簡單，而且可以應付日常所需，但是提前約定的格式必定不會太多，不夠靈活。
第二種方案完全根據(jù)數(shù)據(jù)決定布局，子塊可以無限分割下去，布局靈活，但是數(shù)據(jù)比較復雜。
實際上第二種布局是最近公司安卓小哥想出來 一個思路，我和他分別實現(xiàn)了一下，發(fā)現(xiàn)效果很好。這里是安卓小哥的簡書。
具體實現(xiàn)
下面來和大家說一下具體的實現(xiàn)思路：
我們還是以這張圖為例：
1、我們首先定義兩個row和item元素，分別對應行和塊的概念。如上圖分為兩行，A那里代表一整行，下面的四小塊代表一整行。分割為row1和row2。
2、row1：分割為AB兩塊，水平排列，寬度比2：3
- A不用再分，直接顯示圖片
- B分為B1、B2兩塊，垂直排列，高度比
1：1 - B2分為D、E兩塊，水平排列，寬度比
1：1
row2：分割為1：1：1：1的四小塊
json數(shù)據(jù)的結(jié)構如下：
{
"images": [
{
"children": [
{
"image": "https://i.huim.com/miaoquan/14966511524892.SS2!/both/300x300/unsharp/true",
"weight": 2
},
{
"children": [
{
"image": "https://i.huim.com/miaoquan/14963170206106.jpg!/both/300x300/unsharp/true",
"weight": 1
},
{
"children": [
{
"image": "https://i.huim.com/miaoquan/14968041079523.jpg!/compress/true/both/300x300",
"weight": 1
},
{
"image": "https://i.huim.com/miaoquan/14968026112335.jpg!/compress/true/both/300x300",
"weight": 1
}
],
"orientation": "h",
"weight": 1
}
],
"orientation": "v",
"weight": 3
}
],
"height": 212,
"orientation": "h"
},
{
"children": [
{
"image": "https://i.huim.com/miaoquan/14929203253142.SS2!/both/300x300/unsharp/true",
"weight": 1
},
{
"image": "https://i.huim.com/contents/14828912708690.jpg!/both/300x300/unsharp/true",
"weight": 1
},
{
"image": "https://i.huim.com/miaoquan/14968146185109.jpg!/both/300x300/unsharp/true",
"weight": 1
},
{
"image": "https://i.huim.com/miaoquan/14968145059484.jpg!/both/300x300/unsharp/true",
"weight": 1
}
],
"height": 138,
"orientation": "h"
}
]
}
數(shù)據(jù)說明：
images：數(shù)組，數(shù)組的元素個數(shù)決定了整個View需要分為幾行row
children：數(shù)組，數(shù)組元素個數(shù)決定了每個row需要分為多少個塊item
height：row的高度
orientation：布局方向，v和h，分別對應垂直和水平方向
image：該子塊顯示的圖片
weight：在這一塊中的權重比
最重要的是對這個數(shù)據(jù)的處理，children代表了塊，這里用到了遞歸的思想，只要這一層的數(shù)據(jù)有children，就需要一直分割下去，直到children為null，停止分割，顯示圖片。這里的數(shù)據(jù)層次較深，邏輯需要處理清晰。
不得不說，安卓小哥的當時提出了這個思路吸引到了我，和他分別實現(xiàn)了過后發(fā)現(xiàn)十分好用。這剛好解決了我公司項目中遇到的問題，如果衍生出去，其實可以代替很多地方的布局方式。這種布局靈活度很高，完全由后端數(shù)據(jù)控制，是個很棒的想法。
下面展示一下我實現(xiàn)的效果圖：
上面的邊框線是我方便區(qū)分每一塊加上的，實際開發(fā)可以忽略。若果需要每個子塊的跳轉(zhuǎn)信息，可以在image那一層加一個參數(shù)。比如我公司是定義了一個頁面跳轉(zhuǎn)協(xié)議，客戶端，前端，后端都是遵循這個協(xié)議，我舉個例子，加了一個跳轉(zhuǎn)參數(shù)"pushurl":"huim://detail?id=1234"，我就知道這塊需要跳轉(zhuǎn)到商品id為1234的詳情頁。實現(xiàn)了高度動態(tài)化布局和跳轉(zhuǎn)。我也不知道該稱之為什么布局，所以暫時稱之為柵格化布局。
局限性
這個布局正如我文章所述，一般是用來實現(xiàn)那種輕量級的頁面，我主要是用來替代那種嵌套的webView的，如果太過復雜的頁面當然就沒有這個必要了。當然可以衍生出去可能會有適合你自己項目的地方。所以，酌情使用吧。
我寫的demo在這里，想要看具體實現(xiàn)的可以前往下載，歡迎提出更好的實現(xiàn)方式。
如果對你有所幫助和啟發(fā)，不妨點個喜歡
