How to Use Auto Layout in XCode 6 for iOS 7 and 8 Development

The Auto Layout is available on the Storyboard for iOS or OS X development since XCode 5. But, I didn’t adopt the Auto Layout technology for the projects that I developed because there are only 2 different iPhone screen sizes (3.5 inches and 4 inches). During that time, adjusting some views to position them inside 2 different screen sizes using codes seem to be easier than learning how to use the Autolayout Constraints inside the storyboard.

I believe all the iOS developers will have to use Auto Layout for future iOS apps development projects because there are rumours that Apple will release iPhone 6 with 2 new screen sizes (4.7 inches and 5.5 inches). Although Apple has yet to confirm on the validity of the rumours, from my research on various resources/websites, I can confirm that the rumours have very high chances to be the accurate.

Even from the new XCode 6 Beta itself, Apple has released 2 new iOS simulators (Resizable iPhone and Resizable iPad) for the iOS Developer to work with. There is also a new Storyboard preview function for different iPhone screen sizes at the same time.

Update on September 2014: The rumour is true and Apple will release iPhone 6(4.7 inches screen) and iPhone 6+ (5.5 inches) soon. The latest XCode 6 Golden Master contains iPhone 6 and iPhone 6 Plus simulator as well.

Screen shot above shows the Resizable iPhone and iPad Simulator.

Screen shot above shows the XCode 6 Beta Storyboard Preview Function with different iPhone screen sizes at the same time (Only 3.5 and 4 inches iPhone screen preview available for now).

Potential iPhone 6 Screen Sizes and Resolutions

Before iPhone 6, there are 2 standard screen resolution sizes that most iOS app developers use as a guidelines when developing iOS mobile app. These 2 screen sizes are 320 x 480 (3.5 inches) and 320 x 568 (4 inches). Here are a list of iPhone screen Resolutions (including iPhone 6):-

iPhone 4S
Screen Size: 3.5 Inches
Resolution: 640 x 960 (Half: 320 x 480)

iPhone 5
Screen Size: 4.0 Inches
Resolution: 640 × 1136 (Half: 320 x 568)

iPhone 5S/5C
Screen Size: 4.0 Inches
Resolution: 640 x 1136 (Half: 320 x 568)

iPhone 6
Screen Size: 4.7 Inches
Resolution: 828 x 1472 (Half: 414 x 736)
Resolution: 750 x 1334 (Half: 375 x 667)

iPhone 6 Plus
Screen Size: 5.5 Inches
Resolution: 906 x 1704 (Half: 453 x 852)
Resolution: 1242 x 2208 (1/3: 414 x 736)
The size of iPhone 6 Plus is @3x scaling. So, it is divided by 3.

So, other than 320 x 480 and 320 x 568, we have to use 375 x 667 and 414 x 736 at theResizable iPhone Simulator.

After you build and run your project with the Resizable iPhone Simulator, you may set Width as 414, Compact and Height as 736, Regular and remember to click “Apply” like screen shot below:-

Update on September 2014: It is best to use the iPhone 6 and iPhone 6 Plus simulator provided on the XCode 6 Golden Master (GM) to test and run, rather than using resizable iPhone simulator because the resizable simulator is quite unstable as of now.

How about iPhone 4? I believe iPhone 4 will be dropped from the support for iOS 8. So, it is not worth to mention here.

The Basic 15 Auto Layout Position Guides on XCode 6

When I tried to use auto layout with many different objects within a view controller, I always messed up the entire view controller. Almost every single time, the connected constraints for the objects are not correct which caused the objects to position in awkward positions.

Out of frustration on one fine day, I decided to come out with the most basic positions that one single object can be positioned inside a view controller. Using these basic guides/rules, I will slowly connect the constraints with other objects inside the same view controller.

First of all, you will have to determine the Size of the Object inside the View Controller.

An object can have 4 different sizes:-
- The Object has fixed Height and fixed Width
- The Object has fixed Width but with flexible Height
- The Object has fixed Height but with flexible Width
- The Object has flexible Height and flexible Width

But we may ignore flexible Height and flexible Width for most objects because the only potential objects using the flexible Width and flexible Height could beUIScrollView and UIView. We can safely assume that most objects have only 3 potential sizes.

The object can be located in 5 different positions:-
- Always at the Center of the SuperView
- Always stick to the Top Layout Guide
- Always stick to the Bottom Layout Guide
- Always stick to the Left side of the SuperView
- Always stick to the Right side of the SuperView

So by doing the math, we will have an object with 3 potential sizes in 5 potential positions. So, we will have a total of 3 x 5 = 15 different potential auto layout guides for one single object in a single view.

I have developed a simple XCode Project to shows all these 15 different auto layout guides for my personal reference. I have also uploaded this project to Github and hope that other iOS developers who are learning Auto Layout will find it useful.

You may download this simple project from the Github to see how I set the different constraints for all these 15 different scenarios: 15 Auto layout Scenarios for iOS 7 and 8 Development

How to Use Auto Layout in XCode 6 for iOS 7 and 8 Development

It is still possible to use codes to adjust the views based on different screen sizes. But, when there are too many different iPhone screen sizes, adopting the autolayout technology will actually ease our development work by having us to code less.

When you start to develop the iOS app from XCode 6 using the storyboard, the First thing that you find would be a new strange square 600 x 600 layout. It is quite different compare with the previous version of XCode which the storyboard only offers the tall and the short layout (for 3.5 vs 4.0 inches screen).

When you click at the bottom of the Storyboard screen, you will see a pop up view indicating Any Width | Any Height as the base value for the layouts. You can select any of the value (eg: Compact Width | Any Height) and the layout of the storyboard will change based on what you choose.

Here are some important steps to Use Auto Layout in XCode 6 for iOS 7 and 8 Development:-

Step 1: Make sure that you understand The Basic 15 Auto Layout Position Guides above.

Step 2: Always start to develop the app from Any Width | Any Height.
- Any constraints that are added on Any Width | Any Height layout will be auto converted to other screen layouts.

Step 3: Try to satisfy all the constraints in Any Width | Any Height layout, adjust the constraints on other layouts Only when necessary.
- Most of the constraints relationship should be constructed on Any Width | Any Height layout. You will have to use the Storyboard preview and also the different sizes of iPhone simulators to see if the constraints position all the Objects correctly or otherwise.
- If you find out that the position is not correct for a certain screen sizes (eg: incorrect position for screen above 4 inches), then only you try to adjust the constraints for other layouts like (Compact Width | Any Height or Compact Width | Regular Height)

Step 4: Learn to group different elements together to have the best result.
- Sometimes you will have to group different UI objects together inside a view in order for them to sit next to each other. Without Grouping, the objects might not be positioned at the right place. An example scenario would be: 2 Buttons sit next to each other at a constant width. These 2 buttons will be position at the bottom center of the screen.

Here are the steps to group the objects inside a view:-
1. Select all the elements that you want to group
2. Go to Editor -> Embed In – > View
3. Then you may centralise the newly created superview of the objects on the center of the view controller.

Screen shot above shows the way to group 2 different buttons using a view on Storyboard in XCode.

I hope this simple post can help some iOS developers to learn the basic of Auto Layout. There are still many different strategies/techniques to use constraints in the view controller such as using Priority to avoid the constraint conflict. You could have potentially seen some warnings/errors such as “ScrollView has ambiguous scrollable content height” when using Autolayout.

I will share more advance auto layout techniques for iOS 7 and 8, the potential warnings/errors and the way to solve them in another blog post. Meanwhile, you may download and check this simple project from the Github to see how I set the different constraints for all these 15 different scenarios.

Github Project: 15 Auto layout Scenarios for iOS 7 and 8 Development

Update on 10 Oct 2014: I have written an Autolayout Tutorial with more advance techniques/tips here: Auto Layout Advanced Techniques for iOS 8 and 7 using XCode 6 on Storyboard