Autolayout
Alexis Santos
What is Autolayout?
Autolayout is a constraint-based descriptive
layout system. (Apple’s Definition)
Control’s frame origin is (139, 270)
What is Autolayout?
- Control is centered vertically in its
superview
- Control is a fixed distance from
the right of the superview
Using Hard-Coded Frames:
Control’s frame origin is still (139, 270)
How it works?
- Describe the layout with constraints and frames are
calculated automatically.
button.left = (container.left + 20)
which in turns is an expression of the form:
y = m * x + b
y and x are attributes of the view
m and b are floating point values
Intermediate States
- Ambiguous frames: Not enough
information.
- Conflicting constraints: Too much
information.
- Misplaced views: Mismatched position or
size.
Intrinsic content size
- It is the size a view prefers to have for a specific content
it displays.
- For elements such as text labels, you should typically
set the element to be it’s intrinsic content size.
(IB: Editor > Size to fit content)
- This means that the element will grow and shrink
appropriately with different content for different
languages.
Intrinsic content size
- A view class can override intrinsicContentSize to
return a suitable size value.
- Call invalidateIntrinsicContentSize whenever
something changes and affect intrinsic
content size.
Compression resistant and Content
hugging
- Each view has priorities assigned for both
dimensions.
- Only takes effect if define an intrinsic content
size.
Frames VS Alignment Rects
- Autolayout don’t works with frames, it use
view’s alignment rect.
- Using alignment rects we can easily define
the rectangle which should be used for
layout the view.
- Override alignmentRectInsets method.
Layout process
- 2 additional steps in the process before a
view can be displayed than working with
AutoResizingMasks.
● Updating constraints
● Laying out views
- Each one is dependant on each other.
- This steps aren’t a one-way street. It’s an
iterative process…
Layout process
- Updating constraints prepares the info
needed for the layout to pass to actually set
the view’s frame.
- Is bottom-up (from subviews to superview).
- Triggered by setNeedsUpdateConstraints
- Changes in constraints will automatically call
this.
- A custom view can override updateConstraints
to add local constraints.
Layout process
- Layout applies the solution of the
constraints system to the views by setting
their center and bounds.
- Is top-down (from superview to subviews).
- Triggered by setNeedsLayout.
- To force the update of a layout use
layoutIfNeeded.
- A custom view can override layoutSubviews to
gain control over the layout pass.
Layout process
- Display pass renders the view to screen.
- Is top-down (from superview to subviews).
- Triggered by setNeedsDisplay.
- To force the update of a layout use
layoutIfNeeded.
- A custom view can override drawRect: to gain
control over display process in custom
views.
Constraint code
- Use NSLayoutConstraint class
- Can link NSLayoutConstraint from Storyboards
and Xib files.
- Always use setTranslatesAutoResizingMask = NO;
- Helpful macro: NSDictionaryFromVariableBindings()
Constraint code
- Use NSLayoutConstraint class
- Can link NSLayoutConstraint from Storyboards
and Xib files.
- Always use setTranslatesAutoResizingMask = NO;
- Helpful macro: NSDictionaryFromVariableBindings()
Enough Theory… Let’s
do some code.
Intrinsic content size of multi-line
UILabel (Ambiguity Problem)
- The size of the text depends on the width of
the lines, which is yet to be determined when
solving the constraints.
- Use the new preferredMaxLayoutWidth property.
Center multiple views within a
superview
- There is simple and easy trick: embed the
subviews inside a container view, and center
the container view within the superview.
- There are other approaches but I like this
one.
Add multiple views inside a
scrollview and load view from xib
- UIScrollView automatically updates its content
size using the constraints of the views it
contains (add a container view again).
- To load a custom view from a Xib file, don’t
forget that ‘remove from superview’ removes
constraints between the view and its
superview too.
UITableView cells with multiple
heights
- iOS 6 and iOS7 approach:- Need to load ‘prototype cells’ and updates
constraints manually.
- Need to calculate the height by using
systemLayoutSizeFittingSize:
- More work in general… but possible.
- iOS 8 approach: Easy, by using: tableView.rowHeight = UITableViewAutomaticDimension;
Constraints Pack
https://github.com/erica/Auto-Layout-Demystified/
A really intesting examples of Autolayout
including the ‘Constraints Pack’.
● Constraints Pack containts a lot of
helpers and macros to write Autolayout
code in a really faster way.
Interesting Articles and References
- WWDC 2012 Autolayout session videos:● https://developer.apple.com/videos/wwdc/2012/?id=202
● https://developer.apple.com/videos/wwdc/2012/?id=228
- Dynamic tableview cells height with
Autolayout:● http://stackoverflow.com/questions/18746929/using-auto-layout-
in-uitableview-for-dynamic-cell-layouts-variable-row-heights
Main Reference for this slides:- Objc.io advanced autolayout toolbox (by Florian Kugler):
● http://www.objc.io/issue-3/advanced-auto-layout-toolbox.html
Recommended Book
● Autolayout Demystified 2nd Edition by
Erica Sadun.
Recommended