Margins and Autolayout on iPhone 6 Plus

In my most recent project, Martian Monster, adaptive autolayout was crucial. It allowed me to layout my buttons evenly across all devices (which, I must add, is awesome).

However, when I ran the app on a 6 plus I was caught off guard by a significant vertical space running along each side of the screen. It absolutely disrupted my entire design. But why could this be when the other devices looked fine?

It seems that the 6 plus’ 0 x value begins out farther from the leading and trailing spaces of the screen than all other devices. And so when Storyboard defaults its’ views to be -16 points from that 0 x position, more space is left over horizontally on the screen. It’s hard to notice below because of the matching white background, but notice the top banner extends all the way past the margins, while the rest of the views do not:

when the desired result is, of course for the views to stretch all the way out to the side of the screen:

So, how did I solve this? Well, it turns out this can be countered when you initially add your constraints in Storyboard. When you add your constrains, make sure that “Constrain to Margins” is unchecked (see below):

You will then see the views that you constrain will extend to the outer edge for the 6 plus just as the other devices.

I ended up deleting and redoing all of my constraints to account for this, however next time I will likely open up the source code of my Storyboard and simply remove constraints related to margins.

Hope this helps some out there. And remember, Autolayout is your friend.