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

Clean Layout with iOS 9

Clean Layout with iOS 9

Talk given 29 Apr 2016 at NSNorth Toronto

WWDC 2016 is just around the corner, and there’s probably going to be a bunch of cool stuff announced (maybe even a Siri API?!). But you know what’s more exciting than iOS 10? We can drop iOS 8 support now! And that means that we can start using and celebrating the iOS 9 features that we announced last year. :tada: Honestly, I really didn’t enjoy UI programming until Swift and iOS 9 were available. Now I’ve found myself actually enjoying UI programming. I hope to share some of that excitement with you in this talk.

This talk will go over:
* NSLayoutAnchor
* UILayoutGuide
* UIStackView

Hope you enjoy!

Ayaka Nonaka

April 29, 2016
Tweet

More Decks by Ayaka Nonaka

Other Decks in Technology

Transcript

  1. iOS 9 • 3D Touch • SFSafariViewController • CoreSpotlight.framework •

    Contacts.framework & ContactsUI.framework (ABAddressBook !)
  2. UIKit • Better right-to-left language support • UIUserNotificationAction now has

    a behavior property • NSLayoutAnchor • UILayoutGuide • UIStackView
  3. !

  4. NSLayoutConstraint(item: whyIsThis, attribute: .Height, relatedBy: .Equal, toItem: soVerbose, attribute: .NotAnAttribute,

    multiplier: 1.0, constant: 44.0) "|-50-[rememberThis]-50-|" "|-[omg]-[what]-[isThisView(>=20)]-|"
  5. NSLayoutConstraint(item: view, attribute: .Top, relatedBy: .Equal, toItem: otherView, attribute: .Top,

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

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

    multiplier: 1.0, constant: 44) // vs. view.heightAnchor.constraintEqualToConstant(44)
  8. “I want the top of this view to be aligned

    with the left side of this other view.” — me, on a sleepy day !
  9. 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)
  10. What happened to Swift? Doesn’t work for Swift because not

    all Objective-C generics have been brought over to Swift yet.
  11. 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.
  12. UILayoutGuide • Not a member of the view hierarchy. •

    Does not participate in the responder chain.
  13. 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.
  14. 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.
  15. // 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), ])
  16. “… and I want to be able to show and

    hide the middle view.” — probably a designer
  17. Method 1 1.Make the height constraint of the middle view

    zero. 2.Deal with double padding issues.
  18. 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.
  19. “I want to stack three views vertically and I want

    to be able to show and hide the middle view.”
  20. !

  21. TZStackView • Compatible with iOS 7.x and iOS 8.x •

    But no Storyboard support • :%s/TZStackView/UIStackView/g
  22. 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