ios - iOS：如何创建一行相同百分比宽度的控件

Question

是否可以在界面生成器或代码中制作一行，例如三个按钮，每个按钮的自动宽度为 33%，填充整个视图水平空间？

我对自动布局/传统方式都感兴趣。

Answer 1

如果使用自动布局，您可以定义约束，使得 (a) 三个子视图的宽度相同；(b) 第一个对 superview 有领先优势；(c) 最后一个对 superview 有训练优势。在视觉格式语言中，这意味着布局是

@"H:|[view1][view2(==view1)][view3(==view1)]|"

如果在非自动布局中进行，您只需frame为三个视图定义您的宽度，使其宽度恰好是超级视图宽度的 1/3，并且它们各自的x坐标相应地偏移。

因此，代码可能如下所示：

UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button1 setTitle:@"1" forState:UIControlStateNormal];
button1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:button1];

UIButton *button2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button2 setTitle:@"2" forState:UIControlStateNormal];
button2.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:button2];

UIButton *button3 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button3 setTitle:@"3" forState:UIControlStateNormal];
button3.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:button3];

NSDictionary *views = NSDictionaryOfVariableBindings(button1, button2, button3);

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[button1][button2(==button1)][button3(==button1)]|" options:0 metrics:0 views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[button1]" options:0 metrics:0 views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[button2]" options:0 metrics:0 views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[button3]" options:0 metrics:0 views:views]];

---

在 Interface Builder (IB) 中，您可以添加三个按钮，其中第一个锁定在左边缘，第二个锁定在第一个按钮上，第三个锁定在第二个按钮上：

然后，您可以选择所有三个按钮并使其宽度相同：

然后，您可以选择第三个按钮并将其后沿链接到超级视图：

并且您手动将constant最后一个约束的 调整为零：

当你这样做时，所有三个将是相同的大小，跨越视图。如果您也想消除这些差距，您可以修改按钮之间的约束。不过，我必须承认，Xcode 4.6.3 中的 IB 有点挑剔，因为它不断添加它认为使其明确的约束，在这个过程中把它们搞砸了，所以有时需要一些挑剔的调整。在代码中这样做是明确的。而且我不认为我违反 NDA 说 Xcode 5 在这类东西上更优雅。

--

顺便说一句，在 iOS 9 中，使用“堆栈视图”可能会更好地呈现此 UI。在 Xcode 7 中，选择要水平分布的视图组，然后单击堆叠视图按钮。然后为堆栈视图指定所需的分布（“等中心”或“等间距”都可以很好地工作）并定义约束以正确调整堆栈视图的大小（例如顶部/前导/尾随约束）。