iOS Autolayouts

Konstantin Bychkov @xnekoix http://www.ciklum.com

Main Layout approaches

Springs & StrutsAutolayoutsStackViewReactiveCocoaLayoutComponentKit

Springs & Struts

frame absolute positioningautoresizing masks

Springs & Struts Pros

easy to understand how it works and easy to debugworks really fast

Springs & Struts Cons

messy to work with complex dynamic layoutsimperativedifferent devices screen sizes adds more complexity to implementation

ReactiveCocoaLayout

Allows to describe layouts in a reactive wayhttps://github.com/ReactiveCocoa/ReactiveCocoaLayout

ReactiveCocoaLayout Pros

works fastanimations through ReactiveAnimationopen-sourcedeclarative

ReactiveCocoaLayout Cons

alphano Interface Builder supportobjective-c

ReactiveCocoaLayout Debatable

unidirectional layout update (top-down)(easier to debug / but harder to propagate changes upstream)ReactiveCocoa

ComponentKit

From Facebook known for their react.jswhich was basically an inspiration for ComponentKit

ComponentKit Pros

declarativeflex-box modelopen-source

ComponentKit Cons

not supported anymore (but developers promised some swift implementation)no Interface Builder support

ComponentKit Debatable

objective-c++

Apple Autolayouts

Based on Cassowary constraint solving toolkit developed by Greg Badros and Alan Borning.

y = a * x + b

attribute1 = multiplier * attribute2 + constant

attribute1 = multiplier * attribute2 + constant attribute1 >= multiplier * attribute2 + constant attribute1 <= multiplier * attribute2 + constant

attribute1 = multiplier * attribute2 + constant @ priority attribute1 >= multiplier * attribute2 + constant @ priority attribute1 <= multiplier * attribute2 + constant @ priority

Content Hugging / Compression Resistance

override func intrinsicContentSize() -> CGSize { return CGSize( width: 320, height: UIViewNoIntrinsicMetric) }

H:[view1]-(>=100@500)-[view2]H:[view1]-(<=60@499)-[view2] - Still tries to satisfy inequality

Intrinsic content size width = 200 height = 400Transforms to set of constraints H:[view(>=200@(Compression Resistance Priority))] H:[view(<=200@(Hugging Priority))] V:[view(>=400@(Compression Resistance Priority))] V:[view(<=400@(Hugging Priority))]

Since iOS 8

Size classes (UITraitCollection)New attributesActivate/Deactivate constraints

Since iOS 9

New attributesUIStackViewAnchorsUILayoutGuide

StackView

Android linear layoutYou should definitely use it.

Anchors

are constraint fabric

UILayoutGuide

pretty good solution for some layout problemsnot supported in Interface Builder

Good Layout principles:

Necessity and SufficiencyAdaptivity

Apple Auto Layout Pros

DeclarativeInterface BuilderSwift

Apple Auto Layout Cons

Slower then Springs & Struts

Debug Sessioncommand alias objcpo po -l objc++ -O --

command alias objcexpr expr -l objc++ -O --po view.performSelector(_autolayoutTrace)objcpo [[UIWindow keyWindow] _autolayoutTrace] // prints layouts ambiguity

objcpo [view constraintsAffectingLayoutForAxis:0] // horizontal

objcpo [view constraintsAffectingLayoutForAxis:1] // vertical[view hasAmbiguousLayout] // BOOL

[view exerciseAmbiguityInLayout] // visualizing ambiguity

expr (void)[CATransaction flush]Facebook/Chisel

QA

Thanks!Materialshttps://www.objc.io/issues/3-views/advanced-auto-layout-toolbox/Apple WWDC sessionsApple iOS documentation

Exampleshttps://github.com/xNekOIx/talks/tree/master/StackView