将所有子视图中心对齐到超级视图

Question

我正在尝试使用自动布局以编程方式添加四个标签，并将中心对齐到superview，并且需要使用特定填充在标签下方添加tableView。我混淆了如何将它们与superView enter image description here

对齐

这是我的代码：

UILabel *lbl = [UILabel new];
[lbl setBackgroundColor:[UIColor orangeColor]];
lbl.translatesAutoresizingMaskIntoConstraints = NO;
[lbl setTextAlignment:NSTextAlignmentCenter];
[lbl setNumberOfLines:0];
[lbl setText:@"Test label1"];
[self.view addSubview:lbl];

UILabel *lbl1 = [UILabel new];
[lbl1 setBackgroundColor:[UIColor darkGrayColor]];
lbl1.translatesAutoresizingMaskIntoConstraints = NO;
[lbl1 setTextAlignment:NSTextAlignmentCenter];
[lbl1 setNumberOfLines:0];
[lbl1 setText:@"Test label2"];

[self.view addSubview:lbl1];

UILabel *lbl2 = [UILabel new];
[lbl2 setBackgroundColor:[UIColor blueColor]];
lbl2.translatesAutoresizingMaskIntoConstraints = NO;
[lbl2 setTextAlignment:NSTextAlignmentCenter];
[lbl2 setNumberOfLines:0];
[lbl2 setText:@"Test label3"];

[self.view addSubview:lbl2];

UILabel *lbl3 = [UILabel new];
[lbl3 setBackgroundColor:[UIColor greenColor]];
lbl3.translatesAutoresizingMaskIntoConstraints = NO;
[lbl3 setTextAlignment:NSTextAlignmentCenter];
[lbl3 setNumberOfLines:0];
[lbl3 setText:@"Test label4"];

[self.view addSubview:lbl3];

NSDictionary *views = NSDictionaryOfVariableBindings(lbl, lbl1, lbl2, lbl3);

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[lbl(120)]-|" options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[lbl(120)]-|" options:0 metrics:nil views:views]];


[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[lbl]-1.0-[lbl1(lbl)]" options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[lbl1(120)]-|" options:0 metrics:nil views:views]];


[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[lbl2(120)]" options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[lbl]-1.0-[lbl2(120)]" options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[lbl2]-1.0-[lbl3(120)]" options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[lbl1]-1.0-[lbl3(120)]" options:0 metrics:nil views:views]];

Answer 1

你应该使用uiview作为容器，制作这个容器视图的标签子视图并将容器视图置于视图中心 - 听起来很奇怪，但实际上非常简单：）

UIView *containerView = [UIView new];
containerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:containerView];

UILabel *lbl = [UILabel new];
[lbl setBackgroundColor:[UIColor orangeColor]];
lbl.translatesAutoresizingMaskIntoConstraints = NO;
[lbl setTextAlignment:NSTextAlignmentCenter];
[lbl setNumberOfLines:0];
[lbl setText:@"Test label1"];
[containerView addSubview:lbl];

UILabel *lbl1 = [UILabel new];
[lbl1 setBackgroundColor:[UIColor darkGrayColor]];
lbl1.translatesAutoresizingMaskIntoConstraints = NO;
[lbl1 setTextAlignment:NSTextAlignmentCenter];
[lbl1 setNumberOfLines:0];
[lbl1 setText:@"Test label2"];
[containerView addSubview:lbl1];

UILabel *lbl2 = [UILabel new];
[lbl2 setBackgroundColor:[UIColor blueColor]];
lbl2.translatesAutoresizingMaskIntoConstraints = NO;
[lbl2 setTextAlignment:NSTextAlignmentCenter];
[lbl2 setNumberOfLines:0];
[lbl2 setText:@"Test label3"];
[containerView addSubview:lbl2];

UILabel *lbl3 = [UILabel new];
[lbl3 setBackgroundColor:[UIColor greenColor]];
lbl3.translatesAutoresizingMaskIntoConstraints = NO;
[lbl3 setTextAlignment:NSTextAlignmentCenter];
[lbl3 setNumberOfLines:0];
[lbl3 setText:@"Test label4"];
[containerView addSubview:lbl3];

NSDictionary *views = NSDictionaryOfVariableBindings(lbl, lbl1, lbl2, lbl3);

[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[lbl(120)]-[lbl1(120)]|" options:0 metrics:nil views:views]];
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[lbl2(120)]-[lbl3(120)]|" options:0 metrics:nil views:views]];

[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[lbl(120)]-[lbl2(120)]|" options:0 metrics:nil views:views]];
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[lbl1(120)]-[lbl3(120)]|" options:0 metrics:nil views:views]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:containerView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:containerView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];

// Update
UITableView *tableView = [UITableView new];
tableView.translatesAutoresizingMaskIntoConstraints = NO;
tableView.dataSource = self;
[self.view addSubview:tableView];

views = NSDictionaryOfVariableBindings(containerView, tableView);

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[tableView]|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[containerView]-[tableView]|" options:0 metrics:nil views:views]];

你得到的是：