[译]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 使用場景。
總結
以上是生活随笔為你收集整理的[译]Stack View 自定义间隙的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MVP架构设计 进阶三
- 下一篇: RPC框架原理及从零实现系列博客(二):