xcode - 自动布局 - 平均分配 6 个 View

Question

我想在一个 View 中布置 6 个对象(按钮)。但是，它们应该遵循一些限制条件:

两个顶部按钮与 super View ( A )

的垂直距离应相同

两个底部 - 相同 ( C )

中间的两个中心应该在父 View 的中心线

所有按钮之间的垂直距离 ( E ) 应该相同

最后但并非最不重要的 - 按钮应该是方形的(所以宽度和高度应该相同)

A = C

B = D

是否有可能仅在 IB 中产生这种效果，还是应该使用一些额外的代码来限制？

Answer 1

这是一个逻辑请求，但约束是使用 View 的属性定义的，但不能相对于其他约束来定义。话虽如此，有多种方法:

布局指南:一种不需要预先确定任何间距的方法是让 UILayoutGuide对象，或者，如果使用 9 之前的 iOS 版本，只需在按钮之间使用隐藏 View ，即具有清晰背景或 alpha 为零的 View 。

我们的想法是使用 addLayoutGuide 添加这些布局指南。 (或使用 addSubview 添加不可见 View ，如果支持 iOS 9 之前的 iOS 版本)在您的六个按钮之间作为“间隔器”，并将间隔器定义为彼此相同的大小，并在间隔器、 super View 、和将在垫片之间的按钮。布局后(以蓝色显示水平间隔 View ，以红色显示垂直间隔 View ，以便您可以看到它们):



那些红色约束的等效 VFL UIView对象，称为 vspacerX ， 将是:

H:|[vspacer1][button1(100)][vspacer2(==vspacer1)][button2(==button1)][vspacer3(==vspacer1)]|
H:|[vspacer1][button3(==button1)][vspacer2][button4(==button1)][vspacer3]|
H:|[vspacer1][button5(==button1)][vspacer2][button6(==button1)][vspacer3]|

和约束上的蓝色UIView对象，称为 hspacerX ， 喜欢:

V:|[hspacer1][button1(100)][hspacer2(==hspacer1)][button3(==button1)][hspacer3(==hspacer1)][button5(==button1)][hspacer4(==hspacer1) )]|
V:|[hspacer1][button2(==button1)][hspacer2][button4(==button1)][hspacer3][button6(==button1)][hspacer4]|

您不必使用 VFL 来定义这些约束，因为您定义这些约束的任何方式都可以使用，但这只是一种描述我使用的约束集合的简明格式。

无论如何，当使用这些布局指南(或不可见 View )呈现 View 时，它会产生均匀间隔的按钮，如下所示:

另一种方法是拥有六个“容器” View ，如下所示:



这六个容器的等效 VFL UIView对象可能如下所示:

H:|[容器 1][容器 2(==容器 1)]|
H:|[container3(==container1)][container4(==container1)]|
H:|[container5(==container1)][container6(==container1)]|

V:|[container1][container3(==container1)][container5(==container1)]|
V:|[container2(==container1)][container4(==container1)][container6(==container1)]|

然后你可以添加你的按钮，将一个按钮放在六个小容器中的每一个上，然后让你的容器清晰:



这也有效，但只是间距略有不同(其中边距是 View 之间间距的一半，而另一种方法使边距与它们之间的间距相同。

堆栈 View :在前一点的排列中，在iOS 9中，您还可以使用 UIStackView ，专为均匀间隔 View 而设计。在这种情况下，将两个按钮分别放在三个水平堆栈 View 中，然后将这些堆栈 View 放置在垂直堆栈 View 中。这实现了六个大小均匀的容器 View 。

观看 WWDC 2015 视频 What's New in Cocoa Touch .

堆栈 View 的问题在于它们可用于确保排列的 subview 之间的间距均匀，它们不能确保第一个排列 View 之前或最后一个排列 View 之后的间距。因此，解决这个问题的方法是，对于水平堆栈 View ，包括另外两个零宽度 View (或垂直堆栈 View 为零高度)。然后，当您在堆栈 View 上使用均匀间距时，它还会为您提供所有排列的 subview 前后的间距。

NSLayoutAttributeCenterX与 multiple :另一种技术涉及定义 attribute:NSLayoutAttributeCenterX和 attribute:NSLayoutAttributeCenterY六个按钮的属性，而不是使用 constant值，使用 multiplier field 。这个技巧有点简单，但并不总能呈现出想要的效果，所以我不会描述它，除非它是你肯定想要追求的东西。我已经在这里进入了 tl:dr 领域。

收藏 View :另一种方法是使用 UICollectionView ，它可以优雅地处理这种情况。它经过精心设计，可让您在网格中布局单元格。

硬编码值:为完整起见，我将指出您可以简单地为 A、B、C 和 D(以及宽度和高度约束)指定特定值。您甚至不必担心设置 E 约束，而只需将中间两个的垂直中心约束设置为它们的超 View ，您就有效地完成了(因为 E 表示的间距应该是前面的步骤，假设 A=C 和 B=D)。如果您想根据设备大小和/或方向调整这些值，则可以实现 viewWillLayoutSubviews根据 View 的大小调整这些约束的常量。