iOS Autolayouts

Transcript

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