翻译自:https://useyourloaf.com/blog/...
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 使用场景。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。