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

Playing Sheet presentation style on iOS 13

Playing Sheet presentation style on iOS 13

Shin Yamamoto

July 24, 2019
Tweet

More Decks by Shin Yamamoto

Other Decks in Programming

Transcript

  1. Playing Sheet presentation
    style on iOS 13
    Potatotips #63 19/7/24 @SmartNews
    Shin Yamamoto @scenee

    View full-size slide

  2. ● iOS Developer
    ● Freelancer
    ● Creator of FloatingPanel
    Hi, I’m @scenee!
    https://github.com/SCENEE/FloatingPanel

    View full-size slide

  3. What’s Sheet presentation style?

    View full-size slide

  4. Sheet presentation style
    ● New presentation style from iOS 13
    ● Mail.app
    ● .pageSheet,.formSheet
    ● Default style in iOS 13 (SDK)
    ○ .automatic ≒.pageSheet

    View full-size slide

  5. Sheet Fullscreen
    Content Non immersive 非没入型 Immersive 没入型
    Dismiss ● Tapping a button
    ● Swiping down
    (optional)
    Tapping a button
    Modality: Sheet and Fullscreen
    https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

    View full-size slide

  6. Migration notes
    ● Add a button to dismiss
    ● Care the swipe-to-dismiss action
    ● View Controller life cycle

    View full-size slide

  7. Presenting View Controller Life Cycle
    Sheet Fullscreen
    viewWillAppear
    -- Invoked
    viewDidAppear
    -- Invoked
    viewWillDisappear
    -- Invoked
    viewDidDisappear
    -- Invoked

    View full-size slide

  8. Presented View Controller Life Cycle
    Sheet Fullscreen
    viewWillAppear
    Invoked Invoked
    viewDidAppear
    Invoked Invoked
    viewWillDisappear
    Multiple invoked Invoked
    viewDidDisappear
    Invoked Invoked

    View full-size slide

  9. WWDC19 Sessions
    ● What’s New in iOS Design
    https://developer.apple.com/videos/play/wwdc2019/808
    ● Modernizing Your UI for iOS 13
    https://developer.apple.com/videos/play/wwdc2019/224

    View full-size slide

  10. Sheet presentation features
    ● Swipe to dismiss
    ● Sheet bounce
    ● Scroll integration

    View full-size slide

  11. Sheet features
    ● Swipe to dismiss (customizable)
    ● Sheet bounce
    ● Scroll integration

    View full-size slide

  12. ● Disable to dismiss
    ○ Set .isModalnPresentation to true
    ○ UIAdaptivePresentationControllerDelegate
    ■ Return false in presentationControllerShouldDismiss
    Swipe to dismiss

    View full-size slide

  13. ● Detect a dismiss action
    ○ UIAdaptivePresentationControllerDelegate
    ■ presentationControllerDidAttempToDismiss
    ■ presentationControllerWillDismiss
    ■ presentationControllerDidDismiss
    Swipe to dismiss

    View full-size slide

  14. I wonder how to add Mail.app-like UI
    to suspend and resume a task

    View full-size slide

  15. How to implement
    ● Dismiss buttons in NavigationBar on swiping up

    View full-size slide

  16. How to implement
    ● Stop dropping a modal view at a position Y.

    View full-size slide

  17. How to implement
    ● Change state of the presenting view controller

    View full-size slide

  18. Recap
    ● Sheet presentation style as default in iOS 13
    ● A few APIs to customize the behavior
    ● Imitate a task suspending UI using presentedView

    View full-size slide