The Simple Layout of a Complex Interface (SwiftFest '18)

Understanding Auto Layout is your best chance to write UI code you can be proud of. Its power often underestimated, its features easily misused, I find it overall less appreciated than it could be, if more widely understood.

This talk is aiming to show how relying heavily on Auto Layout makes you move faster and be more confident writing UI code. Working with the safe area, showing off custom UILayoutGuides and making use of the controversal UIStackViews, we will walk through the simple code of a more complex interface together.

Attendees can expect to learn:

- How to express layout fast and simple, without touching Interface Builder
- How Auto Layout helps to reduce state in your views / view controllers
- Why the safe area is great and how to rely on it without knowing what device your code is running on
- When to use custom UILayoutGuides and how they help to avoid using numeric values all around
- UIStackViews: why they are great, but controversial. How to work with stack views in scrollable layouts

Transcript

1. THE SIMPLE LAYOUT OF A COMPLEX INTERFACE Agnes Vasarhelyi
 
 @vasarhelyia
 " Topology Eyewear
2. “Why is layout so complicated?” - The developer
3. “WHY IS LAYOUT SO COMPLICATED?” Because it needs to react to changes.
4. WHAT KIND OF CHANGES? Status bar height changed Something finished downloading User added more than three items to list Your app is now presenting in split view Device orientation changed External (superview’s bounds change) Internal (view’s size changes)
6. WHAT TOOLS DO WE HAVE? Frame layout Autoresizing masks Auto Layout
7. WHAT TOOLS DO WE HAVE? Frame layout Autoresizing masks Auto Layout Position manual manual automatic (external, internal) Size manual automatic (external) automatic (external, internal)
8. WHAT IS AUTO LAYOUT? Linear equations for determining the size and position of items in a layout.
9. WHAT I LIKE ABOUT AUTO LAYOUT ✂ Maintainable code Reduced state % Simple set of rules
10. SEVEN THINGS TO KNOW ABOUT AUTO LAYOUT 1. Constraints 2. Layout correctness 3. UIStackView 4. Safe area 5. UILayoutGuide 6. Debugging 7. Auto Layout performance
11. TOPOLOGY APP
12. TOPOLOGY APP “TryOn” “Product Info”
13. TOPOLOGY APP “TryOn” “Product Info”
14. 1. CONSTRAINTS 1. Size 2. Position
15. 1. CONSTRAINTS Constraint constants let shareHeightConstraint: NSLayoutConstraint = 
 shareView.heightAnchor.constraint(equalToConstant: 34).isActive = true shareHeightConstraint.constant = 0 shareHeightConstraint.constant = 34 hide show
16. 1. CONSTRAINTS setNeedsLayout() layoutIfNeeded()
17. 2. LAYOUT CORRECTNESS LAYOUT CORRECTNESS ambiguous not enough constraints unsatisfiable too many constraints
18. 3. UISTACKVIEW UISTACKVIEW
19. 3. UISTACKVIEW 1. 2. 3. stackView.axis = .vertical stackView.alignment = .fill stackView.spacing = 0
20. 3. UISTACKVIEW isHidden changes the layout
21. can’t set backgroundColor 3. UISTACKVIEW
22. 4. SAFE AREA SAFE AREA safeAreaLayoutGuide (iOS 11) non-iPhone X iPhone X Safe area “Unsafe” area
23. 4. SAFE AREA layoutMarginsGuide (iOS 10) UINavigationBar ] UINavigationBar “Safe area” “Unsafe” area
24. 4. SAFE AREA Constraint Inequalities “Product Info” designControl.topAnchor
 .constraint(greaterThanOrEqualTo:view.safeAreaLayoutGuide.topAnchor) Design Control (floating above stack view)
25. 5. UILAYOUTGUIDE Replace “dummy views” UILayoutGuide UILAYOUTGUIDE dummy view space space
26. 5. UILAYOUTGUIDE INTRINSIC CONTENT SIZE “Product Info” “TryOn” INTRINSIC CONTENT SIZE ? INTRINSIC CONTENT SIZE
27. 5. UILAYOUTGUIDE INTRINSIC CONTENT SIZE “TryOn” safe area’s height yellow area’s bottom AR view’s top UILayoutGuide safe area’s width
28. 6. DEBUGGING DEBUGGING AUTO LAYOUT Reveal
29. 6. DEBUGGING Instruments (beta preview)
30. 7. AUTO LAYOUT PERFORMANCE “You only pay for what you use with Auto Layout.” - Ken Ferry (Apple)
31. 7. AUTO LAYOUT PERFORMANCE ♻ Don’t churn constraints Model the problem naturally Think of AL engine as a layout cache and tracker
32. REFERENCES Auto Layout documentation https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/ AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW1 https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/ ProgrammaticallyCreatingConstraints.html#//apple_ref/doc/uid/TP40010853-CH16-SW1 Topology Engineering Blog https://topologyeyewear.github.io/engineering-blog/ @vasarhelyia on Twitter https://developer.apple.com/videos/play/wwdc2018/220/ High Performance Auto Layout session at WWDC ’18 THANKS!