天天看點

如何使用masonry設計複合型cell[轉]

前言

分析

我們以葉孤城同學的例子來簡單分析一下 假設view是這樣的(為了友善 将所有的間隙設定為20)

正常的布局是這樣的

如何使用masonry設計複合型cell[轉]

布局代碼如下:

如何使用masonry設計複合型cell[轉]
如何使用masonry設計複合型cell[轉]

實際效果如圖

如何使用masonry設計複合型cell[轉]

看上去還不錯

在masonry中 針對單條的maslayoutconstraint可以進行active和deactive操作 那麼意味着可以動态的啟用或者禁用某條預置的限制 是以我們隻要預先設定一條高優先級的高度為0(或者寬度為0)的限制 然後在适當的時候激活它不就行了? 先嘗試隐藏紅色的view 隐藏後如下

如何使用masonry設計複合型cell[轉]

啊~哦~ 結果不正确 隐藏是隐藏了 但是間隙沒有隐藏 導緻縫變大了 這是因為我們僅僅隐藏了view 而沒有隐藏view之間的間隔 那麼應該如何處理這種情況呢?

主流的做法是将這個view的所有限制值全設定成0 然後恢複的時候再還原 這種方法需要記錄原值 但是在前言我說了 要用稍微麻煩的方法來解決這個問題 是以肯定不是這樣做啦

我采用的方法是group法 具體如下圖

如何使用masonry設計複合型cell[轉]

其實在第一行還有一個groupview如圖

如何使用masonry設計複合型cell[轉]

但是因為圖顯示出來不太好看(不會畫圖 t_t ) 是以我隐藏了 具體可以看代碼細節

每個(或者每組)可以隐藏的view 都對應有一個group view(group其實就是包含了view和spacing) 需要隐藏的時候 直接隐藏這個group 就可以達到既隐藏view又縮短間隙的目的

代碼較長 大家可以選擇跳過 - -!

如何使用masonry設計複合型cell[轉]
如何使用masonry設計複合型cell[轉]

然後 為每種不同的布局定義一個枚舉(為了舉例我随便定義的 0和1代表這個view是否被顯示)

如何使用masonry設計複合型cell[轉]
如何使用masonry設計複合型cell[轉]

這樣 在tableview的datasource中我們隻要這樣做就可以了

如何使用masonry設計複合型cell[轉]
如何使用masonry設計複合型cell[轉]

看看效果 是不是很不錯

如何使用masonry設計複合型cell[轉]
如何使用masonry設計複合型cell[轉]
如何使用masonry設計複合型cell[轉]
如何使用masonry設計複合型cell[轉]
如何使用masonry設計複合型cell[轉]
如何使用masonry設計複合型cell[轉]

小結

可能很多人看了覺得我在瞎折騰 明明一個挺簡單實作的東西 被我一弄 弄得又長又臭 其實不然 像我這種方法雖然麻煩了點(文章開頭就指出了) 但是面對稍微複雜點的需求 卻是更得心應手(其實有點類似div+css的感覺有木有?)

使用group的方式 面對同時在橫向和縱向都有隐藏要求的時候 會友善很多

比如文中舉的例子 第一行有時會隐藏藍色的按鈕 有時整個一行都會不顯示 這樣的話 當我想隐藏按鈕時 隻要激活按鈕的限制 想隐藏整行時 隻要激活整行的那條限制就行了

from:http://adad184.com/2015/06/08/complex-cell-with-masonry/

歡迎加群互相學習,共同進步。qq群:ios: 58099570 | android: 330987132 | go:217696290 | python:336880185 | 做人要厚道,轉載請注明出處!http://www.cnblogs.com/sunshine-anycall/p/4812790.html