使用autolayout为viewcontroller实现此布局

Question

我正在研究一个viewcontroller，我想尝试实现如下图所示的内容。我想这样做，所以在任何有关宽高比的设备上看起来都很棒。

顶部是一个容器，中间是一个集合视图，底部是一个uitableview。 我想要保留的是宽高比。我想这样做的原因如下：

1. 对于第一个框，将前导，尾随和上边距设置为容器（指南）。将底部设置为下面的框（较大的中间框）。同样设置宽高比。
2. 对于中间框，将前导/尾随边距设置为指南，并将底部设置为下面的框。同时设置宽高比。
3. 对于最后一个框，设置前导，尾随，底部（指南）以及纵横比。
4. 我也设置了相同的引脚宽度

执行此操作后，它会正确保留我的比率，但会引发大量错误和警告。关于为什么这会让我胡思乱想的任何想法？崩溃/警告报告：

Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7f8a66031bc0 V:[UITableView:0x7f8a65837c00(73)]>",
    "<NSLayoutConstraint:0x7f8a6605c150 UITableView:0x7f8a65837c00.width == 7.78082*UITableView:0x7f8a65837c00.height>",
    "<NSLayoutConstraint:0x7f8a6604e970 UICollectionView:0x7f8a65838400.leading == UIView:0x7f8a66031eb0.leadingMargin>",
    "<NSLayoutConstraint:0x7f8a6604e9c0 UICollectionView:0x7f8a65838400.trailing == UIView:0x7f8a66031eb0.trailingMargin>",
    "<NSLayoutConstraint:0x7f8a6604ea10 UICollectionView:0x7f8a65838400.width == UITableView:0x7f8a65837c00.width>",
    "<NSLayoutConstraint:0x7f8a63c4ccf0 'UIView-Encapsulated-Layout-Width' H:[UIView:0x7f8a66031eb0(320)]>"
)

非常感谢！

Answer 1

说，您希望顶视图的高度为主视图的20％，中间视图的高度为主视图的50％。您可以这样编程地执行此操作：

[topView setTranslatesAutoresizingMaskIntoConstraints: NO];
[middleView setTranslatesAutoresizingMaskIntoConstraints: NO];
[bottomView setTranslatesAutoresizingMaskIntoConstraints: NO];

NSDictionary *views = @{@"topView": topView, @"middleView": middleView, @"bottomView": bottomView};

[self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: @"H:|[topView]|" options: 0 metrics: nil views: views]];
[self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: @"H:|[middleView]|" options: 0 metrics: nil views: views]];
[self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: @"H:|[bottomView]|" options: 0 metrics: nil views: views]];

[self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: @"V:|[topView][middleView][bottomView]|" options: 0 metrics: nil views: views]];

[self.view addConstraint: [NSLayoutConstraint constraintWithItem: topView attribute: NSLayoutAttributeHeight relatedBy: NSLayoutRelationEqual toItem: self.view attribute: NSLayoutAttributeHeight multiplier: 0.2f constant: 0.0f]];
[self.view addConstraint: [NSLayoutConstraint constraintWithItem: middleView attribute: NSLayoutAttributeHeight relatedBy: NSLayoutRelationEqual toItem: self.view attribute: NSLayoutAttributeHeight multiplier: 0.5f constant: 0.0f]];

您无需为底部视图设置高宽比。您只需将底视图固定在主视图的底边即可。

如果你想在Interface Builder中做，你可以这样做：

1. 对于顶部框，将“Leading”，“Trailing”和“Top”约束添加到superview。此外，将“Equal Heights”约束添加到superview并将乘数修改为所需的值（参考最后一张图片）。
2. 对于中间框，将“Leading”和“Trailing”约束添加到superview。将“顶部”约束添加到顶部框。此外，将“Equal Heights”约束添加到superview并将乘数修改为所需的值。
3. 对于最后一个框，将“Leading”，“Trailing”和“Bottom”约束添加到superview。将“顶部”约束添加到中间框。