28

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

在此处输入图像描述

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

4

7 回答 7

34

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

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

  2. 在两个按钮仍然被选中的情况下，添加约束来设置它们的 Y 位置。添加新约束窗口中的上方或下方空格都可以。

  3. 现在选择 Button 1 并在 Add New Alignment Constraints 窗口中添加对齐约束“Horizo​​ntal Center In Container”，该窗口可从 IB 画布右下角的第一个按钮访问。默认情况下，添加约束的“常量”值为 0。我们想要更改它，因为它是错误的。

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

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

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

  7. 选择 Button 2，转到 Add New Constraints 窗口，只需将前导空间设置为 Button 1（左栏离开顶部白框）。

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

于 2014-01-30T16:46:15.277 回答
10

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

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

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

于 2013-03-23T20:14:20.037 回答
6

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

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

于 2013-03-25T15:09:13.413 回答
4

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

  1. 将Width和添加Height constraint到button1示例值：100 高度和 100 宽度。
  2. 选择两个按钮并添加constraint Equal Widths和Equal Heights。
  3. 在和Horizontal Spacing之间添加。或者我们可以说 add to from 。示例值：150button1button2Leading Spacebutton2button1
  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向左移动，这将使这个布局在屏幕中居中。

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

button1 上的约束

于 2016-07-29T11:15:52.517 回答
1

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

  1. 在左侧按钮中，我给了它一个前导和底部约束
  2. 在右侧按钮中，我给了它一个尾随和底部约束
  3. 在右侧按钮中，我给了左侧按钮的前导空间
  4. 最后，在我的右键中，我给它一个与左键相等的宽度约束。
  5. 完毕。
于 2015-12-18T10:35:41.493 回答
1

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

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;

希望它会帮助你。

于 2016-02-23T11:59:12.980 回答
-1

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

leadingConstraint.constant = (self.frame.size.width / 2.0) + 5.0;
trailingConstraint.constant = (self.frame.size.width / 2.0) + 5.0;
于 2016-03-03T22:21:47.337 回答