Save 37% off PRO during our Black Friday Sale! »

Auto Layout? Oh boy ..

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.

C15e2702b01ec20967a508e8fcaace8c?s=128

Cesare Rocchi

March 15, 2013
Tweet

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

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

  20. None
  21. None
  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

  40. None
  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