constraintWithItem VS constraintsWithVisualFormat 的自动布局问题答案

【问题标题】：Autolayout issue with constraintWithItem VS constraintsWithVisualFormatconstraintWithItem VS constraintsWithVisualFormat 的自动布局问题
【发布时间】：2015-10-07 09:03:31
【问题描述】：

我有一个非常简单的 UI，可以很好地与 constraintsWithVisualFormat 配合使用，我尝试用 constraintWithItem 替换它，但由于某种原因它无法正常工作。我不知道这里出了什么问题。

我理解的字面意思是

在垂直方向上，contentView 应该填满它的整个高度没有填充的超级视图。

NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(contentView);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[contentView]|"
                                                               options:0
                                                               metrics:nil
                                                                 views:viewsDictionary];
[containerView addConstraints:constraints];


//Below is my alternative code NOT working, but this should work too?
NSLayoutConstraint *constraints =
[NSLayoutConstraint constraintWithItem:contentView
                             attribute:NSLayoutAttributeHeight
                             relatedBy:NSLayoutRelationEqual
                                toItem:containerView
                             attribute:NSLayoutAttributeHeight
                            multiplier:1.0
                              constant:0];
[containerView addConstraint:constraints];

【问题讨论】：

标签： ios objective-c cocoa-touch autolayout

【解决方案1】：

您的新代码指定了高度，但没有指定位置。视觉格式规范没有说明项目的高度，而是将视图的顶部和底部边缘固定在一起。

不是为高度创建约束，而是创建两个约束，一个用于上边距，一个用于下边距，将 contentView 的边缘固定到 containerView。

【讨论】：

我也有一个水平约束H:|[contentView]|，也就是说我也需要左右？我想我在翻译 VFL 时遇到问题
是的，水平同样适用。

【解决方案2】：

您应该将其从高度更改为顶部。并在底部添加类似的约束。

NSLayoutConstraint *constraints =
[NSLayoutConstraint constraintWithItem:contentView
                             attribute:NSLayoutAttributeTop
                             relatedBy:NSLayoutRelationEqual
                                toItem:containerView
                             attribute:NSLayoutAttributeTop
                            multiplier:1.0
                              constant:0];
[containerView addConstraint:constraints];

【讨论】：

【解决方案3】：

这种视觉格式：

NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(contentView);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[contentView]|"
                                                               options:0
                                                               metrics:nil
                                                                 views:viewsDictionary];
[containerView addConstraints:constraints];

应该替换为两个约束：

NSLayoutConstraint *topConstraint =
[NSLayoutConstraint constraintWithItem:contentView
                             attribute:NSLayoutAttributeTop
                             relatedBy:NSLayoutRelationEqual
                                toItem:containerView
                             attribute:NSLayoutAttributeTop
                            multiplier:1.0
                              constant:0];
[containerView addConstraint: topConstraint];

和

NSLayoutConstraint *bottomConstraint =
[NSLayoutConstraint constraintWithItem:contentView
                             attribute:NSLayoutAttributeBottom
                             relatedBy:NSLayoutRelationEqual
                                toItem:containerView
                             attribute:NSLayoutAttributeBottom
                            multiplier:1.0
                              constant:0];
[containerView addConstraint:bottomConstraint];

【讨论】：

所以真正的问题可能是 V:|[contentView]| 的直译是什么和 H:|[contentView]|
V:|[contentView]| 表示“将 contentView 对齐到其超级视图的顶部和”，H:|[contentView]| 表示“将 contentView 对齐到前导 和到其超级视图的尾随。”如果您将 'NSLayoutFormatDirectionLeftToRight' 设置为选项，则会左右替换前导和尾随。
@AtifImran 如果你真的很好奇视觉格式是如何翻译的，你可以遍历约束数组。这个数组包含 NSLayoutConstraint 对象，然后你可以打印出它的 debugDescription。