CODEWITHSUNDEEP
iosxcodeinterface-builderautolayout
scttnlsn
scttnlsn

Reputation: 3026

iOS Auto Layout: Can this be done with IB?

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

At the top of the view:

Filling the rest of the space below the image view:

Can this be done solely in IB?

-Scott

Upvotes: 2

Views: 2854

Answers (2)

jrturton
jrturton

Reputation: 119242

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: enter image description here

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.

Upvotes: 4

Nikola Kirev
Nikola Kirev

Reputation: 3152

To make the UIImageView squared you would need to make the constraint trough code. I think all of the other requirements can be covered in IB, but personally, I would advise you to make it trough coding.

Good luck.

Upvotes: 0

Related Questions