Accidentally in Code

Tag: pilky

  • #iOSDevUK – Martin Pilkington: Thinking in NSLayoutContraints

    #iOSDevUK – Martin Pilkington: Thinking in NSLayoutContraints

    My notes from Pilky’s iOSDevUK talk. It was so good that after watching it I actually thought I understood AutoLayout (I later discovered I was wrong). His slides (and notes) are here.

    cat in a box
    Credit: Wikimedia

    What is AutoLayout?

    • Constraint based layout system.
    • Define relationships between views.
    • Into in Max OS X 1.07, iOS 6.
    • Makes previously complex layout problems simple (i18n much easier).
    • Requires a different way of thinking about layout.
    • Fits more closely to your natural mental model – bit like a compiler. You don’t write everything in assembly. You write in a programming language, compiler translates.

    Constraints: How do they work?

    • Represented by NSLayoutConstraint (only class added for AutoLayout).
    • Defines relationship between two attributes.
    • Attributes are effectively variables. Can’t access directly, treat them as constraints.
    • Treat a constraint as a small function modifying a variable.
    • y = mx + c
    • view1.attribute = multiplier * view2.attribute + constant

    Attributes

    Effectively variables, so what do we have:

    • width
    • height
    • centerX
    • centerY
    • baseline (for text)
    • Left leading. Right trailing, Top, Bottom.
    • Left and Right – left to right language, equivalent. In R to L language, left becomes trailing, right leading.
      • Want the entire information flow of your app to swap around.
      • Used to have to do this yourself, now get it for free.

    Relationships

    • Equal
    • Greater than or equal to
    • Less than or equal to
    • Becomes more important with different size devices. Want things to resize smartly.

    Multipler and Constant

    • Multiplier: ratio between two attributes.
    • Constant: difference between two attributes.

    Priority

    • How strongly should a constrained be satisfied.
    • Constraints required by default.
    • Constraints can be broken. Optional constraints.
    • Required constrains have priority of 1000.
    • Allows us to build a hierarchy of constraints.
    • If two conflict, lower one will be broken to satisfy higher one.

    YOUR NEW MENTAL MODEL

    How should you be thinking?

    Relative vs Absolute

    • Don’t think in frames, think in relationships.
    • Most constraints are relative to other attributes.
    • No need to do complex calculations based on other views.

    Thinking in Values

    • Can be hard to work out what attributes, constant etc. to use.
    • Don’t think of them as abstract values.
    • It’s an equation – substitute in numbers.

    Constraining a View

    • All views need at least 4 constraints.
    • Need to position and size in both horizontal and vertical axes.

    Intrinsic Content Size

    • Views know how to layout some content.
    • Therefore they know the smallest size to display that content.
    • Implicit constrains defining intrinsic width and height.
    • Stronger constrains is compression resistance (p. 750, prevents from clipping).
    • Helps a lot with localisation.
    • Never want to specify explicit height or width, especially one that is showing text.
    • Used to have to change things manually on i18n. Now with auto layout you don’t. Saves a lot of code.

    Calculating UITableViewCellHeights

    • Autolayout and UITableView.
    • Create table cells as any views, adding constraints to define height.
    • Use systemLayoutSizeFittingSize: to return height.
    • Get a cell from the table view:
      • Set a vertical constrain to have priority 999.
    • Or use template cell.
    • Set estimatedRowHeight to most common height.
    • Ensure rowHeight is UITableViewAutomaticDimension.
    • Set it to anything else, all the same problems as iOS6 and 7.

    Autoresizing UIImageVIew

    • Subclass UIImageView
    • Add following:
      • overrideIntrinsicContentSize:
      • overrideSetImage: (need to relayout).
    • If too big, will appear off the screen. Need to specify maximum size.
    • Cannot use external constraints, only those from the view hierarchy.
    • Reason for preferredMaxSize property.

    Switching Orientation

    • Turn constraints on and off (bit of a hack).
    • Make them optional. Set priority depending on orientation.
    • Set constrains priorities to 999 to enable.
    • Set to 1 to disable.
    • Many problems with this.
      • Theoretically, priority 1 constrains should never be satisfied.
      • But potentially it could be.
    • iOS8
      • New active property.
      • Set to yes, take into account.
      • Set to no, not taken into account.
      • activateConstraints: for bulk changes.
      • Use NIBs with size classes.

    Animation

    • Frame based animation.
    • AutoLayout based animation.
      • AutoLayout is simpler, if the views are already there.