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.

Resizable iPhone Simulators
Screen shot above shows the Resizable iPhone and iPad Simulator.

XCode 6 Beta Preview Function
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 the Resizable 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:-

Resizable iPhone Simulator in Xcode 6

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 be UIScrollView 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.

The Basic 15 Auto Layout Position Guides on XCode 6

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.

Height and Width on XCode 6 Storyboard

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.

Group the objects inside a view on Xcode Storyboard
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

Auto Layout Advanced Techniques for iOS 8 and 7 using XCode 6 on Storyboard
The Comparison Between Swift and Objective-C Programming Language

Comments

  1. There is a major item missing the new auto layout. Among the various choices under “Any Width | Any Height” there is NOT an option for iPad Portrait vs. iPad Landscape! A major oversight in my opinion. (unless of course I’ve missed something! LOL)

    • Hi Jim,

      I don’t involve too much of iPad apps development recently. From my understanding on the Auto Layout in XCode 6, The Width vs Height selection is just a guideline. The guidelines for iPad, it would be Any Width | Regular Height, Regular Width | Any Height and Regular Width | Regular Height.

      So, you may start to develop the constraints in Any Width | Any Height, make sure that the 3 guidelines above look good and then try to run on the iPad simulator.

  2. Absolutely fantastic tutorial and one of the best explanations of Auto Layout I’ve seen for iOS yet. That sample project really helped me get a grasp on these techniques that I’ve been trying to comprehend for a while. Those rules are KEY, this is how Apple should explain this in their own documentation.

    Can’t wait for the next posting on this topic.
    Thanks!

    • Thanks for the compliment. I will be posting another post related to more advance techniques in Autolayout this month when I have some free time.

  3. Great tutorial, got layout sorted now apart from how i use this new layout style with scrolling content? if its single screen it all works fine and adapts perfectly to dif devices. can you do a tutorial of using this with scroll as well please!?

    • I am glad that you find it useful. What you do mean by “scroll”? Do you mean there will be more objects inside the same view controller and I will have to use a UIScrollView and put all the objects inside it? Yes, I will make a new tutorial regarding that soon.

      Hopefully I will find some time to make the tutorial within the next 1 week.

      • Did you ever write a tutorial showing how to do this in a UIScrollView? Seems I can’t get the content view to size correctly when I move from a iPhone5 to iPhone 6.

  4. That’s very great tutorial. I even can’t wait to read next tutorial.
    Now, I am struggling to understand how to set the constraint with 2 or more objects.

  5. Hi, I’m new to GitHub , where can I find the basics in GitHub, I see the .swift files is that one I should look to learn the basics ?

    • You just go to https://github.com/voyage11/AutoLayoutBasics and then click on the “Download Zip” button on the right hand side. After downloading, you will have to unzip and you will have the entire XCode project. You will have to have the entire project in order to run it. I have done all the Auto Layout Constraints on the Storyboard itself. So, the .Swift files are just the empty files.

  6. Should we only design layout based on 600×600 (even in retina iPhone5) ?
    Image looks like not delicate…..

    • Yes, you should. 600 x 600 is a just a design template. If you add the constraints correctly. The layout will auto adjust based on the screen size of the phone. I will explain better in a new post related to the Advance Auto Layout techniques that I have written half way. I will post a new open source examples on Git Hub as well. Still trying to find time to complete that post.

  7. I am not seeing the option to view the storyboard in Any Width | Any Height. I am running Xcode 6.1. Is there anything special you have to do to get this option to show itself? I just have a blank down there, and clicking on it does nothing.

    I’ve been using auto-constraints all along (I started with late iOS 6). This is a great tutorial. Thanks. Recently I’ve run into problems because I was doing all my constraints in 3.5″ mode. Xcode 6 really doesn’t do well with this (though it worked fairly well in Xcode 5). The Any Width | Any Height thing sounds like it might solve my issues if I could figure out how to invoke it. Thanks.

    • If your project is an old project created from the old version of XCode (Not XCode 6), there is a chance that you will see the storyboard without the Any Width | Any Height with the dimension 600 x 600.

      You might need to recreate a new project and move the UI objects one by one to the new storyboard on XCode 6.

      • Thank you.

      • Antonio Germano says:

        No! No, no no!!

        Don’t recreate everything; by the description he gave us, the problem is he doesn’t have size classes enabled.

        Size classes and auto layout are two different things, and you can have auto layout without having size classes (but not the opposite).

        All he has to do is open his storyboard, then open the right Xcode bar on the first item ( CMD + option + 1) and check “Use size classes”. This will make Xcode convert all of your storyboard automatically for you, and you won’t have to do anything at all!

  8. An object can have 4 different sizes:-
    “- The Object has fixed Height and fixed Weight”, maybe its a typo maybe not…did you mean to say fixed Width?

    Thank you.

  9. simon gardener says:

    Thanks very much for a helpful article and the project on github

  10. Ved Prakash says:

    Hi,

    I am struggling with auto layout for a while, I hope you may be able to help me with it.

    I have a view with
    Navigation bar, 2 scroll view, 1 with image view and other with AQGridView. The image view allows user to see photos like photo app, and the grid allows selection. The moment user starts zooming in pic, I see lot of messages related to constraint in log. Is there a way to do it better?

    Thanks in advance.

    • Setting Constraints with ScrollView is not easy. I have been using the Autolayout and constraints for many months. Sometimes I will also stuck and reconnect the constraints in a view controller that has scroll view.

      If you see the constraints conflicts error on the log, it means there must be something wrong. The best advice that I can give you is clearing all the constraints inside the View Controller and redo all the constraint. Always make sure that there isn’t any error/warning when you are connecting the constraints.

  11. Lal Thomas says:

    Well I can’t explain how thankful I feel when I read this article. Starting from the basics and explaining the things very simple, just like I need. I was searching for such a tutorial for weeks. Expecting more tutorials on auto layout from you.

  12. Thumbs up! Thanks a lot!

  13. Thanks Ricky!! I am wondering if you have got the scrollview example ready. I am working with Scrollview that has a view(with subviews). And it does not get scrolled completely on iPhone 6. Do I have to adjust the height of the scrollview to be greater than 600. I have started with Any width and Any Height. And then for iphone I am using compact width and Any height. I am really confused and stuck at this point. Please help me.. Thank you in advance…

    • I have a few examples related to using scrollview with Auto Layout. It is under the other article. But I haven’t complete that article yet and I haven’t upload the solution on Github yet. I need some more time to do it.

  14. Emerson Jose - BR says:

    Hey Ricky, Pretty good this article. Now I got it about AutoLayout. Thanks for the tips. Amazing job go ahead !

  15. Thank you very much, I found it’s really useful for me, but when I created a scroll view in my project, the strange thing happens : in the iPhone 6 simulator,the scroll view’s size is 320*160,it occupy the full screen width just as it was on iPhone 5 and iPhone 4s,but when I add some subviews in it , the subview can not occupy the full screen in iPhone 6 simulator ,please help me .

  16. Luis Hernández says:

    Nice article, mate. I stopped developing for iOS when iOS 5 was still the new thing, so when I came back I found myself saying “dafuq is this” as my controls were all messed up haha. I can say that your examples are a bright light in the dark. Thanks.

  17. Deepak Arora says:

    Hi,,
    Very nice tutorial, helps a lot. Thanks.

  18. chaitanya says:

    Hi,
    If i designed in Any Width | Any Height and applied constraints for all UI, Is that enough for me to run the app in all iPhone devices???

  19. Virendra says:

    hello,
    friend my problem is i am using storyboard drag the view controller uicollection view cell ,cell add the uiview and uiview loading the custom image view .
    my problem is how to add the constraint in collection view cell and custom image view?

  20. Hi,
    Is there any way to scale up font size also?
    As we don’t have any size class (width and height combination) which separates iPhone 6 or 6 plus (Portrait) from other, I am not able to provide large font size for such high resolution iPhones.

Speak Your Mind

*