目的
我在模拟微博客户端。
要实现:
当一条微博包含 2-9 张图的时候,图片以九宫格形式展示(去除空白格子)。
当一条微博只包含一张图的时候,图片会比较大。
AutoLayout:实现 一张大图 和 九宫格 的样式
如图所示,九宫格图片为Nine Pics
,底部按钮为3-button-panel
(这个命名很奇怪我知道:D),单张大图为One Pic
。
九宫格每张图的大小是 75px/75px,上下左右有 4px 的间距,所以总长宽为 233px/233px。
单张大图的长宽为 200px/200px。
先不管单张大图的UIImageView
,将 view 里面其他元素通过 AutoLayout 设置好。九宫格的九张图片因为排布整齐,所以我直接用的一个 stackview。
设置Nine Pics
和3-button-panel
的间距为 8px。
然后调整One Pic
大小为合适大小,用 Constrains 束缚住。通过键盘把One Pic
移动到和Nine Pics
左上角对齐的位置。(移动位置为了看起来更直观。所有的约束不是由在storyboard
上显示的位置决定的。)
将One Pic
左、上设置成和Nice Pics
一样的约束:左边 8px,上面 8px。
这个时候因为单张大图的高比九宫格的高小,所以看上去One Pic
和3-button-panel
的间距一定是大于 8px。
但是约束的神奇就是这样。
我们现在设置One Pic
和3-button-panel
的间距为 8px。
这个时候,在3-button-panel
上就有两个上方的约束。
当我们要显示单张大图的时候,通过代码隐藏九宫格self.ninePicsView.hidden = true
。此时,AutoLayout
就会忽略3-button-panel
和Nine Pics
之间的约束,而3-button-panel
和One Pic
之间的约束正常。
如图:
九宫格图片数量变化时手动适应高度
九宫格图片数量不够时,当然是通过hidden=true
隐藏多余的格子。
但是可能是由于我用的stackview,所以隐藏第三排或者第二排和第三排之后,整个 view 的高度并没有改变。(我没有尝试不用 stackview的情况,因为不想破坏辛辛苦苦做好的 storyboard :D。等有时间我再新建一个项目试试。)
所以需要手动改一下。
方法是,建立一个 Constraint Outlet,根据情况修改它的值。
之前我们设置了3-button-panel
和Nine Pics
之间的距离是 8px。我们建立一个这样的 IBOutlet:@IBOutlet weak var constraintButtonPanelAndNinePic: NSLayoutConstraint!
。这个时候,我们就可以通过代码来修改约束值。
比如当有 6 张图片时,
self.seventhPic.hidden = true
self.eighthPic.hidden = true
self.ninethPic.hidden = true
隐藏多余的格子,然后
self.constraintButtonPanelAndNinePic.constant = -75
这个时候,3-button-panel
和Nine Pics
的相对位置就正确了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。