Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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)
  5. None
  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!