NSLayoutConstraint 设置

Posted 2023-03-15

【中文标题】NSLayoutConstraint 设置

【英文标题】：NSLayoutConstraint setup

【发布时间】：2013-02-22 17:07:58

【问题描述】：

我正在尝试设置一个面板来显示一些信息。我无法让自动布局按我的意愿工作。

这就是我想要做的：

我有一个 headerView、一个 UIImageView 和 5 个标签。我希望标签垂直排列，我希望它们与 UIImageView 有 8 个间距。我可以很容易地将它们垂直排列：

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[headerView]-[acresLabel]-[addedLabel(==acresLabel)]-[typeLabel(==acresLabel)]-[zonesLabel(==acresLabel)]-[sceneLabel(==acresLabel)]-|"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:NSDictionaryOfVariableBindings(headerView, acresLabel, addedLabel, typeLabel, zonesLabel, sceneLabel)]];

但是让他们在图像视图之外排队被证明是乏味/冗长的：

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView]-[acresLabel]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:NSDictionaryOfVariableBindings(imageView, acresLabel)]];

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView]-[addedLabel]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:NSDictionaryOfVariableBindings(imageView, addedLabel)]];

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView]-[typeLabel]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:NSDictionaryOfVariableBindings(imageView, typeLabel)]];

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView]-[zonesLabel]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:NSDictionaryOfVariableBindings(imageView, zonesLabel)]];

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView]-[sceneLabel]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:NSDictionaryOfVariableBindings(imageView, sceneLabel)]];

似乎是一种更好的方法，然后为图像视图的每个标签设置一个约束。我尝试将NSLayoutFormatAlignAllCenterX 添加到第一个约束，但它将它们全部设置为内容视图的中心 X，不会将标签的中心 X 彼此对齐。 NSLayoutFormatAlignAllBaseline 在垂直使用时会报错并崩溃。

我将不得不为数据再次执行此操作（英亩：“价值”）。

【参考方案1】：

NSLayoutFormatAlignAllCenterX 让您走在正确的轨道上。您需要做的不同是将V:[headerView]-[acresLabel] 与约束的其余部分隔离，因为您不希望headerView 的CenterX 与5 个标签对齐。

// NSDictionary* views ;
[NSLayoutConstraint constraintsWithVisualFormat:@"V:[headerView]-[acresLabel]"  options:0  metrics:nil  views:views] ;
// Use any of the horizontal NSLayoutFormats (NSLayoutFormatAlignAllLeft, NSLayoutFormatAlignAllRight, NSLayoutFormatAlignAllLeading, NSLayoutFormatAlignAllTrailing, NSLayoutFormatAlignAllCenterX)
[NSLayoutConstraint constraintsWithVisualFormat:@"V:[acresLabel]-[addedLabel(==acresLabel)]-[typeLabel(==acresLabel)]-[zonesLabel(==acresLabel)]-[sceneLabel(==acresLabel)]-|" options:NSLayoutFormatAlignAllCenterX  metrics:0  views:views] ;
[NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView]-[acresLabel]"  options:0  metrics:nil  views:views] ;