利用 auto layout 條件自動計算 cell 高度

為了讓表格 cell 的內容在不同大小的 iPhone 都能完整顯示,我們通常要為 cell 裡的元件加入 auto layout 條件。有了這些條件,透過 subview 條件決定 superview 大小的原理,auto layout 將可自動計算 cell 容納元件所需的高度。

讓我們先看一兩個簡單的例子,然後再說明複雜的例子。

  • 例子 1

label 跟 ContentView 之間的上間距 & 下間距為 10。

想讓 auto layout 正確計算 cell 的高度,關鍵在於 Y 軸的條件。剛剛的例子裡,Y 軸的條件有上間距 10,下間距 10,label 的高度由文字內容決定,文字的行數愈多 label 愈高,因此 cell 高度將是 10 + 10 + label 的高度。

  • 例子 2

圖片的高度為 85,上下間距各為 20。

剛剛的例子裡,Y 軸的條件有上間距 20,下間距 20,圖片高度 85,因此 cell 高度將是 125。(85 + 20 + 20)

接下來讓我們看一些更複雜的例子,在 cell 裡顯示蘇軾的名作念奴嬌為例說明。

在 storyboard 加入 table view controller

調整 cell 的高度,方便待會在 cell 裡加入 label。

加入 2 個 label

  • label 的文字輸入念奴嬌 & 大江東去的內容。
  • 大江東去 label 的 lines 設為 0,讓它可以顯示多行文字。
  • 將 label 上下左右的間距設為 10。

cell 有 margin,在此我們不包含 margin,因此取消 Constrain to margins 的勾選。

加了 auto layout 條件後,此時卻跑出了可怕的紅色錯誤。

此錯誤其實是假的,若我們執行 App,App 將可完美地顯示大江東去。

不過紅色錯誤看了還是令人心煩。沒關係,只要設定以下欄位,即可讓 interface builder 從條件算出正確的 cell 高度,不再看到紅色錯誤。

  • table view 的 row height & estimate 為 Automatic。

row height & estimate 為 Automatic 時,表示利用 auto layout 條件自動計算 cell 高度。當框框裡沒有輸入數字時,內容將預設為 Automatic。

ps: 上圖的設定若要從程式設定,可透過以下程式。

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = UITableView.automaticDimension
  • 清空 table view cell 的 Row Height 框框。

請空 Row Height 框框,讓 interface builder 顯示 cell 時依據 auto layout 條件計算並更新 cell 高度。

  • 將念奴嬌 label 的 content hugging priority vertical 設成 252。

讓兩個 label 的 content hugging priority vertical 不一樣,讓 interface builder 知道該如何分配 2 個 label 的高度。(ps: 其實 App 執行時是正常的,調整 priority 只是為了修正 interface builder 顯示的問題)

Cool,現在我們終於可以在 interface builder 看到大江東去完整顯示,cell 也能顯示正確的高度。

當條件有問題

搭配 auto layout 條件計算 cell 高度時記得條件要設好設滿,如果條件有問題,它可是算不出來的,cell 只能可憐地變成預設的高度。

比方大江東去 label 少了跟 cell 下邊界的條件,因此無法算出 cell 的高度。

此時不會有錯誤,但 cell 的高度將變成 43.5。

搭配 stack view 設計 cell

cell 裡的內容也很適合搭配 stack view 設計,如下圖所示,我們可將兩個 label 裝在 vertical stack view 裡。

而且搭配 stack view 後,我們要設定的條件變少了。原本上下左右間距 10 要 7 個條件,現在我們只要設定 4 個條件。(為了讓 interface builder 正確顯示,念奴嬌 label 的 content hugging priority vertical 記得要設成 252。)

--

--

彼得潘的 iOS App Neverland
彼得潘的 Swift iOS App 開發問題解答集

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com