UIScrollView with Auto Layout and Device Rotation

Question

I'm trying to lay out a UIScrollView to have several content UIView objects (a couple of UIImageView objects, an MKMapView object, UILabel objects, etc...).

What I'd like is to have the items laid out with a "big" UIImageView in the top left, and the MKMapView in the top right. I'd like these to both be the same size, spaced normally off of the left and right edges of the screen (standard 20 points), the top of the view (standard 20 points), and spaced normally in the center off of each other (standard 8 points). I'd like them to be square, so their height is determined by their calculated width.

Then, I'd like to place a row of similarly-laid-out UIImageView objects, spaced normally from the top "row", from the left and right of the view and from each other. I'd also like these objects to be square, calculating their height from their width.

Below that, I want some UILabel objects (title label and then a longer description).

Here's a rough layout of my desires:

Portrait Mode

|------------------------------|
|                              |
|  |----------|  |----------|  |
|  |          |  |          |  |
|  |          |  |          |  |
|  |          |  |          |  |
|  |----------|  |----------|  |
|                              |
|  |------| |------| |------|  |
|  |      | |      | |      |  |
|  |      | |      | |      |  |
|  |------| |------| |------|  |
|                              |
|  Title Label Here            |
|                              |
|  Description here..........  |
|  Description here..........  |
|  Description here..........  |
|  Description here..........  |
|                              |
|------------------------------|

Landscape Mode (title and description labels assumed to be off-screen)

|----------------------------------------------|
|                                              |
|  |------------------|  |------------------|  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |------------------|  |------------------|  |
|                                              |
|  |-----------| |-----------|  |-----------|  |
|  |           | |           |  |           |  |
|  |           | |           |  |           |  |
|  |           | |           |  |           |  |
|  |           | |           |  |           |  |
|  |-----------| |-----------|  |-----------|  |
|                                              |
|----------------------------------------------|

Obviously, a lot of title/description content will fill more size than the screen has, thus I'm trying to place all of this in a UIScrollView.

Further, I'd like this layout to adapt to device rotation.

I can't seem to figure out how to do this with auto layout.

With springs and struts, it seems like it would be a fairly straightforward process.

With auto layout, I keep getting "missing constraints" and "misplaced views" errors/warnings.

I've read the Apple document here.

I've read this blog post

Following their advice doesn't really make sense to me (or at least, when I try, it doesn't work).

Answer 1

Each view must have at least 4 constraints for Autolayout to compute the 4 edges. Start with the top left image. Set a constraint for the top edge: pin it to its superView with default value (just delete the numerical value in InterfaceBuilder). Then do the same for the left edge. Now do the same for the top right map view for the top and right edge (pin them to the superView). Then set a horizontal constraint from the right edge of the left image to the left edge of the map. Again delete the numerical value and Autolayout will use the default value. Finally set an aspect ratio 1:1 constraint for the image and the same for the map. Now the two top views are fully defined.

Continue with the left small image, pin its left edge to the superview (default) and the top edge to the bottom of the large image (default). Now align the top edge of the middle small image to the left image. Align the top edge of the right small image to the middle small image. Pin the right edge of the left image to the left edge of the middle image, then do the same for the right+middle image. Pin the right edge of the right image to the superview. Now all images are top-aligned and pinned horizontally to each other and the superview. Again you need to add an aspect ratio 1:1 constraint to at least one of the images. But you can then just align the bottom edges of the other two images to the first one instead of each image having its own aspect ratio constraint. Now the three small images are fully defined.

Finally pin the labels to the superview each on their left edge, and each top edge to the bottom of its top view. Since a text label gets its size by the text (width) and used font (height), labels need only two constraints (x,y).

You're done.