Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Cesare Rocchi

March 15, 2013
Tweet

More Decks by Cesare Rocchi

Other Decks in Programming

Transcript

  1. Auto Layout?
    Oh boy!
    Rocchi Cesare
    _funkyboy
    funkyboy

    View full-size slide

  2. Outline
    History
    Frames
    Spring&Struts
    Auto layout

    View full-size slide

  3. UX designer and developer

    View full-size slide

  4. Who are you?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. A bit of history

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. A bit of history

    View full-size slide

  13. A bit of history

    View full-size slide

  14. A bit of history

    View full-size slide

  15. A bit of history

    View full-size slide

  16. What is layout?

    View full-size slide

  17. It’s a process

    View full-size slide

  18. It’s a process
    Position
    Size

    View full-size slide

  19. Web people have CSS

    View full-size slide

  20. Web people have CSS
    div
    div div

    View full-size slide

  21. http://mediaqueri.es

    View full-size slide

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

    View full-size slide

  23. In the beginning ...

    View full-size slide

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

    View full-size slide

  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;

    View full-size slide

  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;

    View full-size slide

  27. 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 full-size slide

  28. Spring & Struts

    View full-size slide

  29. Spring & Struts
    Autosizing mask

    View full-size slide

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

    View full-size slide

  31. Migrate to Auto Layout

    View full-size slide

  32. Mental shift

    View full-size slide

  33. Impacts your life

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

  37. You DON’T setFrame:
    anymore

    View full-size slide

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

    View full-size slide

  39. You express relations
    between elements

    View full-size slide

  40. constraint3
    constraint4
    constraint1
    constraint2

    View full-size slide

  41. constraint3
    constraint4
    constraint1
    constraint2

    View full-size slide

  42. constraint3
    constraint4
    constraint1
    constraint2

    View full-size slide

  43. Linear equations

    View full-size slide

  44. ax + by = c
    Linear equations

    View full-size slide

  45. ax + by = c
    Linear equations

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. Linear equations
    One solution
    No solution
    Infinite solutions

    View full-size slide

  51. One solution

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. Infinite solutions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. Geometry helps

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. Linear programming

    View full-size slide

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

    View full-size slide

  65. Auto Layout is a big
    objective function

    View full-size slide

  66. Auto Layout is a big
    objective function

    View full-size slide

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

    View full-size slide

  68. No order in grinding ...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. NSLayoutConstraint

    View full-size slide

  74. [NSLayoutConstraint constraintWithItem:newElement

    View full-size slide

  75. [NSLayoutConstraint constraintWithItem:newElement
    attribute:NSLayoutAttributeLeft

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  81. More complex example

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  89. Alternatives

    View full-size slide

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

    View full-size slide

  91. DON’T
    think in
    terms of
    frames

    View full-size slide

  92. Should I use Auto Layout?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  95. Summing up
    Did blocks substitute delegates?

    View full-size slide

  96. Coordinates
    twitter.com/_funkyboy
    app.net/funkyboy
    [email protected]
    http://studiomagnolia.com

    View full-size slide