Categories
Presentation Programming

#iOSDevUK – Martin Pilkington: Thinking in NSLayoutContraints

cat in a box
Credit: Wikimedia

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.

2 replies on “#iOSDevUK – Martin Pilkington: Thinking in NSLayoutContraints”

Comments are closed.