iOS一種動態柵格布局方案，ios柵格布局

iOS一種動態柵格布局方案，ios柵格布局

點擊上方“iOS開發”，選擇“置頂公眾號”

關鍵時刻，第一時間送達！

前言

在日常開發過程中，我們會遇到一些需要不定期動態改變布局的頁面或視圖塊，下面用張圖展示一下：

zdm_home.png

我以這張圖解釋一下需求，圖上的幾塊都是需要顯示不同的功能模組，點擊的時候也需要跳轉到不同頁面。這個布局實現很簡單，但是如果這個布局需要不週期性更改，比如A換到右邊，大小發生變化等不確定因素，我們不可能就發布一個新的版本去修改這個頁面。所以大部分人會選擇webView來實現，或者事先約定好幾種布局格式，由後台來隨時改變布局。

解決思路

事實上這一塊並占不了整個頁面，大部分情況下只是在tableView中嵌套一截這樣的需求，我公司項目的實現用的一直是webView來實現，但是這樣就會有很多不必要的問題，比如webView的高度計算，如果用戶端來計算高度，在一些網路不穩定情況下，webView的資源沒有載入完全，高度就會出現偏差，而且webView的載入速度，效能，和js的互動都是很不理想的。（總之，我大原生就是不愛用h5啦）

這裡其實有兩種解決方案：

• 方案1：和後台約定好幾種配置樣式，用戶端根據後台參數來動態顯示。

• 方案2：這塊視圖看為一個整體，根據json資料將其分為X個子塊，理論上可以根據資料無限分割下去。

優缺點：

第一種方案實現簡單，而且可以應付日常所需，但是提前約定的格式必定不會太多，不夠靈活。

第二種方案完全根據資料決定布局，子塊可以無限分割下去，布局靈活，但是資料比較複雜。

實際上第二種布局是最近公司安卓小哥想出來 一個思路，我和他分別實現了一下，發現效果很好。

具體實現

下面來和大家說一下具體的實現思路：

zdm_home.png

我們還是以這張圖為例：

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資料的結構如下：

{

    "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"

        }

    ]

}

資料說明：

images：數組，數組的元素個數決定了整個View需要分為幾行row

children：數組，數組元素個數決定了每個row需要分為多少個塊item

height：row的高度

orientation：布局方向，v和h，分別對應垂直和水平方向

image：該子塊顯示的圖片

weight：在這一塊中的權重比

最重要的是對這個資料的處理，children代表了塊，這裡用到了遞迴的思想，只要這一層的資料有children，就需要一直分割下去，直到children為null，停止分割，顯示圖片。這裡的資料層次較深，邏輯需要處理清晰。

不得不說，安卓小哥的當時提出了這個思路吸引到了我，和他分別實現了過後發現十分好用。這剛好解決了我公司項目中遇到的問題，如果衍生出去，其實可以代替很多地方的布局方式。這種布局靈活度很高，完全由後端資料控制，是個很棒的想法。

下面展示一下我實現的：

FSGridLayoutDemo.gif

上面的邊框線是我方便區分每一塊加上的，實際開發可以忽略。若果需要每個子塊的跳轉資訊，可以在image那一層加一個參數。比如我公司是定義了一個頁面跳轉協議，用戶端，前端，後端都是遵循這個協議，我舉個例子，加了一個跳轉參數"pushurl":"huim://detail?id=1234"，我就知道這塊需要跳轉到商品id為1234的詳情頁。實現了高度動態化布局和跳轉。我也不知道該稱之為什麼布局，所以暫時稱之為柵格化布局。

局限性

這個布局正如我文章所述，一般是用來實現那種輕量級的頁面，我主要是用來替代那種嵌套的webView的，如果太過複雜的頁面當然就沒有這個必要了。當然可以衍生出去可能會有適合你自己項目的地方。所以，酌情使用吧。

我寫的demo（https://github.com/shunFSKi/FSGridLayoutDemo），想要看具體實現的可以前往下載，歡迎提出更好的實現方式。

如果對你有所協助和啟發，不妨點個喜歡

68fc9e97e32f8d394891bde8424dfac5.png

• 作者：PURE藍胖子

• 連結：http://www.jianshu.com/p/a728ae289d0d

• iOS開發整理髮布，轉載請聯絡作者授權

【點擊成為Android大神】