Stuck in iOS AutoLayout Mire

Question

I have a UIScrollView... inside of that UIScrollView is a UIView (Content Container)... inside that Content Container are 3 Views...

1. A Label
2. Another UIView (A)
3. Another UIView (B)

ALL THREE CREATED PROGRAMATICALLY

2 and 3 are both loaded from separate ReST calls... so while the view is loading they are both 30pt tall with a spinner.

After one or both of the of the calls returns I want to size them correctly (the top will get an image that is 320x320) and the bottom will get a table (size is not determined right now)...

I am trying to achieve this spacing Top of Container - 20pt - Label - 20pt - Content A - 20pt - Content B - Bottom of Container

I am using the following inside -(void) updateViewConstraints

    [_containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[{label}]-20-[{content A}]-20-[{content B}]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:viewsDictionary]];

Here is what it looks like after the call to get the content for A is returned:

I am literally ready to stab my eyes out... I have no idea why this is so difficult. The frame for Content B looks like this: Other Frame: {{0, 150}, {320, 30}}, Bounds: {{0, 0}, {320, 30}}

What I'm ultimately trying to do is create a UIScrollView that will allow me to scroll the view to see both the image and the table that will be displayed at the bottom... I have the UIScrollView and the Container View (_containerView = UIView) as IBOutlets in the IB.

Answer 1

AutoLayout is allegedly a good layout engine. But I've never seen this demonstrated in the real world, for me it just ends up being a headache.

I suggest disabling AutoLayout (which you can do in the document inspector for the xib file) and using the old/proven springs and struts system. When you need layout too complex for springs/struts, write some custom code in a view controller to handle it.

Answer 2

You haven't said anything about the appearance of your table view. If the table view has only one section, the easiest solution might be to instead give it three sections. Put one cell in the first section, containing the label. Put one cell in the second section, containing either the spinner or the image view for the “A” content. Put the “B” content in the third section.

If you can't do that, here's another approach. Set up the “static” members of the view hierarchy like this:

scrollView - UIScrollView
  scrollContentView - UIView
    label - UILabel
    aContainer - UIView
    bContainer - UIView

Set up vertical constraints like this:

V:|-[scrollContentView]-|
V:|-[label]-[aContainer]-[bContainer]-|

Insert the A spinner as a subview of aContainer, and set up its constraints like this:

V:|[aSpinner]|

Insert the B spinner as a subview of bContainer, and set up its constraints the same way:

V:|[bSpinner]|

When the image for area A arrives, remove aSpinner from its superview. This will remove the constraints between aSpinner and aContainer. Add the aImageView as a subview of aContainer and set up constraints for it:

V:|[aImageView]|

When the table data for area B arrives, remove bSpinner from its superview. Add the bTableView as a subview of bContainer and set up constraints for it:

V:|[bTableView]|

You need to figure out how tall to make the table view, and set up a constraint for it. You might find this answer useful.