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
   

   View Slide

2. Outline
   History
   Frames
   Spring&Struts
   Auto layout
   

   View Slide

3. Who am I?
   

   View Slide

4. UX designer and developer
   

   View Slide

5. Who are you?
   

   View Slide

6. Giveaway
   

   View Slide

7. View Slide

8. Lyrics
   

   View Slide

9. “Ring! Ring! It's 7:00 A.M.!
   Move y'self to go again”
   

   View Slide

10. “Ring! Ring! It's 7:00 A.M.!
    Move y'self to go again”
    The Magnificent Seven - The Clash
    

    View Slide

11. A bit of history
    

    View Slide

12. 480x800
    1280x720
    960x640
    960x540
    854x480
    640x480 2560x1600
    

    View Slide

13. 320x480
    480x800
    1280x720
    1280x800
    824x1200
    768x1024
    960x640
    960x540
    854x480
    640x480 2560x1600
    1136x768
    

    View Slide

14. 320x480
    480x800
    640x360
    1280x720
    1280x800
    824x1200
    768x1024
    960x640
    960x540
    1280x768
    854x480
    640x480 2560x1600
    1136x768
    

    View Slide

15. 240x320
    320x480
    480x800
    640x360
    1280x720
    1280x800
    1080x1920
    824x1200
    768x1024
    600x800
    960x640
    960x540
    1280x768
    854x480
    640x480 2560x1600
    1136x768
    

    View Slide

16. A bit of history
    

    View Slide

17. A bit of history
    

    View Slide

18. A bit of history
    

    View Slide

19. A bit of history
    

    View Slide

20. View Slide

21. View Slide

22. What is layout?
    

    View Slide

23. It’s a process
    

    View Slide

24. It’s a process
    Position
    Size
    

    View Slide

25. Web people have CSS
    

    View Slide

26. Web people have CSS
    div
    div div
    

    View Slide

27. http://mediaqueri.es
    

    View Slide

28. http://joshemerson.co.uk/rsd/
    

    View Slide

29. In the beginning ...
    

    View Slide

30. Frames
    UIView *newView = [[UIView alloc] initWithFrame:
    CGRectMake(10, 10, 100, 100)];
    [self.view addSubview:newView];
    

    View Slide

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;
    

    View Slide

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;
    

    View Slide

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;
    

    View Slide

34. Spring & Struts
    

    View Slide

35. Spring & Struts
    Autosizing mask
    

    View Slide

36. Spring & Struts
    Autosizing mask
    How do I change when superview
    changes?
    

    View Slide

37. Let’s see
    

    View Slide

38. Auto Layout
    

    View Slide

39. Migrate to Auto Layout
    

    View Slide

40. View Slide

41. Mental shift
    

    View Slide

42. Impacts your life
    

    View Slide

43. Wife: “Honey are you still working
    with that auto layout thing?”
    

    View Slide

44. Wife: “Honey are you still working
    with that auto layout thing?”
    Me: “Yeah, how do you know?”
    

    View Slide

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”.
    

    View Slide

46. You DON’T setFrame:
    anymore
    

    View Slide

47. You DON’T setFrame:
    anymore
    You DECLARE a layout
    

    View Slide

48. You express relations
    between elements
    

    View Slide

49. constraint3
    constraint4
    constraint1
    constraint2
    

    View Slide

50. constraint3
    constraint4
    constraint1
    constraint2
    

    View Slide

51. constraint3
    constraint4
    constraint1
    constraint2
    

    View Slide

52. ?
    

    View Slide

53. Linear equations
    

    View Slide

54. ax + by = c
    Linear equations
    

    View Slide

55. ax + by = c
    Linear equations
    

    View Slide

56. ax + by = c
    2x + 2y = 4
    Linear equations
    

    View Slide

57. ax + by = c
    2x + 2y = 4 => [x = 1, y = 1]
    Linear equations
    

    View Slide

58. ax + by = c
    2x + 2y = 4 => [x = 1, y = 1]
    2(x+5)-7 = 3(x-2)
    Linear equations
    

    View Slide

59. ax + by = c
    2x + 2y = 4 => [x = 1, y = 1]
    2(x+5)-7 = 3(x-2) => [x = 9]
    Linear equations
    

    View Slide

60. 0x + 1 = 2
    

    View Slide

61. Linear equations
    One solution
    No solution
    Infinite solutions
    

    View Slide

62. One solution
    

    View Slide

63. One solution
    “Hey lady, you got
    the love I need ...”
    

    View Slide

64. One solution
    “Hey lady, you got
    the love I need ...”
    Over the Hills and Far Away - Led Zeppelin
    

    View Slide

65. No solution
    

    View Slide

66. “Pleased to meet you
    hope you guess my name ...”
    No solution
    

    View Slide

67. “Pleased to meet you
    hope you guess my name ...”
    No solution
    Sympathy For The Devil - The Rolling Stones
    

    View Slide

68. Infinite solutions
    

    View Slide

69. “It's gettin' dark,
    too dark to see ...”
    Infinite solutions
    

    View Slide

70. “It's gettin' dark,
    too dark to see ...”
    Infinite solutions
    Knockin' on Heaven's Door - Bob Dylan
    

    View Slide

71. Geometry helps
    

    View Slide

72. Geometry helps
    One solution
    x -2y = -1
    4x +
    3y =
    7
    

    View Slide

73. Geometry helps
    No solution
    3x +
    2y =
    12
    3x +
    2y =
    6
    

    View Slide

74. Geometry helps
    Infinite solutions
    y =
    10x +
    4
    -30x - 12
    =
    -3y
    

    View Slide

75. Linear programming
    

    View Slide

76. Linear programming
    Solves equations with variables
    Looks for an objective function
    

    View Slide

77. Auto Layout is a big
    objective function
    

    View Slide

78. Auto Layout is a big
    objective function
    

    View Slide

79. Likes one solution scenarios
    Multiple solutions => ambiguous layout
    No solution => conflicting constraints
    

    View Slide

80. No order in grinding ...
    

    View Slide

81. No order in grinding ...
    view1.top = view2.bottom + 10
    

    View Slide

82. No order in grinding ...
    view1.top = view2.bottom + 10
    Priorities
    

    View Slide

83. “Left margin is always 20”
    “Top margin is always 20”
    

    View Slide

84. Let’s see
    

    View Slide

85. “Left edge of X is 20”
    “Top edge of X is 20”
    “Width is 100”
    “Height is 100”
    

    View Slide

86. Enough IB
    

    View Slide

87. NSLayoutConstraint
    

    View Slide

88. [NSLayoutConstraint constraintWithItem:newElement
    

    View Slide

89. [NSLayoutConstraint constraintWithItem:newElement
    attribute:NSLayoutAttributeLeft
    

    View Slide

90. [NSLayoutConstraint constraintWithItem:newElement
    attribute:NSLayoutAttributeLeft
    relatedBy:NSLayoutRelationEqual
    

    View Slide

91. [NSLayoutConstraint constraintWithItem:newElement
    attribute:NSLayoutAttributeLeft
    relatedBy:NSLayoutRelationEqual
    toItem:[newElement superview]
    

    View Slide

92. [NSLayoutConstraint constraintWithItem:newElement
    attribute:NSLayoutAttributeLeft
    relatedBy:NSLayoutRelationEqual
    toItem:[newElement superview]
    attribute:NSLayoutAttributeLeft
    

    View Slide

93. [NSLayoutConstraint constraintWithItem:newElement
    attribute:NSLayoutAttributeLeft
    relatedBy:NSLayoutRelationEqual
    toItem:[newElement superview]
    attribute:NSLayoutAttributeLeft
    multiplier:1.0
    

    View Slide

94. [NSLayoutConstraint constraintWithItem:newElement
    attribute:NSLayoutAttributeLeft
    relatedBy:NSLayoutRelationEqual
    toItem:[newElement superview]
    attribute:NSLayoutAttributeLeft
    multiplier:1.0
    constant:0.0];
    

    View Slide

95. More complex example
    

    View Slide

96. Zen
    

    View Slide

97. Zen
    NSArray *constraints =
    [NSLayoutConstraint
    constraintsWithVisualFormat:@"H:|[newEl]|"
    options:0
    metrics:nil
    views:NSDictionaryOfVariableBindings(newEl)];
    

    View Slide

98. Zen
    @"V:|[newElement]-100-|"
    

    View Slide

99. Zen
    @"V:[btn1]-[btn2]"
    

    View Slide

100. Zen
     @"V:[btn1]-100-[btn2]"
     

     View Slide

101. Zen
     @"[btn(>=100)]"
     

     View Slide

102. Zen
     @"[btn(>=100@500)]"
     

     View Slide

103. Zen
     @"[btn1(>=80, <=120)]"
     

     View Slide

104. Animation
     

     View Slide

105. Alternatives
     

     View Slide

106. Alternatives
     https://github.com/RolandasRazma/RRAutoLayout
     if(!NSClassFromString(@"NSLayoutConstraint"))
     {
     objc_registerClassPair(
     objc_allocateClassPair(
     [RRLayoutConstraint class],
     "NSLayoutConstraint", 0));
     }
     

     View Slide

107. DON’T
     think in
     terms of
     frames
     

     View Slide

108. Should I use Auto Layout?
     

     View Slide

109. “The answer my friend is ...”
     

     View Slide

110. “The answer my friend is ...”
     Blowin' In The Wind - Bob Dylan
     

     View Slide

111. Summing up
     Did blocks substitute delegates?
     

     View Slide

112. Thank you!
     

     View Slide

113. Coordinates
     twitter.com/_funkyboy
     app.net/funkyboy
     cesare@studiomagnolia.com
     http://studiomagnolia.com
     

     View Slide