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 Pics3-button-panel的间距为 8px。

然后调整One Pic大小为合适大小,用 Constrains 束缚住。通过键盘把One Pic移动到和Nine Pics左上角对齐的位置。(移动位置为了看起来更直观。所有的约束不是由在storyboard上显示的位置决定的。)
One Pic左、上设置成和Nice Pics一样的约束:左边 8px,上面 8px。

这个时候因为单张大图的高比九宫格的高小,所以看上去One Pic3-button-panel的间距一定是大于 8px。

但是约束的神奇就是这样。

我们现在设置One Pic3-button-panel的间距为 8px。

这个时候,在3-button-panel上就有两个上方的约束。

当我们要显示单张大图的时候,通过代码隐藏九宫格self.ninePicsView.hidden = true。此时,AutoLayout就会忽略3-button-panelNine Pics之间的约束,而3-button-panelOne Pic之间的约束正常。

如图:

九宫格图片数量变化时手动适应高度

九宫格图片数量不够时,当然是通过hidden=true隐藏多余的格子。

但是可能是由于我用的stackview,所以隐藏第三排或者第二排和第三排之后,整个 view 的高度并没有改变。(我没有尝试不用 stackview的情况,因为不想破坏辛辛苦苦做好的 storyboard :D。等有时间我再新建一个项目试试。)

所以需要手动改一下。

方法是,建立一个 Constraint Outlet,根据情况修改它的值。

之前我们设置了3-button-panelNine Pics之间的距离是 8px。我们建立一个这样的 IBOutlet:@IBOutlet weak var constraintButtonPanelAndNinePic: NSLayoutConstraint!。这个时候,我们就可以通过代码来修改约束值。

比如当有 6 张图片时,

1
2
3
self.seventhPic.hidden = true
self.eighthPic.hidden = true
self.ninethPic.hidden = true

隐藏多余的格子,然后

1
self.constraintButtonPanelAndNinePic.constant = -75

这个时候,3-button-panelNine Pics的相对位置就正确了。

成果