Clean Layout with iOS 9

Slide 1

Slide 1 text

Clean Layout with ✨ iOS 9 ✨ @ayanonagon

Slide 2

Slide 2 text

Hi, I’m Ayaka. @ayanonagon NSNorth 2016

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

WWDC 2016

Slide 5

Slide 5 text

! iOS 10 !

Slide 6

Slide 6 text

! iOS 8 !

Slide 7

Slide 7 text

✨ iOS 9 ✨

Slide 8

Slide 8 text

“But we still support iOS 7. !” — somebody in the audience

Slide 9

Slide 9 text

iOS 9 • 3D Touch • SFSafariViewController • CoreSpotlight.framework • Contacts.framework & ContactsUI.framework (ABAddressBook !)

Slide 10

Slide 10 text

UIKit?

Slide 11

Slide 11 text

UIKit • Better right-to-left language support • UIUserNotificationAction now has a behavior property • NSLayoutAnchor • UILayoutGuide • UIStackView

Slide 12

Slide 12 text

Today • NSLayoutAnchor • UILayoutGuide • UIStackView

Slide 13

Slide 13 text

Clean Layout with ✨ iOS 9 ✨ @ayanonagon

Slide 14

Slide 14 text

Disclaimer: I do everything in code.

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Cleaner Safer Simpler

Slide 17

Slide 17 text

Fun!

Slide 18

Slide 18 text

VFL "|-50-[rememberThis]-50-|" "|-[omg]-[what]-[isThisView(>=20)]-|"

Slide 19

Slide 19 text

V(isual) F(ormat) L(anguage) "|-50-[rememberThis]-50-|" "|-[omg]-[what]-[isThisView(>=20)]-|"

Slide 20

Slide 20 text

V(ery) F(ragile) L(anguage) "|-50-typos]-50-|" "|-[omg]-typs]-[everywhere(>=20)-|"

Slide 21

Slide 21 text

NSLayoutConstraint.init NSLayoutConstraint(item: whyIsThis, attribute: .Height, relatedBy: .Equal, toItem: soVerbose, attribute: .NotAnAttribute, multiplier: 1.0, constant: 44.0)

Slide 22

Slide 22 text

NSLayoutConstraint(item: whyIsThis, attribute: .Height, relatedBy: .Equal, toItem: soVerbose, attribute: .NotAnAttribute, multiplier: 1.0, constant: 44.0) "|-50-[rememberThis]-50-|" "|-[omg]-[what]-[isThisView(>=20)]-|"

Slide 23

Slide 23 text

“I want this view to be top-aligned with this other view.”

Slide 24

Slide 24 text

NSLayoutConstraint(item: view, attribute: .Top, relatedBy: .Equal, toItem: otherView, attribute: .Top, multiplier: 1.0, constant: 0.0)

Slide 25

Slide 25 text

✨ NSLayoutAnchor ✨

Slide 26

Slide 26 text

NSLayoutConstraint(item: view, attribute: .Top, relatedBy: .Equal, toItem: otherView, attribute: .Top, multiplier: 1.0, constant: 0.0)

Slide 27

Slide 27 text

view.topAnchor.constraintEqualToAnchor(otherView.topAnchor)

Slide 28

Slide 28 text

NSLayoutConstraint(item: view, attribute: .Top, relatedBy: .Equal, toItem: otherView, attribute: .Top, multiplier: 1.0, constant: 0.0) // vs. view.topAnchor.constraintEqualToAnchor(otherView.topAnchor)

Slide 29

Slide 29 text

“I want this view to have a height of 44.”

Slide 30

Slide 30 text

NSLayoutConstraint(item: view, attribute: .Height, relatedBy: .Equal, toItem: nil, // meh attribute: .NotAnAttribute, // wat multiplier: 1.0, // ugh constant: 44)

Slide 31

Slide 31 text

view.heightAnchor.constraintEqualToConstant(44)

Slide 32

Slide 32 text

NSLayoutConstraint(item: view, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 44) // vs. view.heightAnchor.constraintEqualToConstant(44)

Slide 33

Slide 33 text

“I want the top of this view to be aligned with the left side of this other view.” — me, on a sleepy day !

Slide 34

Slide 34 text

[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:otherView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0]; Doesn’t make sense, but compiles without warning. !

Slide 35

Slide 35 text

[view.topAnchor constraintEqualToAnchor:otherView.leftAnchor]; Doesn’t make sense, so compiler emits a warning! !

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Type Safety • Dimension anchors (e.g. heightAnchor, widthAnchor) • X-axis anchors (e.g. leadingAnchor, trailingAnchor, leftAnchor, rightAnchor, centerXAnchor) • Y-axis anchors (e.g. topAnchor, bottomAnchor, centerYAnchor, firstBaselineAnchor, lastBaselineAnchor)

Slide 39

Slide 39 text

What happened to Swift? !

Slide 40

Slide 40 text

What happened to Swift? Doesn’t work for Swift because not all Objective-C generics have been brought over to Swift yet.

Slide 41

Slide 41 text

“I want this view to be top-aligned with this other view.”

Slide 42

Slide 42 text

“… and I also want some padding.”

Slide 43

Slide 43 text

✨ UILayoutGuide ✨

Slide 44

Slide 44 text

UIView • layoutMargins (UIEdgeInsets) • layoutMarginsGuide (UILayoutGuide) ✨ iOS 9 ✨

Slide 45

Slide 45 text

“I want this view to be top-aligned with this other view and I want some padding.”

Slide 46

Slide 46 text

let margins = otherView.layoutMarginsGuide view.topAnchor.constraintEqualToAnchor(margins.topAnchor)

Slide 47

Slide 47 text

“I want all of these views together to be centered in the superview.”

Slide 48

Slide 48 text

Centering 1.Put all the views in a dummy container view. 2.Add the container view into the view hierarchy. 3.Center the container view.

Slide 49

Slide 49 text

Problems • Clutters the view hierarchy. • The container view participates in the responder chain.

Slide 50

Slide 50 text

✨ UILayoutGuide (again!) ✨

Slide 51

Slide 51 text

UILayoutGuide • Not a member of the view hierarchy. • Does not participate in the responder chain.

Slide 52

Slide 52 text

UIView Centering 1.Put all the views in a dummy container view. 2.Add the container view into the view hierarchy. 3.Center the container view.

Slide 53

Slide 53 text

UILayoutGuide Centering 1.Put all the views in a container layout guide. 2.Add the layout guide to the view hierarchy. 3.Center the layout guide.

Slide 54

Slide 54 text

let guide = UILayoutGuide() guide.addSubview(view1) guide.addSubview(view2) // view3, … view.addLayoutGuide(guide)

Slide 55

Slide 55 text

// Position the views in the layout guide. NSLayoutConstraint.activateConstraints([ view1.topAnchor.constraintEqualToAnchor(guide.topAnchor), view1.leadingAnchor.constraintEqualToAnchor(guide.leadingAnchor), // view2, view3, … ]) // Position the layout guide in the main view. NSLayoutConstraint.activateConstraints([ guide.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor), guide.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor), ])

Slide 56

Slide 56 text

Spacing with UILayoutGuide

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

“I want to stack three views vertically.”

Slide 59

Slide 59 text

“… and I want to be able to show and hide the middle view.” — probably a designer

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Method 1 1.Make the height constraint of the middle view zero. 2.Deal with double padding issues.

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Method 2 1.Define a vertical constraint between the top most view and the bottom most view. 2.Shrink that constraint’s height to be the padding amount. 3.Hide the middle view.

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Method 3 1.Use a collection view to do your layout. 2.Update data source.

Slide 69

Slide 69 text

What year is it?! (›°□°ʣ›ớ ᵲᴸᵲ

Slide 70

Slide 70 text

Let’s use iOS 9. ┬──┬ ϊ( ʄ-ʄϊ)

Slide 71

Slide 71 text

✨ UIStackView ✨

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

“I want to stack three views vertically and I want to be able to show and hide the middle view.”

Slide 74

Slide 74 text

let stackView = UIStackView() stackView.axis = .Vertical stackView.addArrangedSubview(view1) stackView.addArrangedSubview(view2) stackView.addArrangedSubview(view3) view2.hidden = true // or false

Slide 75

Slide 75 text

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

TZStackView • Compatible with iOS 7.x and iOS 8.x • But no Storyboard support • :%s/TZStackView/UIStackView/g

Slide 83

Slide 83 text

Recap • Cleaner and more type-safe layouts via NSLayoutAnchor • Simpler view hierarchies and responder chain via UILayoutGuide • Flexible (and easier to understand) layouts via UIStackView