使用自动布局和约束设置按钮

Question

屏幕上有 4 个按钮。我想将所有 4 按钮放置在屏幕中，与所有屏幕中的图像中显示的距离相同，即 4s、5s、6 和 6plus。

我添加的约束

Button 1 : 
Top , leading and trailing

Button 4: 
Bottom , leading and trailing

Button 2 : 
Leading
trailing
top to button 1

Button 3: 
    Leading
    trailing
    top to button 2
    bottom to button 4

但我无法实现按钮 2 和按钮 3 的距离相同。我只想通过使用自动布局和约束来实现这一点。

请指教

Answer 1

这样试试，

你的约束应该是这样的，

按钮 1 - 顶部、前导和尾随或容器中的水平居中。

按钮 2 - 顶部、前导和尾随或容器中的水平居中。

按钮 4 - 底部、前导和尾随或容器中的水平居中。

按钮 3 - 底部、前导和尾随或容器中的水平居中。

现在为按钮 2 取顶部约束的出口（ctrl+从约束拖动到 class）并从按钮 3 取底部约束的出口。

例如你的outlet分别是button2Outlet & button3Outlet。

所以，从 viewdidload 来看，

CGFloat constantVslue = self.view.frame.size.height - (4 * buttonHeight) - 40 (top distance of button 1 + bottom distance of button 4); 

//40 is distance from top and bottom of 1st and 4th button respactively in my case (20+20) and in my case my button height is 30 so total 120.

CGFloat distance = constantVslue/3;

self.button2Outlet.constant = distance;
self.button3Outlet.constant = distance;

希望这会有所帮助:)

Answer 2

自动布局的完整解决方案。

因为，您在视图中使用了偶数个按钮，因此您需要在视图的中心（X 和 Y）位置添加高度为 2 的 UILabel。以下约束适用于所有屏幕，即 4s、5s、6 和 6plus。

[注意：如果是奇数按钮，将使用中间的 BUTTON 代替标签]

约束条件：

标签： 1.中心-X 2.中心-Y 3.固定高度和宽度（高度=2，宽度=无限制）

按钮 1:

底部到按钮 2（例如 70）
中心-X
固定高度宽度

按钮 2：

顶部到按钮 3（例如 70）
底部到标签（例如 34）
中心-X
固定高度宽度

按钮 3:

顶部到标签（例如 34）
Bottom 到 BUTTON 4（例如 70）
中心 X
固定高度宽度

按钮 4:

顶部到 BUTTON-3（例如 70）
中心-X
固定高度宽度

Answer 3

这完全可以通过 Interface Builder 实现：

如果你想支持 iOS 版本 before iOS9

您需要使用隐藏的 spacer UIViews（下图中的橙色）
他们的身高应该相等
按钮与其相邻 spacer 视图之间的距离应设置为 0

这使您能够为每种设备类型创建自适应布局（如果您将 spacer 的视图高度设置为与超级视图的高度成比例）：

对于 iOS9+ 只需使用带有垂直轴和所需分布的 UIStackView space

使用自动布局和约束设置按钮

set the button with usage autolayout and constraint

constraints

ios

ios-autolayout