Achieving this layout for a viewcontroller using autolayout

问题

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.

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

Thanks so much!

回答1:

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.

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

1. For the top box, add 'Leading', 'Trailing' and 'Top' constraints to the superview. Also, add 'Equal Heights' constraint to the superview and modify the multiplier to the required value (Refer the last image).
2. For the middle box, add 'Leading' and 'Trailing' constraints to the superview. Add 'Top' constraint to the top box. Also, add 'Equal Heights' constraint to the superview and modify the multiplier to the required value.
3. For the last box, add 'Leading', 'Trailing' and 'Bottom' constraints to the superview. Add 'Top' constraint to the middle box.
   
   
   
   
   
   
   
   
   
   
   
   
   
   

来源：https://stackoverflow.com/questions/27174222/achieving-this-layout-for-a-viewcontroller-using-autolayout