自动布局 - 中心有 5 个按钮答案

【问题标题】：Auto layout - 5 buttons in center自动布局 - 中心有 5 个按钮
【发布时间】：2015-01-14 11:17:41
【问题描述】：

我正在尝试进入自动布局业务，但我觉得有点难。

我试图让 5 个图像视图在视图中心彼此相邻显示。他们需要调整自己的大小以扩大他们的高度/宽度。

这是它在 IB 中的样子（有点像它在运行应用程序时需要的样子）：

所以我有以下限制：

添加了 1:1 的纵横比，以便它们始终是方形的
第一个按钮是“拥抱”视图的左侧，因此它将显示在侧面。
以下 4 个按钮与旁边的按钮有水平间距
每个按钮对屏幕的顶部和底部都有一个限制，因此如果您调整屏幕大小，它们会变得更大。

但是，当我运行它时，它看起来像这样：

我只是有点难过。我做错了什么？

提前致谢，最好的问候 - /JBJ

** 编辑 ** 我在最后一个按钮上添加了一个尾随约束。这确保它们都在屏幕内，但是在考虑它的大小时有点问题，所以这也没有解决它。

* 编辑编辑 * 尝试删除顶部和底部约束，因为它们是强制增大尺寸的约束。为它们添加了一个垂直中心约束。这也行不通。显示它们非常小（排列得很好，但太小了）并且还带有警告：

【问题讨论】：

尝试修复最右侧图像视图的尾随约束
我试过了，还是不行。查看编辑结果
移除顶部和底部约束并在视图中将它们垂直居中。调整按钮大小的是顶部和底部约束。让它们根据它们在水平方向上的大小来调整大小。
不幸的是，这也不起作用。它只是显示它们非常小，但也带有警告。请参阅编辑以了解其外观。

标签： ios autolayout

【解决方案1】：

好的，这就去……

向视图中添加 5 个按钮...没有约束。

在它们之间添加水平空间限制。还将第一个和最后一个视图的约束添加到超级视图。我还将最后一个约束更改为 0（注意 +306 告诉我它当前不合适）。

选择所有按钮并（使用添加约束按钮）将“等宽”添加到所有按钮。请注意橙色虚线轮廓告诉我它们现在都将具有相同的宽度。

现在使用此按钮将它们在视图的垂直中心对齐...

最后要做的是转到每个并添加 1:1 的纵横比。您需要添加约束，然后将其编辑为 1 比率。

确保在完成将按钮重新定位到新约束后更新框架...

预览屏幕显示所有不同尺寸的工作...

【讨论】：

但是如果我把它们放在另一个容器视图中会有什么不同呢？为什么我不能将它们现在所在的视图用作容器视图？约束应该相同吗？我相信我需要这个，因为我需要改变它们的宽度和高度？
@user3625855 是的，你说得对，我自己就是这么想的。忘记容器视图。你需要有四样东西。第一个按钮被限制在左边缘。最后一个按钮被限制在右边缘。按钮都具有相同的宽度。按钮之间的空间受到限制。
非常感谢您的帮助，但仍然无法正常工作。显然我错过了一些东西。我有这些约束：最左边的按钮被约束到左边所有按钮都有水平间距约束最右边的按钮被约束到右边现在，它也需要对 Y 坐标的约束。我想我可以对所有这些都进行限制。然后我将纵横比设置为 1:1 以确保它们是平方的。但这行不通？你能举个例子吗？我不知道我错过了什么。
耶！！！非常感谢你！当您这样做时，这很有意义，但是我一生都无法弄清楚！我向你致敬，感谢你让我继续我的生活。现在去买一顶帽子来遮盖秃头。 :)
这非常有帮助！谢谢！

【解决方案2】：

要将它们垂直放置在屏幕的中心，请使用

NSLayoutConstraint *constraintHorizontal = [NSLayoutConstraint constraintWithItem:self
                                                                    attribute:NSLayoutAttributeCenterY 
                                                                    relatedBy:NSLayoutRelationEqual
                                                                       toItem:self.superview 
                                                                    attribute:attribute 
                                                                   multiplier:1.0f
                                                                     constant:0.0f];

用于水平放置它们按钮宽度=（屏幕宽度）-（按钮间距尺寸）-（左侧距离）-（右侧距离）/5；

身高也一样。第一个图像视图的初始左约束将是左距离。

【讨论】：

有点想在 IB 中做这件事，所以我可以掌握它。

【解决方案3】：

在这种情况下，我总是做的只是简单地思考。我需要多少约束才能 100% 定义设计？我应该写什么来告诉电话里的人它的样子？

在您的情况下，这是以下约束（希望我不会忘记）

它们都是正方形（等宽高，不是数值）
它们的大小相等，只需将其设置为相等，而不是某个值
元素与边缘的水平间距，设置为固定大小
垂直居中

【讨论】：

是的，这是有道理的。只是不确定前两点：所有正方形，所以宽度/高度相等，而不是一个值？这是纵横比 1:1 的部分，对吧？所以我只是将第一个按钮设置为 1:1 的纵横比，另一个设置为相同？
@Fogmeister U 想添加另一个视图，这就是我否决你的原因，但你的答案是最好的，所以你得到了我的支持。
@Simon 是的，我在考虑不同的中心对齐方式（将它们置于两个视图之间的中心）。无论如何，我在提交后意识到我错了，这就是我编辑的原因。
@user3625855 建议你删除所有约束，按照Fogmeister的步骤操作

【解决方案4】：

在 UIView 中垂直和水平居中放置 5 个按钮
选择所有这些并将它们嵌入到堆栈视图中
更改分布以平均填充。
调整属性检查器中的间距以在按钮之间留出空间。
为堆栈视图添加前导和尾随空格和高度约束。还要垂直对齐。

【讨论】：