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