ios - Autolayout design accommodating iPhone 3.5 inch and iPhone 4 inch screen size

Question

I'm creating an universal app. Now I want to place two buttons on the screen:

I tried it with autolayout and Interface Builder (iOS Designer exactly) but I only managed to fit the buttons on one screen size (e.g. 3.5 inch display). Therefore I set the size of the buttons and the spacing to the top (one to the top of the superview and one to the bottom of the button above).

But is there a way to adapt this to the screen size? E.g. the width of the button is the the view width minus a certain gap. Or centering the buttons like in the picture (one would be easy)? Is this possible?

Than the other option is to do everything in code (creating the button and creating the constraints). Here I could query the view width and so on to create my buttons accordingly. Is this the only way?

How can this be managed?

EDIT:

Now I placed an empty label on the view controller. On this label I added the following constrains:

• Align Center Y to: Superview, Equals: 0
• Align Center X to: Superview, Equals: 0

On my buttons I set a fixed height and width. Than the trailing space to the superview equals 50 (horizontal centering works because both screen sizes have the same width). The button on top has the following constraint:

• Align Center Y to: Label, Equals: 20

The button on the bottom gets:

• Top Space to: Label, Equals: 20

Don't know why it takes different constraints but in the GUI editor I took the bottom or top point of the button. Here the label gets also:

• Align Center Y to: top Button, Equals: 20
• Top Space to: bottom Button, Equals: 20

Now I have the two buttons centerd on the screen regardless of 3.5 or 4 inch display. One disadvantage is that the gap to the navigation controller and toolbar is very small on the 3.5inch display. Here I can make the buttons smaller. Any other options? The initial idea was to set always the space to the top element but on the 4 inch screen there is much space on the bottom than.

Answer 1

Autolayout is based on four parameters, x,y,w,h. Knowing this, the key for a dynamic layout is to understand the minimum number of constraints needed to satisfy all four constraints.

In your drawing, we can address x coord for both buttons by "horizontal center in container."

w (width) can either be fixed (i.e. 300), or inferred (if button is 10 from the leading edge, left; 10 from the trailing edge, right), then width is 300...)

Now we get to the Y coords and H (height). You have a couple options. Constrain the height, and then set the Y's accordingly. (i.e. lock the heights to 60, and the distance from the top/bottom to 40 for example -- your actual values will vary... Another trick i've seen apple engineer do at WWDC is insert an empty view in the center, and then set the constraints of the buttons based on that.

Hope this adds a little insight and doesn't confuse you more. Autolayout is weird, and remember, in ios8 we'll have the sizeClasses to consider as well.. ;(