Creating a percentage based iOS layout

EGHDK picture EGHDK · Aug 11, 2013 · Viewed 36.9k times · Source

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.

enter image description here

Answer

GK100 picture GK100 · Oct 12, 2014

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).

enter image description here

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:

enter image description here

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

enter image description here

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.