天天看点

如何使用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