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

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

6190e163993110536deb0767f9f63fdb?s=128

Agnes Vasarhelyi

June 18, 2018
Tweet

Transcript

  1. 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)
  2. 5.
  3. 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)
  4. 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
  5. 15.

    1. CONSTRAINTS Constraint constants let shareHeightConstraint: NSLayoutConstraint = 
 shareView.heightAnchor.constraint(equalToConstant:

    34).isActive = true shareHeightConstraint.constant = 0 shareHeightConstraint.constant = 34 hide show
  6. 22.
  7. 27.

    5. UILAYOUTGUIDE INTRINSIC CONTENT SIZE “TryOn” safe area’s height yellow

    area’s bottom AR view’s top UILayoutGuide safe area’s width
  8. 30.

    7. AUTO LAYOUT PERFORMANCE “You only pay for what you

    use with Auto Layout.” - Ken Ferry (Apple)
  9. 31.

    7. AUTO LAYOUT PERFORMANCE ♻ Don’t churn constraints Model the

    problem naturally Think of AL engine as a layout cache and tracker