Question

I’m trying to create the following auto layout with interface builder:

At the top of the view:

• image view that fits the width of the device
• image view is square (height is also equal to width of device)

Filling the rest of the space below the image view:

• 3 buttons of equal height
• together they fill the rest of the space below the square at the top

Can this be done solely in IB?

-Scott

Answer 1

No it can’t, because you can’t express relationship constraints in interface builder.

You can do everything else (almost, see edit) except the height of the image view. You can set a constant height constraint on the view (perhaps set to the width of the iPhone screen) and then create an outlet to it.

At run time, if you’re running on iPad (I assume the requirement is to work between iPad and iPhone rather that portrait and landscape, since your description doesn’t make sense for landscape) then remove this constraint and add a new one pinning the height of the image view to be the same as its width.

Here’s how to set up the rest of the constraints. I’m assuming you’re starting with a view controller just containing its main view outlet.

1. Drag in the image view, it will fill the screen by default.
2. Pin the height of the image view to 320 using the pinning menu (then edit the constraint that is created). This is the constraint you’d create the outlet to.
3. Drag in the three buttons
4. Select them all and pin heights equally
5. Select the bottom button and, using the Pinning menu, pin the bottom space to the superview
6. Select that constraint and tick the “Standard” check box. This will grow your three buttons to fill the remaining space (plus a bit of spacing).
7. Select all three buttons and pin the widths equally
8. Select one button and pin the trailing space to the superview. As before, select this constraint and tick the “Standard” checkbox. The buttons will grow to fill the width of the view.

You want it to look something like this:

For some reason, IB adds, and wouldn’t let me remove, the height constraint on one of the buttons. It didn’t seem happy to have the three buttons of equal height, and to derive the height of each one at runtime based on the spacing and the height of the image view. It may also be necessary to remove that constraint at runtime, or I may have missed something while bashing this together. Anyway, hopefully the principles outlined above are helpful.