iOS Autolayouts
Konstantin Bychkov
@xnekoix
Main Layout approaches
- Springs & Struts
- Autolayouts
- StackView
- ReactiveCocoaLayout
- ComponentKit
Springs & Struts
- frame absolute positioning
- autoresizing masks
Springs & Struts Pros
- easy to understand how it works and easy to debug
- works really fast
Springs & Struts Cons
- messy to work with complex dynamic layouts
- imperative
- different devices screen sizes adds more complexity to implementation
ReactiveCocoaLayout
Allows to describe layouts in a reactive way GitHub
ReactiveCocoaLayout Pros
- works fast
- animations through ReactiveAnimation
- open-source
- declarative
ReactiveCocoaLayout Cons
- alpha
- no Interface Builder support
- objective-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.js which was basically an inspiration for ComponentKit
ComponentKit Pros
- declarative
- flex-box model
- open-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 + constantant
attribute1 = multiplier * attribute2 + constantant
attribute1 >= multiplier * attribute2 + constantant
attribute1 <= multiplier * attribute2 + constantant
attribute1 = multiplier * attribute2 + constantant @ priority
attribute1 >= multiplier * attribute2 + constantant @ priority
attribute1 <= multiplier * attribute2 + constantant @ priority
Visual formatting language
"H:|-(==10@750)-[button(>=50)]-(>=10,<=10)-|"
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 = 400
Transforms 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 attributes
- Activate/Deactivate constraints
Since iOS 9
- New attributes
- UIStackView
- Anchors
- UILayoutGuide
StackView
- Android linear layout You should definately use it.
Anchors
- are constraint fabric
UILayoutGuide
- pretty good solution for some layouting problems
- not supported in Interface Builder
Good Layout principles:
- Necessity and Sufficiency
- Adaptivity
Apple Autolayouts Pros
- Declarative
- Interface Builder
- Swift
Apple Autolayouts Cons
- Slower then Springs & Struts
Debug Session
command 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