Auto Layout on Xcode 5
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Auto Layout on Xcode 5



Apple did a huge improvement on Autolayout in Xcode 5 such as the shortcuts on IB, controls, and ease of use. I think we should give auto layout a second chance since it will be a big help for us in ...

Apple did a huge improvement on Autolayout in Xcode 5 such as the shortcuts on IB, controls, and ease of use. I think we should give auto layout a second chance since it will be a big help for us in the future, especially when Apple releases new devices with different screen sizes. Auto layout can help reduce large amounts of code.



Total Views
Views on SlideShare
Embed Views



1 Embed 14 14


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Auto Layout on Xcode 5 Presentation Transcript

  • 1. Auto Layout (Xcode 5)
  • 2. Seeing this view with all the lines will make you freak out. Xcode 4
  • 3. There is a rumor that iPhone 6 will have a new size 4.7 and 5.5 inch. Imagine how you will handle the different screen sizes
  • 4. Autoresizing Mask Autoresizing mask can help us with our views but it’s too limited.
  • 5. Auto Layout To The Rescue!
  • 6. Auto Layout is a system that lets you lay out your app’s user interface by creating a mathematical description of the relationships between the elements. You define these relationships in terms of constraints either on individual elements, or between sets of elements. What is Auto Layout?
  • 7. 1. It allows for more flexible layouts when dealing with multiple screen sizes, interface orientations, and languages. 2. You won’t do a lot of coding for layout. Why use Auto Layout?
  • 8. Auto Layout on Xcode 5 Auto Layout is enabled by default. When you add an object in your xib in Xcode 4, constraints(T-bars) appear immediately. We tend to disable auto layout because it looks frustrating. Apple knows it. That’s why in Xcode 5, even though Auto Layout is enabled, and you’re not creating any constraints, the T-bars will not appear.
  • 9. Auto Layout on Xcode 5 In Auto Layout, if you set your button in that position and added constraints, you are telling xcode that the button is on the top- right position of the view, regardless of its orientation or screen size. When setting the button position without auto-layout, you can set its position in the xib. But what if you change the orientation to landscape or you have a different screen size? You have to write code to set its position.
  • 10. Add Constraints There are 3 ways to add constraints. ● From the toolbar ● Using Interface Builder ● By Dragging Objects
  • 11. Toolbar Editor Menu is used for auto layout. Just select the object on the view and select from the editor which constraints you want to add.
  • 12. Interface Builder On the bottom part of IB, there are four buttons for auto layout. ● Align ● Pin ● Resolve Auto Layout Issues ● Resizing Behavior It has the same content as the Editor Menu
  • 13. Interface Builder Align
  • 14. Interface Builder Pin
  • 15. Interface Builder Resolve Auto Layout Issues
  • 16. Interface Builder Resizing Behavior
  • 17. Dragging Object You can also add constraints by dragging the object to another object, then a menu will popup and you can select which constraints you want.
  • 18. Orange and Blue
  • 19. Orange Line When you add constraints on your object, an orange line will appear. This means that xcode cannot identify or compute the position of that object. Xcode needs more constraints to get more information on that object.
  • 20. Blue Line If the T-bar is blue, it means that xcode has sufficient information about the object.
  • 21. Orange Line When you manually adjust the position of an object that already has constraints, an orange line will appear. This means that there is an error. You can solve this by using the Resolve Auto Layout in Editor Menu. Select Editor > Resolve Auto Layout Issues > Update Constraints
  • 22. Reference: layout-tutorial-in-ios-7-part-1 layout-tutorial-in-ios-7-part-2