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

Posted 2023-03-15

【中文标题】使用自动布局和约束设置按钮

【英文标题】：set the button with usage autolayout and constraint

【发布时间】：2016-04-19 09:33:41

【问题描述】：

屏幕上有 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。 我只想通过使用自动布局和约束来实现这一点。

请指教。

【问题讨论】：

您搜索过这个问题的答案吗？使用堆栈视图或填充视图？

technet.weblineindia.com/mobile/…最佳解决方案

Evenly space multiple views within a container view的可能重复

@Wain 是的，我做到了。但解决方案是使用 spaceview 或编码。我想通过自动布局和约束来完全实现这一点。

@EICaptain 感谢您的评论。但解决方案是使用 spaceview 或编码。我想通过自动布局和约束来完全实现这一点。

【参考方案1】：

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

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

[注意：如果是奇怪的按钮，中心按钮将用于代替标签]

约束：

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

按钮 1：

底部到按钮 2（例如 70）

中心-X

固定高度宽度

按钮 2：

顶部到按钮 3（例如 70）

标签底部（例如 34）

中心-X

固定高度宽度

按钮 3：

顶部到标签（例如 34）

底部到按钮 4（例如 70）

中心 X

固定高度宽度

按钮 4：

顶部到 BUTTON-3（例如 70）

中心-X

固定高度宽度

【参考方案2】：

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

如果你想支持iOS9之前的iOS版本

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

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

对于 iOS9+ 只需使用 UIStackView 与垂直轴和所需的分布空间

【讨论】：

为什么要使用不需要的元素。我认为这不是一个好方法。

"隐藏间隔 UIViews"

@BhavukJain 您可能不相信，但它们用于分发。没有问题时不要试图解决问题 - UIViews 是免费的，不会造成任何性能损失，在这种情况下它们的使用是明确的，易于支持并且不需要任何硬编码值或数百行代码。

在没有任何隐藏视图的情况下更容易做到这一点，它使您的故事板看起来更干净。将一个按钮放在中心并为其垂直常数赋予一些值，然后将所有按钮都放在它的参考上，并且所有按钮都具有相等的间距。完成！

我相信如果我们想要对布局有更多的控制，尤其是在动画的情况下，这种方法会有所帮助。我们可以只使用隐藏视图属性来为按钮设置动画。这也提供了更简单的方法来播放按钮位置。

【参考方案3】：

这样试试，

你的约束应该是这样的，

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

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

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

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

现在按钮 2 采用顶部约束的出口（ctrl+从约束拖动到类）和按钮 3 采用底部约束的出口。

例如，您的插座分别是 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;

希望这会有所帮助:)

【讨论】：

谢谢你的回答我想完全由xib实现

然后告诉我你是否得到了预期的输出

非常感谢，我试过了，但在所有分辨率下都不起作用

我认为你犯了一些错误，否则这在我的演示中运行良好