iOS VFL 显示两个彼此相邻的按钮

Question

我正在尝试学习视觉格式语言，在这种情况下，我希望在 View 顶部有两个彼此相邻的按钮。

这是我的代码，但没有出现？

UIButton *button1 = [[UIButton alloc] init];
[button1 setBackgroundColor:[UIColor blueColor]];
UIButton *button2 = [[UIButton alloc] init];
[button2 setBackgroundColor:[UIColor redColor]];
NSDictionary *views = NSDictionaryOfVariableBindings(button1, button2);
NSLog(@"%@", [views allKeys]);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"[button1(==button2)]" options:0 metrics:Nil views:views];
[self.view addSubview:button1];
[self.view addSubview:button2];
[self.view addConstraints:constraints];

感谢回答，现在这是我的代码:

UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
button1.translatesAutoresizingMaskIntoConstraints = NO;
[button1 setTitle:@"Button" forState:UIControlStateNormal];
[button1 setBackgroundColor:[UIColor redColor]];
[self.view addSubview:button1];

UIButton *button2 = [UIButton buttonWithType:UIButtonTypeSystem];
button2.translatesAutoresizingMaskIntoConstraints = NO;
[button2 setTitle:@"Button" forState:UIControlStateNormal];
[button2 setBackgroundColor:[UIColor blueColor]];
[self.view addSubview:button2];

NSDictionary *views = NSDictionaryOfVariableBindings(button1, button2);
NSString *const kHConstraint = @"|-[button1(==button2)]-[button2]-|";
NSString *const kVConstraint = @"V:|-[button1(==44)]";
NSString *const kVConstraint2 = @"V:|-[button2(==44)]";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:kHConstraint options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:kVConstraint options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:kVConstraint2 options:0 metrics:nil views:views]];

我在犹豫能否将两个 Vertical 约束合并为一个？

---

是的，这可以通过使用 NSLayoutFormatAlignAllTop 选项来实现:

NSDictionary *views = NSDictionaryOfVariableBindings(button1, button2);
NSString *const kHConstraint = @"H:|-[button1(==button2)]-[button2]-|";
NSString *const kVConstraint = @"V:|-[button1(==button2)]";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:kHConstraint options:NSLayoutFormatAlignAllTop metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:kVConstraint options:0 metrics:metrics views:views]];

很棒的文章来自:@jrturton 并且可以找到 here

Answer 1

1. 您需要关闭两个按钮的自动调整大小:

   button1.translatesAutoresizingMaskIntoConstraints = NO;
   button2.translatesAutoresizingMaskIntoConstraints = NO;
   

2. 您必须为系统指定足够的约束来确定每个 subview 的高度、宽度和位置。否则默认框架是 CGRectZero，它将不可见。

3. 目前您的 VFL 字符串将 button1 设置为与 button2 的宽度相等，但如果两个按钮的大小都为零，这仍然满足约束条件。
4. 您的约束没有定位信息。

至少，我建议使用以下 VFL 语句来为您提供所需的布局:

@"V:|-[button1(==44)]"

这为您的 button1 设置了 44 的高度，并将其定位为距父 View 顶部的标准插入。

@"V:|[button2(==44)]"

这对按钮 2 的作用相同。您也可以通过水平布局中的对齐选项来实现此目的，但这会混淆此答案的目的。

@"|-[button1(==button2)]-[button2]-|"

这使得按钮宽度相等，并且还从父 View 的边缘插入它们。

我已经写了一些关于 VFL 的文章 here这将有助于您的理解。