使用 Cocoa 自动布局使两个按钮居中

Posted 2023-03-15

【中文标题】使用 Cocoa 自动布局使两个按钮居中

【英文标题】：Centering two buttons with Cocoa Auto Layout

【发布时间】：2013-03-23 17:58:48

【问题描述】：

我对 Cocoa 自动布局有疑问，无法解决这个问题。 我想要实现的只是让两个按钮始终位于视图的中心，如下所示。

我尝试了很多不同的方法，但都没有成功:(请在这里帮助我。

【问题讨论】：

见***.com/q/14741713/1523962

天哪！这太聪明了！但我猜对于奇数个按钮，方法会相似但略有不同，对吧？

【参考方案1】：

我是凭记忆写的，希望所有信息都是正确的。我正在使用 XCode5。这是我最终从没有限制开始这样做的方式：

选择两个按钮并添加约束以设置它们的高度和 “添加新约束”窗口中的宽度，可从第二个访问 IB 画布右下角的按钮。

两个按钮仍处于选中状态添加约束以设置它们的 Y 位置。 Add New 中的上方空格或下方空格 约束窗口就可以了。

现在选择按钮 1 并 添加对齐约束“水平 在“添加新对齐约束”窗口中居中” 可从 IB 画布右下角的第一个按钮访问。 默认情况下，添加约束的“常量”值为 0。我们 想要改变它，因为它是错误的。

此时按钮 1 将有一个垂直运行的黄条 通过这。这是一个警告，表明水平中心 按钮的不等于容器的水平中心 + 约束的常数 (0)。垂直条上的 数字 是按钮离中心的距离。记住那个号码。

双击按钮 1 上的黄色竖条（灵巧度 必需）或选择按钮 1 转到左侧窗格并单击 标尺和“选择并编辑”名为“对齐中心 X”的约束 到：”。

在标有“常数”的文本框中输入第 4 步中的数字。 Button 1 现在已经满足了它需要的所有约束 展示。它有一个宽度，高度，Y（顶部空间或底部空间 约束），现在是 X（水平中心对齐）。按钮 2， 但是仍然缺少它可以背负的 X 位置 按钮 1。

选择按钮 2，转到 Add New Constraints 窗口并简单地设置 按钮 1 的前导空间（顶部白框的左侧栏）。

您现在应该有两个按钮，它们将始终以固定宽度保持在其容器的中心。

【讨论】：

太棒了。除了实际解决我不知道如何解决的问题之外，这教会了我一些关于自动布局的知识。谢谢！

也适用于任意数量的按钮。不像 UIBarButtonItem 中的“灵活空间”那么明显，但有些东西......

优秀，优秀的答案。像魅力一样工作，并指导如何同时使用约束。太棒了。

有趣的破解。但我想它不适用于动态元素宽度；）

这不再适用于 Xcode 7.2。我在下面的答案中发布了我所做的。我正在使用 Swift，如果这有任何关联的话。

【参考方案2】：

自动布局的一个巧妙技巧是使用不可见的视图作为分隔符。约束系统仍然照常布置它们。在这种情况下，两个按钮之间的空间可以是一个不可见的视图。您可以使用此约束字符串中的约束：

@"[button][invisibleView(5)][button2(==button)]"

然后创建一个约束设置invisibleView.centerX = superview.centerX。

【讨论】：

或者你可以把它们都放在一个容器视图中！然后将容器视图居中。

这行不通，因为您假设两个按钮的大小相同。 可能是，但可能不是。

尽管这有两倍的赞成票，但我想说 jmathew 的答案是要走的路。以恒定偏移量在 super 中居中完美无瑕。

马修的回答对我不起作用。这做到了。我使用了一个宽度为零的隐形视图，并在 IB 中完成了所有操作

【参考方案3】：

这样做的另一个技巧是将button 的右侧对齐到远离superview 中心的空间大小的一半，将button2 的左侧对齐到空间大小的一半远离superview 中心的空间。

这只有在你有一个只围绕你想要居中的两个视图的超级视图时才真正有效。

【参考方案4】：

如果您有固定宽度的按钮并且希望两个按钮之间的距离固定，那么以下步骤可以完成工作：

将Width 和Height constraint 添加到button1 示例值：100 高度和 100 宽度。 选择两个按钮并添加constraint Equal Widths 和Equal Heights。 在button1 和button2 之间添加Horizontal Spacing。或者我们可以说从button1 中添加Leading Space 到button2。示例值：150 选择button1 并添加constraint Horizontally in Container 和-125 值。 根据需要添加其他constrains，如Vertical Spacing to Container等。

示例值 125 等于 (button1 width / 2) + (Horizontal Spacing/2) 即 100/2 + 150/2 = 125。

因此，将 Horizontal in Container 添加到 -125 会将 buttons 向左移动，这将使此布局在屏幕中居中。

下面附上的示例布局和约束图像：

【参考方案5】：

基本上，我的UITableViewCell 中有两个UIButtons 位于下方，需要始终居中且宽度相同。这就是我让它在 Xcode 7.2 中工作的方式。顺便说一句，我正在使用 Swift，如果这有任何关系的话。

在左侧按钮中，我给了它一个领先和底部约束 在右侧按钮中，我给了它一个尾随和底部约束 在右侧按钮中，我给了它一个左侧按钮前导空格 最后，在我的右键中，我给它一个与左键相等的宽度限制。 完成。

【参考方案6】：

您也可以通过以下方式实现。

1.左键为前导空格，右键为尾随空格。 2.为前导和尾随约束构造出口。

 __weak IBOutlet NSLayoutConstraint *leadingConstraint;
 __weak IBOutlet NSLayoutConstraint *trailingConstraint;

3.计算常数如下式。

NSInteger constant = (SCREEN_WIDTH - (CGRectGetWidth(leftButton.frame) + CGRectGetWidth(rightButton.frame))) / 3;
    leadingConstraint.constant = constant;
    trailingConstraint.constant = constant;

希望对你有帮助。

【参考方案7】：

很棒的提示。 就我而言，我希望按钮与视图中心相距 10 像素，所以我的数学略有不同

leadingConstraint.constant = (self.frame.size.width / 2.0) + 5.0;
trailingConstraint.constant = (self.frame.size.width / 2.0) + 5.0;

【讨论】：

这种方法的缺点是必须在 self.frame 更改时手动更新约束常量。