Auto Layout? Oh boy ..

After making fun of Android developers because they have to support a plethora of resolutions, the storm has gotten into the iOS community as well. First there was the retina, which brought designers and developers to account for a new resolution, exactly the double of the previous one, and was not a huge deal. With the announcement of the iPhone5 a new form factor was introduced along with a new software tool to deal with fluid user interfaces: autolayout. Developers familiar with the good old “Springs & Struts” approach have had a great deal of issues in getting acquainted with autolayout.
In this presentation I will show how to progressively move away from autosizing masks and get familiar with Autolayout constraint-based mechanism. First I’ll show how to use it in Interface Builders and how to deal with conflicting constraints. Then I’ll move on to code, to show how to achieve the intended results using the new API introduced in iOS6. Finally I’ll give some example that uses ASCII-Art format string to declare constraints.
The goal of the talk is to highlight the conceptual and technical differences between Spring & Struts and Autolayout, to make easier the potentially complex process of porting an application from the first to the second.

Transcript

1. Auto Layout? Oh boy! Rocchi Cesare _funkyboy funkyboy
2. Outline History Frames Spring&Struts Auto layout
3. Who am I?
4. UX designer and developer
5. Who are you?
6. Giveaway
8. Lyrics
9. “Ring! Ring! It's 7:00 A.M.! Move y'self to go again”
10. “Ring! Ring! It's 7:00 A.M.! Move y'self to go again” The Magnificent Seven - The Clash
11. A bit of history
12. 480x800 1280x720 960x640 960x540 854x480 640x480 2560x1600
13. 320x480 480x800 1280x720 1280x800 824x1200 768x1024 960x640 960x540 854x480 640x480 2560x1600 1136x768
14. 320x480 480x800 640x360 1280x720 1280x800 824x1200 768x1024 960x640 960x540 1280x768 854x480 640x480 2560x1600 1136x768
15. 240x320 320x480 480x800 640x360 1280x720 1280x800 1080x1920 824x1200 768x1024 600x800 960x640 960x540 1280x768 854x480 640x480 2560x1600 1136x768
16. A bit of history
17. A bit of history
18. A bit of history
19. A bit of history
22. What is layout?
23. It’s a process
24. It’s a process Position Size
25. Web people have CSS
26. Web people have CSS div div div
27. http://mediaqueri.es
28. http://joshemerson.co.uk/rsd/
29. In the beginning ...
30. Frames UIView *newView = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 100, 100)]; [self.view addSubview:newView];
31. Frames UIView *newView = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 100, 100)]; [self.view addSubview:newView]; CGRect frame = newView.frame; frame.size.height = 200; frame.size.width = 200; frame.origin.x = 20; frame.origin.y = 20; newView.frame = frame;
32. Frames UIView *newView = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 100, 100)]; [self.view addSubview:newView]; CGRect frame = newView.frame; frame.size.height = 200; frame.size.width = 200; frame.origin.x = 20; frame.origin.y = 20; newView.frame = frame; newView.center = newView.superview.center;
33. Frames #define PADDING 20 CGRect supFrame = newView.superview.frame; CGRect frame = newView.frame; frame.size.height = supFrame.size.height - PADDING; frame.size.width = supFrame.size.width - PADDING; frame.origin.x = PADDING; frame.origin.y = PADDING; newView.frame = frame;
34. Spring & Struts
35. Spring & Struts Autosizing mask
36. Spring & Struts Autosizing mask How do I change when superview changes?
37. Let’s see
38. Auto Layout
39. Migrate to Auto Layout
41. Mental shift
42. Impacts your life
43. Wife: “Honey are you still working with that auto layout thing?”
44. Wife: “Honey are you still working with that auto layout thing?” Me: “Yeah, how do you know?”
45. Wife: “Honey are you still working with that auto layout thing?” Me: “Yeah, how do you know?” Wife: “Because I am hearing more ‘f*ck’ and ‘sh!t’ than usual”.
46. You DON’T setFrame: anymore
47. You DON’T setFrame: anymore You DECLARE a layout
48. You express relations between elements
49. constraint3 constraint4 constraint1 constraint2
50. constraint3 constraint4 constraint1 constraint2
51. constraint3 constraint4 constraint1 constraint2
52. ?
53. Linear equations
54. ax + by = c Linear equations
55. ax + by = c Linear equations
56. ax + by = c 2x + 2y = 4 Linear equations
57. ax + by = c 2x + 2y = 4 => [x = 1, y = 1] Linear equations
58. ax + by = c 2x + 2y = 4 => [x = 1, y = 1] 2(x+5)-7 = 3(x-2) Linear equations
59. ax + by = c 2x + 2y = 4 => [x = 1, y = 1] 2(x+5)-7 = 3(x-2) => [x = 9] Linear equations
60. 0x + 1 = 2
61. Linear equations One solution No solution Infinite solutions
62. One solution
63. One solution “Hey lady, you got the love I need ...”
64. One solution “Hey lady, you got the love I need ...” Over the Hills and Far Away - Led Zeppelin
65. No solution
66. “Pleased to meet you hope you guess my name ...” No solution
67. “Pleased to meet you hope you guess my name ...” No solution Sympathy For The Devil - The Rolling Stones
68. Infinite solutions
69. “It's gettin' dark, too dark to see ...” Infinite solutions
70. “It's gettin' dark, too dark to see ...” Infinite solutions Knockin' on Heaven's Door - Bob Dylan
71. Geometry helps
72. Geometry helps One solution x -2y = -1 4x + 3y = 7
73. Geometry helps No solution 3x + 2y = 12 3x + 2y = 6
74. Geometry helps Infinite solutions y = 10x + 4 -30x - 12 = -3y
75. Linear programming
76. Linear programming Solves equations with variables Looks for an objective function
77. Auto Layout is a big objective function
78. Auto Layout is a big objective function
79. Likes one solution scenarios Multiple solutions => ambiguous layout No solution => conflicting constraints
80. No order in grinding ...
81. No order in grinding ... view1.top = view2.bottom + 10
82. No order in grinding ... view1.top = view2.bottom + 10 Priorities
83. “Left margin is always 20” “Top margin is always 20”
84. Let’s see
85. “Left edge of X is 20” “Top edge of X is 20” “Width is 100” “Height is 100”
86. Enough IB
87. NSLayoutConstraint
88. [NSLayoutConstraint constraintWithItem:newElement
89. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft
90. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual
91. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview]
92. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft
93. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft multiplier:1.0
94. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0];
95. More complex example
96. Zen
97. Zen NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[newEl]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(newEl)];
98. Zen @"V:|[newElement]-100-|"
99. Zen @"V:[btn1]-[btn2]"
100. Zen @"V:[btn1]-100-[btn2]"
101. Zen @"[btn(>=100)]"
102. Zen @"[btn(>=100@500)]"
103. Zen @"[btn1(>=80, <=120)]"
104. Animation
105. Alternatives
106. Alternatives https://github.com/RolandasRazma/RRAutoLayout if(!NSClassFromString(@"NSLayoutConstraint")) { objc_registerClassPair( objc_allocateClassPair( [RRLayoutConstraint class], "NSLayoutConstraint", 0)); }
107. DON’T think in terms of frames
108. Should I use Auto Layout?
109. “The answer my friend is ...”
110. “The answer my friend is ...” Blowin' In The Wind - Bob Dylan
111. Summing up Did blocks substitute delegates?
112. Thank you!
113. Coordinates twitter.com/_funkyboy app.net/funkyboy cesare@studiomagnolia.com http://studiomagnolia.com