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

Slide 1

Slide 1 text

THE SIMPLE LAYOUT OF A COMPLEX INTERFACE Agnes Vasarhelyi    @vasarhelyia  " Topology Eyewear

Slide 2

Slide 2 text

“Why is layout so complicated?” - The developer

Slide 3

Slide 3 text

“WHY IS LAYOUT SO COMPLICATED?” Because it needs to react to changes.

Slide 4

Slide 4 text

WHAT KIND OF CHANGES? Status bar height changed Something ﬁnished 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)

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

WHAT TOOLS DO WE HAVE? Frame layout Autoresizing masks Auto Layout

Slide 7

Slide 7 text

WHAT TOOLS DO WE HAVE? Frame layout Autoresizing masks Auto Layout Position manual manual automatic (external, internal) Size manual automatic (external) automatic (external, internal)

Slide 8

Slide 8 text

WHAT IS AUTO LAYOUT? Linear equations for determining the size and position of items in a layout.

Slide 9

Slide 9 text

WHAT I LIKE ABOUT AUTO LAYOUT ✂ Maintainable code Reduced state % Simple set of rules

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

TOPOLOGY APP

Slide 12

Slide 12 text

TOPOLOGY APP “TryOn” “Product Info”

Slide 13

Slide 13 text

TOPOLOGY APP “TryOn” “Product Info”

Slide 14

Slide 14 text

1. CONSTRAINTS 1. Size 2. Position

Slide 15

Slide 15 text

1. CONSTRAINTS Constraint constants let shareHeightConstraint: NSLayoutConstraint =   shareView.heightAnchor.constraint(equalToConstant: 34).isActive = true shareHeightConstraint.constant = 0 shareHeightConstraint.constant = 34 hide show

Slide 16

Slide 16 text

1. CONSTRAINTS setNeedsLayout() layoutIfNeeded()

Slide 17

Slide 17 text

2. LAYOUT CORRECTNESS LAYOUT CORRECTNESS ambiguous not enough constraints unsatisﬁable too many constraints

Slide 18

Slide 18 text

3. UISTACKVIEW UISTACKVIEW

Slide 19

Slide 19 text

3. UISTACKVIEW 1. 2. 3. stackView.axis = .vertical stackView.alignment = .fill stackView.spacing = 0

Slide 20

Slide 20 text

3. UISTACKVIEW isHidden changes the layout

Slide 21

Slide 21 text

can’t set backgroundColor 3. UISTACKVIEW

Slide 22

Slide 22 text

4. SAFE AREA SAFE AREA safeAreaLayoutGuide (iOS 11) non-iPhone X iPhone X Safe area “Unsafe” area

Slide 23

Slide 23 text

4. SAFE AREA layoutMarginsGuide (iOS 10) UINavigationBar ] UINavigationBar “Safe area” “Unsafe” area

Slide 24

Slide 24 text

4. SAFE AREA Constraint Inequalities “Product Info” designControl.topAnchor  .constraint(greaterThanOrEqualTo:view.safeAreaLayoutGuide.topAnchor) Design Control (ﬂoating above stack view)

Slide 25

Slide 25 text

5. UILAYOUTGUIDE Replace “dummy views” UILayoutGuide UILAYOUTGUIDE dummy view space space

Slide 26

Slide 26 text

5. UILAYOUTGUIDE INTRINSIC CONTENT SIZE “Product Info” “TryOn” INTRINSIC CONTENT SIZE ? INTRINSIC CONTENT SIZE

Slide 27

Slide 27 text

5. UILAYOUTGUIDE INTRINSIC CONTENT SIZE “TryOn” safe area’s height yellow area’s bottom AR view’s top UILayoutGuide safe area’s width

Slide 28

Slide 28 text

6. DEBUGGING DEBUGGING AUTO LAYOUT Reveal

Slide 29

Slide 29 text

6. DEBUGGING Instruments (beta preview)

Slide 30

Slide 30 text

7. AUTO LAYOUT PERFORMANCE “You only pay for what you use with Auto Layout.” - Ken Ferry (Apple)

Slide 31

Slide 31 text

7. AUTO LAYOUT PERFORMANCE ♻ Don’t churn constraints Model the problem naturally Think of AL engine as a layout cache and tracker

Slide 32

Slide 32 text

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!