使用Cocoa Auto Layout中心两个按钮

Question

我遇到了Cocoa Auto Layout的问题，无法解决这个问题。 我想要实现的是让两个按钮始终位于视图中心，如下所示。

我尝试了很多不同的方法但没有成功:(请帮帮我。

Answer 1

我是从记忆中写的，所以希望所有信息都是正确的。我正在使用XCode5。这是我从没有约束开始这样做的方式：

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

2. 仍然选择了两个按钮添加约束来设置Y. 位置即可。添加新的上方空格或下方空格 约束窗口可以。

3. 现在选择按钮1并添加对齐约束“水平 在“添加新对齐约束”窗口中的“容器”中居中 可从IB Canvas右下方的第一个按钮进入。 默认情况下，添加约束的“常量”值为0.我们 我想改变它，因为它是错误的。

4. 此时，按钮1将垂直运行黄色条 通过它。这是表示水平中心的警告 按钮的大小不等于容器的水平中心 +约束的常量（0）。垂直条上的数字是按钮与中心的距离。记住这个号码。

5. 双击按钮1上的垂直黄色条（灵巧 必填）或选择按钮1转到左侧窗格并单击 标尺和“选择并编辑”称为“对齐中心X”的约束 到：”

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

7. 选择按钮2 ，转到添加新约束窗口，然后只需设置 按钮1的前导空间（顶部白框左侧的栏）。

您现在应该有两个按钮，它们始终保持在容器的中心，彼此之间的宽度是固定的。

Answer 2

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

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

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

Answer 3

要做到这一点的另一个技巧是将button的右侧与superview的中心距离button2的左侧和superview的左侧对齐。距离{{1}}中心的空间大小的一半。

只有当你的超级视图只围绕你想要居中的两个视图时才能正常工作。

Answer 4

如果你有固定的宽度按钮，并且你想要两个固定的距离，那么下面的步骤就可以完成这项工作：

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

示例值125等于（button1 width / 2）+（Horizontal Spacing / 2），即100/2 + 150/2 = 125.

因此，将Horizontal in Container添加到-125会将buttons移至左侧，这将使此布局成为屏幕中心。

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

Answer 5

基本上，我位于UIButtons内的两个UITableViewCell位于下方，需要始终居中且宽度相同。这就是我在Xcode 7.2中使用它的方法。我顺便使用Swift，如果它与之相关的话。

1. 在左侧按钮中，我给了它前导和底部约束
2. 在右键，我给它一个尾随和底部约束
3. 在右侧按钮中，我向左侧按钮前导空格
4. 最后，在我的右键中，我给了左键等宽度约束。
5. 完成。

Answer 6

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

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

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

3.Caluclate常数如下公式。

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

希望它会对你有所帮助。

Answer 7

很棒的提示。 在我的情况下，我希望按钮的中心距离我的视图中心10个像素，所以我的数学略有不同

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