Slide 1
Slide 1 text
Playing Sheet presentation
style on iOS 13
Potatotips #63 19/7/24 @SmartNews
Shin Yamamoto @scenee
Slide 2
Slide 2 text
● iOS Developer
● Freelancer
● Creator of FloatingPanel
Hi, I’m @scenee!
https://github.com/SCENEE/FloatingPanel
Slide 3
Slide 3 text
What’s Sheet presentation style?
Slide 4
Slide 4 text
Sheet presentation style
● New presentation style from iOS 13
● Mail.app
● .pageSheet,.formSheet
● Default style in iOS 13 (SDK)
○ .automatic ≒.pageSheet
Slide 5
Slide 5 text
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/
Slide 6
Slide 6 text
Migration notes
● Add a button to dismiss
● Care the swipe-to-dismiss action
● View Controller life cycle
Slide 7
Slide 7 text
Presenting View Controller Life Cycle
Sheet Fullscreen
viewWillAppear
-- Invoked
viewDidAppear
-- Invoked
viewWillDisappear
-- Invoked
viewDidDisappear
-- Invoked
Slide 8
Slide 8 text
Presented View Controller Life Cycle
Sheet Fullscreen
viewWillAppear
Invoked Invoked
viewDidAppear
Invoked Invoked
viewWillDisappear
Multiple invoked Invoked
viewDidDisappear
Invoked Invoked
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Sheet presentation features
● Swipe to dismiss
● Sheet bounce
● Scroll integration
Slide 11
Slide 11 text
Sheet features
● Swipe to dismiss (customizable)
● Sheet bounce
● Scroll integration
Slide 12
Slide 12 text
● Disable to dismiss
○ Set .isModalnPresentation to true
○ UIAdaptivePresentationControllerDelegate
■ Return false in presentationControllerShouldDismiss
Swipe to dismiss
Slide 13
Slide 13 text
● Detect a dismiss action
○ UIAdaptivePresentationControllerDelegate
■ presentationControllerDidAttempToDismiss
■ presentationControllerWillDismiss
■ presentationControllerDidDismiss
Swipe to dismiss
Slide 14
Slide 14 text
I wonder how to add Mail.app-like UI
to suspend and resume a task
Slide 15
Slide 15 text
Demo
Slide 16
Slide 16 text
How to implement
● Dismiss buttons in NavigationBar on swiping up
Slide 17
Slide 17 text
How to implement
● Stop dropping a modal view at a position Y.
Slide 18
Slide 18 text
How to implement
● Change state of the presenting view controller
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Recap
● Sheet presentation style as default in iOS 13
● A few APIs to customize the behavior
● Imitate a task suspending UI using presentedView
Slide 22
Slide 22 text
Thanks you!