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的相對位置就正確了。

成果