Auto Layout
(Xcode 5)
Seeing this view with all the lines will make
you freak out.
Xcode 4
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 siz...
Autoresizing Mask
Autoresizing mask can help us
with our views but it’s too
limited.
Auto Layout To The Rescue!
Auto Layout is a system that lets you lay out
your app’s user interface by creating a
mathematical description of the rela...
1. It allows for more flexible layouts when
dealing with multiple screen sizes, interface
orientations, and languages.
2. ...
Auto Layout on Xcode 5
Auto Layout is enabled by default. When
you add an object in your xib in Xcode 4,
constraints(T-bar...
Auto Layout on Xcode 5
In Auto Layout, if you set your button in that position and added
constraints, you are telling xcod...
Add Constraints
There are 3 ways to add constraints.
● From the toolbar
● Using Interface Builder
● By Dragging Objects
Toolbar
Editor Menu is used for
auto layout. Just select
the object on the view
and select from the editor
which constrain...
Interface Builder
On the bottom part of IB, there are
four buttons for auto layout.
● Align
● Pin
● Resolve Auto Layout Is...
Interface Builder
Align
Interface Builder
Pin
Interface Builder
Resolve Auto Layout Issues
Interface Builder
Resizing Behavior
Dragging Object
You can also add
constraints by dragging
the object to another
object, then a menu will
popup and you can ...
Orange and Blue
Orange Line
When you add constraints on your object,
an orange line will appear. This means that
xcode cannot identify or ...
Blue Line
If the T-bar is blue, it means that xcode has
sufficient information about the object.
Orange Line
When you manually adjust the position of
an object that already has constraints, an
orange line will appear. T...
Reference:
https://developer.apple.com/videos/wwdc/2013/
http://www.raywenderlich.com/50317/beginning-auto-
layout-tutoria...
Upcoming SlideShare
Loading in...5
×

Auto Layout on Xcode 5

630

Published on

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.

Published in: Education, Technology, Business
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
630
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Auto Layout on Xcode 5

  1. 1. Auto Layout (Xcode 5)
  2. 2. Seeing this view with all the lines will make you freak out. Xcode 4
  3. 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. 4. Autoresizing Mask Autoresizing mask can help us with our views but it’s too limited.
  5. 5. Auto Layout To The Rescue!
  6. 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. 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. 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. 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. 10. Add Constraints There are 3 ways to add constraints. ● From the toolbar ● Using Interface Builder ● By Dragging Objects
  11. 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. 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. 13. Interface Builder Align
  14. 14. Interface Builder Pin
  15. 15. Interface Builder Resolve Auto Layout Issues
  16. 16. Interface Builder Resizing Behavior
  17. 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. 18. Orange and Blue
  19. 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. 20. Blue Line If the T-bar is blue, it means that xcode has sufficient information about the object.
  21. 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. 22. Reference: https://developer.apple.com/videos/wwdc/2013/ http://www.raywenderlich.com/50317/beginning-auto- layout-tutorial-in-ios-7-part-1 http://www.raywenderlich.com/50319/beginning-auto- layout-tutorial-in-ios-7-part-2
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×