Auto Layout? Oh boy!

Cocoaconf Dallas 2013

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. 1L 20cl 20cl 20cl
54. Linear equations
55. ax + by = c Linear equations
56. ax + by = c Linear equations
57. ax + by = c 2x + 2y = 4 Linear equations
58. ax + by = c 2x + 2y = 4 => [x = 1, y = 1] Linear equations
59. ax + by = c 2x + 2y = 4 => [x = 1, y = 1] 2(x+5)-7 = 3(x-2) Linear equations
60. ax + by = c 2x + 2y = 4 => [x = 1, y = 1] 2(x+5)-7 = 3(x-2) => [x = 9] Linear equations
61. 0x + 1 = 2
62. Linear equations One solution No solution Infinite solutions
63. One solution
64. One solution “Hey lady, you got the love I need ...”
65. One solution “Hey lady, you got the love I need ...” Over the Hills and Far Away - Led Zeppelin
66. No solution
67. “Pleased to meet you hope you guess my name ...” No solution
68. “Pleased to meet you hope you guess my name ...” No solution Sympathy For The Devil - The Rolling Stones
69. Infinite solutions
70. “It's gettin' dark, too dark to see ...” Infinite solutions
71. “It's gettin' dark, too dark to see ...” Infinite solutions Knockin' on Heaven's Door - Bob Dylan
72. Geometry helps
73. Geometry helps One solution x -2y = -1 4x + 3y = 7
74. Geometry helps No solution 3x + 2y = 12 3x + 2y = 6
75. Geometry helps Infinite solutions y = 10x + 4 -30x - 12 = -3y
76. Linear programming
77. Linear programming Solves equations with variables Looks for an objective function
78. Auto Layout is a big objective function
79. Auto Layout is a big objective function
80. Likes one solution scenarios Multiple solutions => ambiguous layout No solution => conflicting constraints
81. No order in grinding ...
82. No order in grinding ... view1.top = view2.bottom + 10
83. No order in grinding ... view1.top = view2.bottom + 10 Priorities
84. “Left margin is always 20” “Top margin is always 20”
85. Let’s see
86. “Left edge is 20” “Top edge is 20” “Width is 100” “Height is 100”
87. Enough IB
88. NSLayoutConstraint
89. [NSLayoutConstraint constraintWithItem:newElement
90. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft
91. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual
92. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview]
93. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft
94. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft multiplier:1.0
95. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0];
96. More complex example
97. Zen
98. Zen NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[newEl]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(newEl)];
99. Zen @"V:|[newElement]-100-|"
100. Zen @"V:[btn1]-[btn2]"
101. Zen @"V:[btn1]-100-[btn2]"
102. Zen @"[btn(>=100)]"
103. Zen @"[btn(>=100@500)]"
104. Zen @"[btn1(>=80, <=120)]"
105. Animation
106. Alternative
107. Alternative https://github.com/RolandasRazma/RRAutoLayout if(!NSClassFromString(@"NSLayoutConstraint")) { objc_registerClassPair( objc_allocateClassPair( [RRLayoutConstraint class], "NSLayoutConstraint", 0)); }
108. DON’T think in terms of frames
109. Should I use Auto Layout?
110. “The answer my friend is ...”
111. “The answer my friend is ...” Blowin' In The Wind - Bob Dylan
112. Summing up Did blocks substitute delegates?
113. Thank you!
114. Coordinates twitter.com/_funkyboy app.net/funkyboy cesare@studiomagnolia.com http://studiomagnolia.com