使用 Autolayout Visual Format Language 将 UIViews 排成一行

Question

所以，我想使用 Autolayout Visual Format Language 将 4 UIViews 水平放置（从上到下，如键盘行）......但由于某种原因，它没有似乎按预期工作，因为我的观点似乎在彼此之上的堆栈中结束......可能是由于视觉格式中的错误......

所以我的 4 UIViews 是这样的：

UIView *rowOne = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
[rowOne setBackgroundColor:[UIColor blueColor]];
[rowOne setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:rowOne];

UIView *rowTwo = [[UIView alloc] initWithFrame:CGRectMake(0, 50, 50, 50)];
[rowTwo setBackgroundColor:[UIColor greenColor]];
[rowTwo setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:rowTwo];

UIView *rowThree = [[UIView alloc] initWithFrame:CGRectMake(0, 100, 50, 50)];
[rowThree setBackgroundColor:[UIColor redColor]];
[rowThree setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:rowThree];

UIView *rowFour = [[UIView alloc] initWithFrame:CGRectMake(0, 150, 50, 50)];
[rowFour setBackgroundColor:[UIColor yellowColor]];
[rowFour setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:rowFour];

我将它们添加到字典中：

NSDictionary *views = NSDictionaryOfVariableBindings(rowOne, rowTwo, rowThree, rowFour);

我创建约束：

NSString *rowsVerticalConstraintsString = @"V:|-[rowOne][rowTwo][rowThree][rowFour]-|";
NSString *rowOneHorizontalConstraintString = @"H:|-[rowOne]-|";
NSString *rowTwoHorizontalConstraintString = @"H:|-[rowTwo]-|";
NSString *rowThreeHorizontalConstraintString = @"H:|-[rowThree]-|";
NSString *rowFourHorizontalConstraintString = @"H:|-[rowFour]-|";

NSArray *rowsVerticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:rowsVerticalConstraintsString
                                                                           options:NSLayoutFormatAlignAllLeft
                                                                           metrics:nil
                                                                             views:views];

NSArray *rowOneHorizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:rowTwoHorizontalConstraintString
                                                                              options:NSLayoutFormatAlignAllLeft
                                                                              metrics:nil
                                                                                views:views];

NSArray *rowTwoHorizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:rowOneHorizontalConstraintString
                                                                              options:NSLayoutFormatAlignAllLeft
                                                                              metrics:nil
                                                                                views:views];

NSArray *rowThreeHorizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:rowThreeHorizontalConstraintString
                                                                              options:NSLayoutFormatAlignAllLeft
                                                                              metrics:nil
                                                                                views:views];

NSArray *rowFourHorizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:rowFourHorizontalConstraintString
                                                                              options:NSLayoutFormatAlignAllLeft
                                                                              metrics:nil
                                                                                views:views];

并将约束添加到视图：

[self.view addConstraints:rowsVerticalConstraints];
[self.view addConstraints:rowOneHorizontalConstraint];
[self.view addConstraints:rowTwoHorizontalConstraint];
[self.view addConstraints:rowThreeHorizontalConstraint];
[self.view addConstraints:rowFourHorizontalConstraint];

我期望的行为是视图垂直并排放置并水平拉伸，但它们似乎相互重叠...

知道我需要更改什么吗？

Answer 1

Note:when using auto layout,initWithFrame have no compact

您的布局约束没有高度constraints.You可以设置 4 个视图具有相同的高度

NSString *rowsVerticalConstraintsString = @"V:|-[rowOne(==rowTwo)][rowTwo][rowThree(==rowTwo)][rowFour(==rowTwo)]-|";

然后截图

另外，您可以设置宽度为150，高度为50

 NSString *rowsVerticalConstraintsString = @"V:|-[rowOne(50)][rowTwo(50)][rowThree(50)][rowFour(50)]";
NSString *rowOneHorizontalConstraintString = @"H:|-[rowOne(150)]";
NSString *rowTwoHorizontalConstraintString = @"H:|-[rowTwo(150)]";
NSString *rowThreeHorizontalConstraintString = @"H:|-[rowThree(150)]";
NSString *rowFourHorizontalConstraintString = @"H:|-[rowFour(150)]";

然后截图

使用 Autolayout Visual Format Language 将 UIViews 排成一行

Laying out fire UIViews in a row with Autolayout Visual Format Language

xcode

objective-c

uiview

ios

visual-format-language