AutoLayout：UITableViewCell 自适应高度的一个例子

原文连接：AutoLayout：UITableViewCell 自适应高度的一个例子

目的

我在模拟微博客户端。

要实现：
当一条微博包含 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的相对位置就正确了。

成果