iOS:如何创建一行宽度相同的控件

Question

可以在界面构建器中或使用代码一行,例如,三个按钮,每个按钮的自动宽度为33%,填充整个视图水平空间？

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

Answer 1

如果使用自动布局,则可以定义约束,以便(a)三个子视图的宽度相同; (b)第一个具有超视距的前沿; (c)最后一个人对超级视图有训练优势.在可视化格式语言中,这意味着布局是

@"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中,选择要水平分布的视图组,然后单击堆叠视图按钮,.然后为堆栈视图指定所需的分布("等中心"或"等间距"都能正常工作)并定义约束以正确调整堆栈视图的大小(例如顶部/前导/尾部约束).