Auto Layout

This is a fast auto layout crash course that I did at Hop.In, just to get them up to speed.

Note: This presentation was meant to be presented on Startech Conf 2013 in Chile, but I was out of the country so it never saw the light of day.

Transcript

1. AUTO LAYOUT CRASH COURSE Gole - Ho .In
2. AUTO LAYOYUT? what’
3. GREAT STUFF AUTO LAYOUT CONSTRAINT-BASED DESCRIPTIVE LAYOUT SYSTEM
4. wtf?
5. IN THE PAST... THERE WAS HARD-CODED LAYOUT
6. button.frame = CGRectMake(10,10,15,15);
7. the problem: we’re screwed on device rotation so we have to ‘manually’ adjust.
8. BUTTON PORTRAIT LANDSCAPE
9. wtf?
10. AUTO LAYOUT t the rescue!
11. GREAT STUFF DESCRIPTIVE button1 centered vertically in it’s superview button1 is at a fixed distance from the top of my button2
12. GREAT STUFF CONSTRAINTS button1.center.y = superview. button1 is at a fixed distance of my button2 button.center.y = superview.center.y button1.bottom = button2.top - distance
13. AUTO LAYOUT SPECIFY CONSTRAINTS AND iOS CALCULATES FRAMES AUTOMATICALLY
14. WITH AUTO LAYOYUT hand on
15. GREAT STUFF INTERFACE BUILDER can handle about 90% of what you can do with auto layout. overhauled in Xcode 5, less intrusive, more control.
16. dem ...
17. EXTRA 10%... the
18. TWO WAYS .............................................. TO UNLOCK
19. GREAT STUFF VISUAL LANGUAGE FORMAT specify your layout using ascii art
20. +1 (›°□°ʣ›ớ ᵲᴸᵲɹᵪᴸᵪ ascii...
21. GREAT STUFF CODE SAMPLE [mybutton] [mybutton][mybutton2] [mybutton]-[mybutton]
22. SAMPLE BUTTON2 BUTTON VERTICAL CONSTRAINT
23. how do I code it? awesome
24. EXAMPLE V:[button]-[button2]-| BUTTON2 BUTTON
25. V:[button]-[button2]-| DEFAULT SUPERVIEW VERTICAL
26. EXAMPLE VIEW V:|-[button]-| H:|-[button]-|
27. one more thing...
28. CENTER A VIEW THAT’S HALF THE WIDTH & HEIGHT OF ANOTHER VIEW? HOW TO
29. +1 [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view2 attribute: NSLayoutAttributeHeight multiplier:0.5 constant:0]; answe :
30. conclusion ...
31. THANKS @ngoles - Hop.In