Creating a percentage based iOS layout

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?

Contrary to the other answers, I think you should at least consider the auto layout system. It was created to make it easier to build predictable layouts like the one you've described. Autolayout is ruled by constraints that you put on the views in the layout. You can create those constraints visually or programmatically. Visually, your first view would look something like this:

The blue lines you see there are a number of constraints that specify the inter-button spacing, the space around the buttons, and the heights and widths of the buttons. You can see a couple constraints that have a = on them -- I selected all three buttons and gave them an "equal height" constraint.

There's a nice visual format syntax that lets you describe constraints as strings. Take a minute to look at the linked document -- it won't take much longer than that to learn enough that you can read the strings. For example, your top layout can be specified like this:

V:[button1]-[button2(==button1)]-[button3(==button1)]

The parenthetical ==button1 tells the layout system to make button2 and button3 the same height as button1. The - indicates that the standard spacing should be used between the buttons; you can specify a different spacing if you want. For 10 point spacing, do this:

V:|-10-[button1]-10-[button2(==button1)]-10-[button3(==button1)]-10-|

Once you have such a string, you can turn it into a constraint using the method: +[NSLayoutConstraint constraintsWithVisualFormat:options:metrics:views:]

Some constraints can't be specified either visually or with the strings described above. Chief among these are those where you want to set a constant (but unequal) relationship between two views, as with your top and bottom layouts. You want one of those to take up 40% of the available vertical space, and the other to take 60%. Do this using the method: +[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:]. For example:

NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:bottomView                                                     attribute:NSLayoutAttributeHeight                                                     relatedBy:NSLayoutRelationEqual                                                        toItem:topView                                                    multiplier:1.5                                                      constant:0];

That gives you a constraint that sets the height of bottomView to 1.5 times the height of topView (which is what you want, since 60/40 = 1.5).

If you create constraints programmatically, you can add them to the appropriate view when you create (or load) the view hierarchy. Your view controller's -viewDidLoad method is a fine place to do that.

I don't know about using autolayout as I dont use it, but in code without it, you could create two UIViews and set their frames to:

CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height * 0.4f);CGRectMake(0, self.view.frame.size.height * 0.4f, self.view.frame.size.width, self.view.frame.size.width * 0.6f);

And then in the top view, you can add the buttons with frames (assuming the view is called view1):

CGRectmake(0, 0, self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));CGRectmake(0, view1.frame.size.height * (1.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));CGRectmake(0, view1.frame.size.height * (2.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));