An overview of the primary concepts for implementing Auto Layout in your iOS projects, Derek covers the basic procedure you'll likely follow for adding, editing, and removing constraints as well as how to understand the sometimes cryptic messages that Xcode displays when debugging Auto Layout issues. Including several useful tips and tricks for using Interface Builder to successfully implement Auto Layout, this brief presentation covers the basics and can be used as a reference for those who already have some experience.

1. Adjusting to Auto Layout
iOS Meetup Tokyo
September 2014
derek lee

2. Your Presenter
• 15 yrs IT experience
• 2+ yrs iOS
• Transitioned to full-time iOS
Freelance in July (2014)

3. Yoga Sensei
Released Feb 2014

4. CURRENTLY!
IN PROGRESS
Groove Freedom
Release Planned Oct / Nov 2014

5. So why are we talking about Auto Layout today?
?

7. Auto Layout is…
A constraint-based descriptive layout system

8. Auto Layout is also…
Capable of giving you the desire to
toss your Mac out the window

9. Auto Layout is also…
was?
Capable of giving you the desire to
toss your Mac out the window

10. Auto Layout
Not a topic that can be fully covered
within a 30 minute timeframe

11. When this presentation is
over, you should understand:
• Why Auto Layout is important and why you need to
adopt it in your projects
• The basic steps and workflow required to start
applying auto layout to your projects
• How to add, edit & remove constraints to satisfy
basic conditions

12. When this presentation is
over, you should understand:
• How to approach debugging Auto Layout issues
• How size classes further improve upon Auto Layout
challenges in iOS8
• Some tips and tricks to help you work with Auto
Layout in Xcode
* Note that pretty much all screenshots and explanations have been
created with the latest beta of Xcode 6.1.

13. Auto Layout
• Overview
• Basics: Working with Constraints
• Debugging: Resolving Issues with Constraints
• iOS8 Impacts: Size Classes
• References

14. Overview
• First introduced in 2011 for the Mac
• Brought over to iOS in 2012 with iOS6 / Xcode 4
• IB improvements in iOS7 / Xcode 5
• Further developed for iOS8 / Xcode 6

15. Why Auto Layout?
• Describe how views should be laid out in a
relational manner to their superview & sibling views
• Dynamically respond to application changes
• User provides constraints; system calculates the
frames
• More power and control over springs and struts

16. Why Auto Layout?
• Multiple iOS versions (6, 7, 8… 9? 10?)
• Rotation: Portrait vs Landscape
• Dynamic Content
• Localization
• Screen sizes
• Before: iPhone & iPad
• Now: iPhone 4, 4S, 5, 5S, 6, 6 Plus & iPad Variations

17. Before we begin…
A couple of important concepts…
• Phases of Display
• Intrinsic Content Size

18. Phases of Display
• Update Constraints - Bottom up, leaf to root
• Layout - Apply the layout top-down
• Display - Display also from the top-down

19. Intrinsic Content Size
• Size of the control based on the content it contains
• Two constants per direction (height, width)
• Content Hugging
• Compression Resistance
• At run time, infer size based on content; grow and resize
dynamically
• Generally you do not want to add explicit width and height
constraints to a view that has an intrinsic content size

20. Intrinsic Content Size
• Content Hugging Priority
• High value matches a view’s frame to the natural
size of its content, limiting the view from growing
larger than it’s content
• Compression Resistance Priority
• High value fights clipping/shrinking, maintaining
its intrinsic content size
• Both Horizontal and Vertical priorities

21. Working with Constraints
Standard Workflow Steps!
1. Enable Auto Layout
2. Initial layout of objects
3. Add constraints (Interface Builder or Code/VFL)
4. Debug & resolve issues

22. Enabling Auto Layout
• Storyboard
• File Inspector
• “Use Auto Layout” checkbox
• Set at Storyboard or NIB level
Enable Initial Layout Constraints Debug

23. Initial Layout
• Placing views and objects in
their approximate position
• Not yet considering device
orientation, other screen sizes
• If no constraints, the default is
fixed position and fixed size
• Build & Run >> Views laid out
as expected
• Rotate >> Position/size fixed
Enable Initial Layout Constraints Debug

24. Adding Constraints
• Constraints must be sufficient
• Constraints must not conflict
Enable Initial Layout Constraints Debug

25. Adding Constraints
In order of Apple’s recommendation:
• Interface Builder
• Visual Format Language (VFL)
• Base API (NSLayoutConstraint)
Enable Initial Layout Constraints Debug

26. Visual Format Language
Enable Initial Layout Constraints Debug

27. How to Add Constraints
1. Control + Drag
2. Align Menu
3. Pin Menu
4. Resolve Auto Layout Issues Menu
Enable Initial Layout Constraints Debug

28. Control + Drag
• Hold “control” key + drag to
destination
• Destination can be superview
or other object
• Control + click in source
object, drag to destination and
release
• The direction you drag in
dictates the options that are
presented
Enable Initial Layout Constraints Debug

29. Xcode IB Tip
• Add multiple constraints at
one time:
Control + Drag, then:
Shift or Command + Click
!
• A white dot next to a
constraint means that it
already exists

30. Align Menu
• Select the view or object
whose constraints you want to
modify
• Click on the Align Menu
• Select constraints as needed
Enable Initial Layout Constraints Debug

31. Pin Menu
• Select the view or object
whose constraints you want to
modify
• Click on the Pin Menu
• Select constraints as needed
Enable Initial Layout Constraints Debug

32. Resolve Auto Layout
Issues Menu (iOS8)
• Select the view or object
whose constraints you want to
modify
• Click on the Pin Menu
• Select constraints as needed
Enable Initial Layout Constraints Debug

33. Resolve Auto Layout
Issues Menu (iOS8)
• Selected Views -OR- All Views
• Update Frames
• Update Constraints
• Add Missing Constraints
• Reset to Suggested Constraints
• Clear Constraints
Enable Initial Layout Constraints Debug

34. Select Constraints
• Select the object whose
constraints you want to edit
!
• Hover over the constraint
until a shadow is displayed
behind it!
!
• Click the constraint
Enable Initial Layout Constraints Debug

35. Edit Constraints
• Double click the constraint
!
!
• Select the view/object, then
select Size Inspector >>
Constraints
Enable Initial Layout Constraints Debug

36. Delete Constraints
• Select the constraint
• Hit delete
Enable Initial Layout Constraints Debug

37. Constraint Details / Edit
• Size Inspector
• Constraints View
• Can edit, delete directly from
here
Enable Initial Layout Constraints Debug

38. Debugging Constraints
Enable Initial Layout Constraints Debug

39. Debugging Constraints
Issue Navigator!
• Lists all Auto Layout issues in
addition to compilation, linking
issues
Enable Initial Layout Constraints Debug

40. Debugging Constraints
Document Outline!
• Hover your mouse over the
bold heading (for example,
“Content Priority Ambiguity”).
• An “i” icon in a circle should
appear (iOS8)
Enable Initial Layout Constraints Debug

41. Debugging Constraints
Document Outline!
• Clicking the “i” icon will
explain the problem.
• The second paragraph gives
suggestions for how to resolve
the issue that has been
encountered.
Enable Initial Layout Constraints Debug

42. Debugging Constraints
Auto Layout Issue Navigator!
• Top-right hand corner
• Lists all current Auto Layout
issues with the current scene
Enable Initial Layout Constraints Debug

43. Debugging Constraints
• Even if IB does not indicate any issues, it is still possible to
encounter these at run-time
• Detailed information with be output to the console using VFL
• Xcode will attempt to resolve issues by breaking constraint(s)
Enable Initial Layout Constraints Debug

44. Debugging Constraints
• BLUE = No problem
• All constraints are valid
Enable Initial Layout Constraints Debug

45. Debugging Constraints
• ORANGE = Problem
• Issues exist with constraints;
likely not enough information
to determine run-time location
• Dashed box indicates run-time
placement when different from
design time
Enable Initial Layout Constraints Debug

46. Debugging Constraints
• RED = Problem
• Unsatisfiable constraints, likely
too many constraints exist that
are in contention with each
other
Enable Initial Layout Constraints Debug

47. demo

48. iOS8 Size Classes
• New for iOS8 / Xcode 6!
• Compare to TPMultiLayoutViewController (Michael
Tyson, “layout templating” for portrait/landscape)
• https://github.com/michaeltyson/TPMultiLayoutViewController
• Allows for multiple layouts for varying
configurations

49. iOS8 Size Classes

50. iOS8 Size Classes
• iOS7 and Prior (Deprecated in iOS8)
• UIInterfaceOrientation and UIUserInterfaceIdiom
• iOS8 Recommended Approach:
• Size Classes: Compact + Regular
• Horizontal & Vertical

51. iOS8 Size Classes
Regular Compact
Regular
Compact
HORIZONTAL
V!
E!
R!
T!
I!
C!
A!
L

52. iOS8 Size Classes

53. iOS8 Size Classes

54. iOS8 Size Classes
Traits / Trait Collection:
• Horizontal Size Class
• Vertical Size Class
• User Interface Idiom
• Display Scale
Compact
or
Regular

55. Turn On Size Classes
• File Inspector
• “Use Size Classes” checkbox

56. Applying Size Classes
• Choose desired size class
• Modify constraints as you
would normally

57. Applying Size Classes
• What if I don’t want a view in
this size class?
• Uninstall it using the
“Installed” checkbox

58. iOS8 Trait Collections
• willTransitionToTraitCollection:withTransitionCoordin
ator notifies of rotation events. Use this to get ready
for the change that is about to occur.
• traitCollectionDidChange: for Views and View
Controllers to show visual changes

59. iOS8 Trait Collections
• What objects have a trait collection?
• UIScreen, UIWindow, UIViewController, UIView
• What can you do with trait collections?
• Compare - Does one contain another?
• Add together

60. iOS8 UIImageAsset
• iOS7 and Prior: 1x, 2x images
• iOS8 >> Image Assets that correspond to Trait
Collections
• Chooses the appropriate image for the current Trait
Collection + updates intrinsic content size

61. Xcode 6 Resizable Simulator

62. Localization Tips
• Double all localized strings
• NSDoubleLocalizedStrings YES
• Simulate Right-to-Left
• AppleTextDirection YES
• NSForceRightToLeftWritingDirection YES
• Draw view alignment rects
• UIViewShowAlignmentRects YES

63. Xcode IB Tip #1
• Duplicate an object using:
Option + Drag

64. Xcode IB Tip #2
• Too many views/objects
stacked on top of each other
that it’s hard to select the one
you need?
• You can show all views/
objects under the mouse
cursor using:
Shift + Right Click

65. Further Topics
• Connect outlets to constraints to modify them in
code
• Animating layout changes using Auto Layout:
• Adjust your constraints
• Within an animation block call:
[view layoutIfNeeded];
• Trait Environments, Trait Collections

66. References
• WWDC 2012
• 202 Introduction to Auto Layout for iOS and OS X
• 228 Best Practices for Mastering Auto Layout
• 232 Auto Layout by Example
• WWDC 2013
• 405 Interface Builder Core Concepts
• 406 Taking Control of Auto Layout in Xcode 5
• 213 Best Practices for Cocoa Animation
• WWDC 2014
• 216 Building Adaptive Apps with UIKit
• 411 What’s new in Interface Builder

67. Questions?
?

68. Thank you!
derek lee
dereklee@downtothis.com
@derekleerock
http://drums.dereklee.name