引言

Apple 在 iOS9 引入了 StackView，使用它可以減少約束的數(shù)量，讓使用 AutoLayout 更加容易。但有一種邊界使用場景是需要自定義視圖之間的間隙。這種情況可以使用嵌套布局的方式來解決，但解決方案有些復(fù)雜。在 iOS 11 中給出了解決方案，你可以在 StackView 中自定義視圖之間的間隙。

問題描述

這是我想創(chuàng)建的布局：

如圖所示，共有5個(gè) Label。最上面的大字 Label，中間三個(gè)標(biāo)準(zhǔn) Label，以及最下面的小字 Label。中間三個(gè) Label 的間隙是 8pt，最上面和最下面的兩個(gè) Label 的間隙是 32pt。

UIStackView 在相等距離垂直分配視圖的情況下工作的很好。通過設(shè)置 StackView 的間隙屬性，每個(gè)子視圖的間隙是相等的。

Stacking Stacks

使用內(nèi)嵌 StackView 的方式實(shí)現(xiàn)布局。

Inner StackView 包含三個(gè) Label，8pt 的間隙，外部 StackView 有 32pt 的間隙。這看起來能工作，實(shí)則可能是引入了麻煩。比如我想 header 和 footer 的間隙不一樣，這就很麻煩。

自定義間隙(iOS 11)

在 iOS 11中，給某個(gè) stackView 中的元素自定義間隙成為可能。假設(shè)我們已經(jīng)構(gòu)建好一個(gè) stackView：

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

stackView 中的每個(gè)元素間隙是8pt。想要自定義header 標(biāo)簽和 footer 標(biāo)簽的間隙，可以直接調(diào)用 iOS11 的方法設(shè)置：

// iOS 11 only
stackView.setCustomSpacing(32.0, after: headerLabel)
stackView.setCustomSpacing(32.0, after: bottomLabel

說明：

• 你可以指定某個(gè) stackView 子元素之后的間隙，但是目前沒有方法指定之前的間隙。
• 在 InterBuilder 中，你無法設(shè)置自定義間隙。只能在代碼中完成。
• 當(dāng)你 從 stackView 中移除元素，系統(tǒng)自動(dòng)移除自定義間隙。

標(biāo)準(zhǔn)間隙和默認(rèn)間隙

UIStackView 在 iOS 11中增加了兩個(gè)新屬性，定義了系統(tǒng)間隙和默認(rèn)間隙的值：

class let spacingUseDefault: CGFloat
class let spacingUseSystem: CGFloat

這兩個(gè)屬性的值是由系統(tǒng)保存和定義的，使用的時(shí)候不要直接保存他們的返回值。系統(tǒng)間隙似乎返回8pt，還是再強(qiáng)調(diào)一下，使用的時(shí)候應(yīng)該直接訪問這兩個(gè)屬性而不是保存他們的值。

你可以用這兩個(gè)屬性設(shè)置或者恢復(fù)自定義的間隙。

將系統(tǒng)間隙的值設(shè)置給最上面的 label：

stackview.setCustomSpacing(UIStackView.spacingUseSystem, after: topLabel)

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

stackview.setCustomSpacing(UIStackView.spacingUseDefault, after: topLabel)

譯者注：

在設(shè)置了 stackView 的 spacing 值為5，設(shè)置 customSpacing 的值為10，然后界面調(diào)整了，想把自定義間隙恢復(fù)為5，那么這時(shí)只能調(diào)用 setCustomSpacing 將值設(shè)置為 spacingUseDefault，如果設(shè)置為0，將干掉所有的間隙。這是我理解的 spacingUseDefault 使用場景。

翻譯自：https://useyourloaf.com/blog/...

以上就是Stack View自定義間隙減少約束的數(shù)量的詳細(xì)內(nèi)容，更多關(guān)于Stack View自定義間隙的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論