Lviv MD Day 2015 Костянтин Бичков "iOS Autolayouts – це добре!"

1. iOS Autolayouts
Konstantin Bychkov
@xnekoix
http://www.ciklum.com

2. Main Layout approaches
Springs & Struts
Autolayouts
StackView
ReactiveCocoaLayout
ComponentKit

3. Springs & Struts
frame absolute positioning
autoresizing masks

4. Springs & Struts Pros
easy to understand how it works and easy to debug
works really fast

5. Springs & Struts Cons
messy to work with complex dynamic layouts
imperative
different devices screen sizes adds more complexity to implementation

6. ReactiveCocoaLayout
Allows to describe layouts in a reactive way
https://github.com/ReactiveCocoa/ReactiveCocoaLayout

7. ReactiveCocoaLayout Pros
works fast
animations through ReactiveAnimation
open-source
declarative

8. ReactiveCocoaLayout Cons
alpha
no Interface Builder support
objective-c

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

10. ComponentKit
From Facebook known for their react.js
which was basically an inspiration for ComponentKit

11. ComponentKit Pros
declarative
flex-box model
open-source

12. ComponentKit Cons
not supported anymore (but developers promised some swift implementation)
no Interface Builder support

13. ComponentKit Debatable
objective-c++

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

15. y = a * x + b

16. attribute1 = multiplier * attribute2 + constant

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

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

19. Content Hugging / Compression Resistance
override func intrinsicContentSize() -> CGSize {
return CGSize(
width: 320,
height: UIViewNoIntrinsicMetric)
}

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

21. 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))]

22. Since iOS 8
Size classes (UITraitCollection)
New attributes
Activate/Deactivate constraints

23. Since iOS 9
New attributes
UIStackView
Anchors
UILayoutGuide

24. StackView
Android linear layout
You should definitely use it.

25. Anchors
are constraint fabric

26. UILayoutGuide
pretty good solution for some layout problems
not supported in Interface Builder

27. Good Layout principles:
Necessity and Sufficiency
Adaptivity

28. Apple Auto Layout Pros
Declarative
Interface Builder
Swift

29. Apple Auto Layout Cons
Slower then Springs & Struts

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

31. QA

32. Thanks!
Materials
https://www.objc.io/issues/3-views/advanced-auto-layout-toolbox/
Apple WWDC sessions
Apple iOS documentation
Examples
https://github.com/xNekOIx/talks/tree/master/StackView