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

Posted 2023-03-15

【中文标题】自动布局 - 中心有 5 个按钮

【英文标题】：Auto layout - 5 buttons in center

【发布时间】：2015-01-14 11:17:41

【问题描述】：

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

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

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

所以我有以下限制：

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

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

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

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

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

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

【问题讨论】：

尝试修复最右侧图像视图的尾随约束

我试过了，还是不行。查看编辑结果

移除顶部和底部约束并在视图中将它们垂直居中。调整按钮大小的是顶部和底部约束。让它们根据它们在水平方向上的大小来调整大小。

不幸的是，这也不起作用。它只是显示它们非常小，但也带有警告。请参阅编辑以了解其外观。

【参考方案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 个按钮

选择所有这些并将它们嵌入到堆栈视图中

更改分布以平均填充。

调整属性检查器中的间距以在按钮之间留出空间。

为堆栈视图添加前导和尾随空格和高度约束。还要垂直对齐。