使用自动布局为视图控制器实现此布局答案

【问题标题】：Achieving this layout for a viewcontroller using autolayout使用自动布局为视图控制器实现此布局
【发布时间】：2014-11-27 15:35:55
【问题描述】：

我正在开发一个视图控制器，我想尝试实现如下图所示的功能。我想这样做，因此它在任何设备上的纵横比看起来都很棒。

顶部是容器，中间是collectionview，底部是uitableview。我要保留的是纵横比。我这样做的想法如下：

对于第一个框，将前导、尾随和顶部边距设置为容器（指南）。将底部的设置为下面的框（较大的中间框）。同时设置纵横比。
对于中间框，将前导/尾随边距设置为参考线，并将底部设置为下面的框。同时设置纵横比。
对于最后一个框，设置前导、尾随、底部（根据指南）以及纵横比。
我还设置了相同的引脚宽度

执行此操作后，它会正确保留我的比率，但会引发大量错误和警告。关于为什么这会对我发脾气有什么想法吗？崩溃/警告报告：

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)]>"
)

非常感谢！

【问题讨论】：

当设备本身具有不同的纵横比时，您无法保留所有这些视图的纵横比。您可以设置每个视图的高度比例。或者您可以设置两个视图的纵横比，让第三个视图更改其纵横比以使用剩余的空间。

标签： ios8 autolayout xcode6

【解决方案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 中做，你可以这样做：

对于顶部框，将“Leading”、“Trailing”和“Top”约束添加到超级视图。此外，将“等高”约束添加到超级视图并将乘数修改为所需的值（请参阅最后一张图片）。
对于中间框，将“Leading”和“Trailing”约束添加到超级视图。将“顶部”约束添加到顶部框。此外，将“等高”约束添加到超级视图并将乘数修改为所需的值。
对于最后一个框，将“Leading”、“Trailing”和“Bottom”约束添加到超级视图。将“顶部”约束添加到中间框。

【讨论】：