使用autolayout为viewcontroller实现此布局 [英] Achieving this layout for a viewcontroller using autolayout

问题描述

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

I am working on a viewcontroller and I would like to try to achieve something like the picture below. I'd like to do this so it looks great on any device with regards to aspect ratio.

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

The top is a container, the middle is a collectionview, and the bottom is a uitableview. What i'm trying to preserve is the aspect ratios. My thought to do this was the following:

1. 对于第一个框，将前导，尾随和上边距设置为容器（指导）。将底部设置为下面的框（较大的中间框）。同时设置宽高比。


2. 对于中间框，将前导/尾随边距设置为指南，并将底部设置为下面的框。同时设置宽高比。


3. 对于最后一个框，设置前导，尾随，底部（到指南）以及宽高比。


4. 我也设置了相同的引脚宽度

1. For the first box, set the leading, trailing, and top margins to be to the container (guideline). Set the bottom one to be the box below (the larger middle box). Set the aspect ratio as well.
2. For the middle box, set the leading/trailing margins to the guidelines, and set the bottom to the box below. Also set the aspect ratio.
3. For the last box, set the leading, trailing, bottom (to the guideline) and also the aspect ratio.
4. I also set to pin widths equally

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

After doing this, it preserves my ratios correctly but it throws a ton of errors and warnings. Any ideas as to why this would be cranky at me? The crashing/warning report:

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

非常感谢！

推荐答案

假设您希望顶视图的高度为主视图的20％，中间视图的高度为主视图的50％。你可以这样编程：

Say, you want top view's height to be 20% of the main view and middle view's height to be 50% of the main view. You can do this programatically like this:

[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]];

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

You need not set aspect height for the bottom view. You only need to pin the bottom view with the bottom edge of the main view.

如果您想在Interface Builder中执行，您可以这样做：

If you want to do in Interface Builder, you can do this way:

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


2. 对于中间框，添加Leading和Trailing对超级视图的约束。将顶部约束添加到顶部框。此外，将Equal Heights约束添加到superview并将乘数修改为所需的值。


3. 对于最后一个框，添加Leading，Trailing和Bottom约束到超级视图。将顶部约束添加到中间框。
   
   
   ¥b $ b
   
   
   
   
   
   
   
   
   
   

这篇关于使用autolayout为viewcontroller实现此布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！