Auto Layout? Oh boy!

Slides of my presentation "Auto Layout? Oh boy!" at UIKonf

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. A bit of history
13. A bit of history
14. A bit of history
15. A bit of history
18. What is layout?
19. What is layout? Position Size
20. Web people have CSS
21. http://mediaqueri.es
22. http://joshemerson.co.uk/rsd/
23. In the beginning ...
24. Frames UIView *newView = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 100, 100)]; [self.view addSubview:newView];
25. 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;
26. 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;
27. Spring & Struts
28. Spring & Struts Autosizing mask
29. Spring & Struts Autosizing mask How do I change when superview changes?
30. Spring & Struts
31. Spring & Struts
32. Spring & Struts self.view.autoresizingMask =
33. Spring & Struts UIViewAutoresizingFlexibleWidth UIViewAutoresizingFlexibleHeight UIViewAutoresizingFlexibleLeftMargin UIViewAutoresizingFlexibleRightMargin UIViewAutoresizingFlexibleTopMargin UIViewAutoresizingFlexibleBottomMargin self.view.autoresizingMask =
34. Auto Layout
35. Mental shift
36. Impacts your life
37. Wife: “Honey are you still working with that auto layout thing?”
38. Wife: “Honey are you still working with that auto layout thing?” Me: “Yeah, how do you know?”
39. 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”.
40. You DON’T setFrame: anymore
41. You DON’T setFrame: anymore You DECLARE a layout
42. You express relations between elements
43. constraint3 constraint4 constraint1 constraint2
44. constraint3 constraint4 constraint1 constraint2
45. constraint3 constraint4 constraint1 constraint2
46. ?
47. Linear equations
48. ax + by = c Linear equations
49. ax + by = c Linear equations
50. ax + by = c 2x + 2y = 4 Linear equations
51. ax + by = c 2x + 2y = 4 => [x = 1, y = 1] Linear equations
52. ax + by = c 2x + 2y = 4 => [x = 1, y = 1] 2(x+5)-7 = 3(x-2) Linear equations
53. ax + by = c 2x + 2y = 4 => [x = 1, y = 1] 2(x+5)-7 = 3(x-2) => [x = 9] Linear equations
54. 0x + 1 = 2
55. Linear equations One solution No solution Infinite solutions
56. One solution
57. One solution “Hey lady, you got the love I need ...”
58. One solution “Hey lady, you got the love I need ...” Over the Hills and Far Away - Led Zeppelin
59. No solution
60. “Pleased to meet you hope you guess my name ...” No solution
61. “Pleased to meet you hope you guess my name ...” No solution Sympathy For The Devil - The Rolling Stones
62. Infinite solutions
63. “It's gettin' dark, too dark to see ...” Infinite solutions
64. “It's gettin' dark, too dark to see ...” Infinite solutions Knockin' on Heaven's Door - Bob Dylan
65. Geometry helps
66. Geometry helps One solution x -2y = -1 4x + 3y = 7
67. Geometry helps No solution 3x + 2y = 12 3x + 2y = 6
68. Geometry helps Infinite solutions y = 10x + 4 -30x - 12 = -3y
69. Likes one solution scenarios Multiple solutions => ambiguous layout No solution => conflicting constraints
70. No order in grinding ...
71. No order in grinding ... Priorities
72. “Left margin is always 20” “Top margin is always 20”
73. Let’s see
74. “Left edge is 20” “Top edge is 20” “Width is 100” “Height is 100”
75. Enough IB
76. NSLayoutConstraint
77. [NSLayoutConstraint constraintWithItem:newElement
78. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft
79. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual
80. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview]
81. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft
82. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft multiplier:1.0
83. [NSLayoutConstraint constraintWithItem:newElement attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:[newElement superview] attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0];
84. More complex example
85. Zen
86. Zen NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[newEl]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(newEl)];
87. Zen @"V:|[newElement]-100-|"
88. Zen @"V:[btn1]-[btn2]"
89. Zen @"V:[btn1]-100-[btn2]"
90. Zen @"[btn(>=100)]"
91. Zen @"[btn(>=100@500)]"
92. Zen @"[btn1(>=80, <=120)]"
93. Animation
94. Alternative
95. Alternative https://github.com/RolandasRazma/RRAutoLayout if(!NSClassFromString(@"NSLayoutConstraint")) { objc_registerClassPair( objc_allocateClassPair( [RRLayoutConstraint class], "NSLayoutConstraint", 0)); }
96. DON’T think in terms of frames
97. Should I use Auto Layout?
98. “The answer my friend is ...”
99. “The answer my friend is ...” Blowin' In The Wind - Bob Dylan
100. Summing up Did blocks substitute delegates?
101. Thank you!
102. Coordinates twitter.com/_funkyboy app.net/funkyboy cesare@studiomagnolia.com http://studiomagnolia.com