How To Achieve Auto Layout Zen

A step-by-step guide to getting the best out of Cocoa Auto Layout with Interface Builder.

Demo Code: https://github.com/followben/autolayout-zen

First presented at CocoaHeads BNE on Tuesday 7th May, 2013.

Transcript

1. Hi
2. Ben HYDRIC MEDIA
3. “Creating non-trivial constraint systems [using Interface Builder] is incredibly fragile.” - Florian Kugler
4. “I hope to phase out IB as I transition to using auto layout.” - Michael Tsai
5. “Interface Builder is the new HAL 9000” - Justin Williams
7. How to achieve Auto Layout Zen
8. Step 1: Change your mindset
9. Step 2: Embrace Interface Builder
10. Step 3: Debug and understand
11. Step 1: Change your mindset
12. = The Future Auto Layout + Interface Builder Subscripting Dot Syntax Storyboards Embed Segues ARC Core Data Singletons
14. Imperative Declarative Frames Constraints
16. Step 2: Embrace Interface Builder
17. “Interface Builder will never let you create ambiguous layouts” (Almost never)
18. Poor old IB
19. Solution: tell IB what you want! “Help me help you!”
20. Ignore constraints initially
21. Then specify your layout Promote your constraints!
22. Promote your constraints!
23. Test! In Interface Builder On the Simulator On Device
24. Adjust constraints not frames!
25. Animate constraints not frames!
26. Step 3: Debug and understand
27. Avoid constraints in code where possible ... or not.
28. Frames
29. The Right Tool For the Right Job + (id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views
30. @interface UIView (Autolayout) +(id)autolayoutView; @end @implementation UIView (Autolayout) +(id)autolayoutView { UIView *view = [self new]; view.translatesAutoresizingMaskIntoConstraints = NO; return view; } @end
31. @interface UIView (Autolayout) +(id)autolayoutView; @end @implementation UIView (Autolayout) +(id)autolayoutView { UIView *view = [self new]; view.translatesAutoresizingMaskIntoConstraints = NO; return view; } @end
32. Instruments? _autolayoutTrace UIConstraintBasedLayoutDebugging
33. Demo
34. Auto Layout Zen Think Different Use Interface Builder Debug and understand
35. http://oleb.net/blog/2013/03/things-you-need-to-know-about-cocoa-autolayout http://www.adevelopingstory.com/blog/2013/01/working-with-autolayout.html http://commandshift.co.uk/blog/2013/01/13/autolayout Demo https://github.com/followben/autolayout-zen Other Resources WWDC 2012: Introduction to Auto Layout for iOS and OS X WWDC 2012: Auto Layout by Example WWDC 2012: Best Practices for Mastering Auto Layout
36. Thanks!
37. github.com/followben @followben L