Tuenti_Autolayout_Workshop

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.