[譯]Stack View 自定義間隙

翻譯自：https://useyourloaf.com/blog/stack-view-custom-spacing/

Apple 在 iOS9 引入了 StackView，使用它能夠減小約束的數量，讓使用 AutoLayout 更加容易。但有一種邊界使用場景是須要自定義視圖之間的間隙。這種狀況可使用嵌套佈局的方式來解決，但解決方案有些複雜。在 iOS 11 中給出瞭解決方案，你能夠在 StackView 中自定義視圖之間的間隙。

問題描述

這是我想建立的佈局：

如圖所示，共有5個 Label。最上面的大字 Label，中間三個標準 Label，以及最下面的小字 Label。中間三個 Label 的間隙是 8pt，最上面和最下面的兩個 Label 的間隙是 32pt。

UIStackView 在相等距離垂直分配視圖的狀況下工做的很好。經過設置 StackView 的間隙屬性，每一個子視圖的間隙是相等的。

Stacking Stacks

使用內嵌 StackView 的方式實現佈局。

Inner StackView 包含三個 Label，8pt 的間隙，外部 StackView 有 32pt 的間隙。這看起來能工做，實則多是引入了麻煩。好比我想 header 和 footer 的間隙不同，這就很麻煩。

自定義間隙(iOS 11)

在 iOS 11中，給某個 stackView 中的元素自定義間隙成爲可能。假設咱們已經構建好一個 stackView：

let stackView = UIStackView(arrangedSubviews: [headerLabel, topLabel, middleLabel, bottomLabel, footerLabel])
stackView.axis = .vertical
stackView.alignment = .fill
stackView.spacing = 8.0
複製代碼

stackView 中的每一個元素間隙是8pt。想要自定義header 標籤和 footer 標籤的間隙，能夠直接調用 iOS11 的方法設置：

// iOS 11 only
stackView.setCustomSpacing(32.0, after: headerLabel)
stackView.setCustomSpacing(32.0, after: bottomLabel
複製代碼

說明：

• 你能夠指定某個 stackView 子元素以後的間隙，可是目前沒有方法指定以前的間隙。
• 在 InterBuilder 中，你沒法設置自定義間隙。只能在代碼中完成。
• 當你 從 stackView 中移除元素，系統自動移除自定義間隙。

標準間隙和默認間隙

UIStackView 在 iOS 11中增長了兩個新屬性，定義了系統間隙和默認間隙的值：

class let spacingUseDefault: CGFloat
class let spacingUseSystem: CGFloat
複製代碼

這兩個屬性的值是由系統保存和定義的，使用的時候不要直接保存他們的返回值。系統間隙彷佛返回8pt，仍是再強調一下，使用的時候應該直接訪問這兩個屬性而不是保存他們的值。

你能夠用這兩個屬性設置或者恢復自定義的間隙。

將系統間隙的值設置給最上面的 label：

stackview.setCustomSpacing(UIStackView.spacingUseSystem, after: topLabel)
複製代碼

恢復 stackView 元素的間隙（移除自定義的間隙）：

stackview.setCustomSpacing(UIStackView.spacingUseDefault, after: topLabel)
複製代碼

譯者注： 在設置了 stackView 的 spacing 值爲5，設置 customSpacing 的值爲10，而後界面調整了，想把自定義間隙恢復爲5，那麼這時只能調用 setCustomSpacing 將值設置爲 spacingUseDefault，若是設置爲0，將幹掉全部的間隙。這是我理解的 spacingUseDefault 使用場景。