iOS Auto Layout in practice

Some tips about Auto Layout on iOS

Transcript

1. Auto Layout in practice Saturday, December 15, 12
2. About me Yi Gu ‣ iOS/Web developer ‣ @ghawkgu ‣ ghawk.gu@gmail.com Saturday, December 15, 12
3. • 2D rect • 4 parameters View Geometry • dimension (width, height) • position (origin.x, origin.y) Saturday, December 15, 12
4. Constraints • Help the layout manager to calculate the geometry params during runtime • Relation between 2 views • Linear formula foo.left = 2 × bar.width + 100 • IB will generate adequate constraints automatically • For coding: visual format language & API Saturday, December 15, 12
5. • Automatic constraints • Purple icon • Not removable Xcode & Constraints Saturday, December 15, 12
6. • To create user constraints • Add new constraints • Promote an automatic constraint Xcode & Constraints Saturday, December 15, 12
7. • User constraints • Blue icon • Can be removed • Treat them as warnings Xcode & Constraints Saturday, December 15, 12
8. • Constraint properties • Relation ( ==, <=, >= ) • Constant • Priority (1~1,000) • No multiplier Xcode & Constraints Saturday, December 15, 12
9. Rule of 4 Saturday, December 15, 12
10. Rule of 4 To make a view fixed as expected, 4 constraints are needed (2 constraints in each direction) no less than 4, no more than 4 Saturday, December 15, 12
11. Rule of 4 To make a view fixed as expected, 4 constraints are needed (2 constraints in each direction) no less than 4, no more than 4 …in most cases Saturday, December 15, 12
12. Patterns of layout child-parent views Elastic layout • container • large content(image, text) • ... Classic layout • small controls • icons • ... Saturday, December 15, 12
13. Patterns of layout multiple views Chained layout • a group of buttons • ... Parent-based layout views stay independently, may overlap ᶃ ᶄ ᶅ ᶆ ᶇ ᶈ ᶃ ᶄ ᶅ ᶆ ᶇ ᶈ Saturday, December 15, 12
14. Patterns of layout multiple views Chained layout • a group of buttons • ... Parent-based layout views stay independently, may overlap ᶃ ᶄ ᶅ ᶆ ᶇ ᶈ ᶃ ᶄ ᶅ ᶆ ᶇ ᶈ Leave one dimension undefined as the tolerance to absorb the calculation errors Saturday, December 15, 12
15. Intrinsic Content Size intrinsic content size 2 Implicit constraints for width & height Saturday, December 15, 12
16. Intrinsic Content Size intrinsic content size Being pulled intrinsic content size Being pushed Saturday, December 15, 12
17. Layout trouble shooting Saturday, December 15, 12
18. Layout trouble shooting • Ambiguous constraints • under-constrained (constraints < 4) • rare case by using IB • Solutions • Try adding more constraints Saturday, December 15, 12
19. Layout trouble shooting • Unsatisfied layout • over-constrained ( constraints > 4) • some views may end up with negative dimension • Solutions • Remove the conflicting constraints • Adjust the priority of constraints Saturday, December 15, 12
20. Avoid using <= & => • Why • iOS has a fixed window size • Inequality constraints break the Rule of 4 • Redundant constraints • Hard to debug • Try using intrinsic content size & priority before adding inequality constraints Saturday, December 15, 12
21. References • Cocoa Auto Layout Guide • iOS 6 Release Notes • A special case of UIScrollView • WWDC 2012 • Introduction to Auto Layout for iOS and OS X • Auto Layout by Example • Best Practices for Mastering Auto Layout Saturday, December 15, 12
22. Questions? Saturday, December 15, 12
23. Thank you Saturday, December 15, 12