interface builder - Creating a percentage based iOS layout

Question

I'm trying to replicate a layout that I currently have in an Android application, but I don't know how to go about it in iOS especially because of the tallness of the iPhone 5.

I know how to explain this in "Android" terms but I've been trying for the past few days to do this in iOS but I can't quite get it to work.

Best way to explain it:

1. I want two layouts. The top layout must take up 40% and the bottom must take up 60%.
2. In the top layout, they must be three buttons that fill up all space possible (Essentially 1/3 of the space)
3. In the bottom layout, I want an imageView, and then a textView on top of that.

This is a paint mockup. Is this possible to do in iOS? I feel that layouts are much harder to create than android.

Answer 1

Using Xcode 6.0, you can now specify proportional width or height in Interface Builder. Steps for percentage height from superview:

While both the child view and its superview are selected, add an "equal height" constraint (or "equal width" if you wish to have a proportional width).

Then change the "multiplier" of the constraint you just added to the proportion you need. For example, for 50%, change it to 2.

If you like to specify the inner view as percentage of the superview, you can reverse the items in the constraint:

Now you can use a multiplier of 0.5 (or any other proportion you need):

In your specific case, you can define an "equal height" constraint between the 2 child views, and change the multiplier to 1.5 (the bottom being 1.5 the size of the top) or 0.6667 if the items are reversed.

See also How to make constant auto-resize in Storyboard?