Enhancing your apps for the next dimension of touch

Transcription

1 App Frameworks #WWDC16 A Peek at 3D Touch Enhancing your apps for the next dimension of touch Session 228 Tyler Fox UIKit Frameworks Engineer Peter Hajas UIKit Frameworks Engineer 2016 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Agenda

3 Agenda Overview of 3D Touch

4 Agenda Overview of 3D Touch Home Screen Quick Actions

5 Agenda Overview of 3D Touch Home Screen Quick Actions Peek and Pop

6 Agenda NEW Overview of 3D Touch Home Screen Quick Actions Peek and Pop UIPreviewInteraction

7 Overview of 3D Touch Tour across the system

8

9 647 x 1150

10 647 x 1150

11 647 x 1150

12 647 x 1150

13

14

15

16

17 647 x 1150

18 647 x 1150

19 Supporting 3D Touch

20 Supporting 3D Touch Accelerate access to existing features in your app

21 Supporting 3D Touch Accelerate access to existing features in your app Enable new immersive interactions

22 Supporting 3D Touch Accelerate access to existing features in your app Enable new immersive interactions Provide a consistent experience across ios

23 Home Screen Quick Actions Leap straight into action from the home screen

24 647 x 1150

25 647 x 1150

26 647 x 1150

27 647 x 1150

28 647 x 1150

29 647 x 1150

30 Home Screen Quick Actions Two types Static Dynamic

31 Home Screen Quick Actions Static

32 Home Screen Quick Actions Static Defined in your app s Info.plist

33 Home Screen Quick Actions Static Defined in your app s Info.plist Available as soon as your app has been installed

34 Home Screen Quick Actions Static Defined in your app s Info.plist Available as soon as your app has been installed

35 Home Screen Quick Actions Dynamic

36 Home Screen Quick Actions Dynamic Created by your app at runtime

37 Home Screen Quick Actions Dynamic Created by your app at runtime Available after the first launch of your app

38 Home Screen Quick Actions Dynamic Created by your app at runtime Available after the first launch of your app Shown after any static quick actions (space permitting)

39 Home Screen Quick Actions Dynamic Created by your app at runtime Available after the first launch of your app Shown after any static quick actions (space permitting) Can include a system icon, custom icon, or Address Book contact

40 Dynamic Quick Actions Using a contact for the icon let contactname = "Lexi Torres" var contacticon: UIApplicationShortcutIcon? = nil

41 Dynamic Quick Actions Using a contact for the icon let contactname = "Lexi Torres" var contacticon: UIApplicationShortcutIcon? = nil // Make sure to request access to the user's contacts first if CNContactStore.authorizationStatus(for:.contacts) ==.authorized { }

42 Dynamic Quick Actions Using a contact for the icon let contactname = "Lexi Torres" var contacticon: UIApplicationShortcutIcon? = nil // Make sure to request access to the user's contacts first if CNContactStore.authorizationStatus(for:.contacts) ==.authorized { let predicate = CNContact.predicateForContacts(matchingName: contactname) let contacts = try? CNContactStore().unifiedContacts(matching: predicate, keystofetch: []) }

43 Dynamic Quick Actions Using a contact for the icon let contactname = "Lexi Torres" var contacticon: UIApplicationShortcutIcon? = nil // Make sure to request access to the user's contacts first if CNContactStore.authorizationStatus(for:.contacts) ==.authorized { let predicate = CNContact.predicateForContacts(matchingName: contactname) let contacts = try? CNContactStore().unifiedContacts(matching: predicate, keystofetch: []) if let contact = contacts?.first { contacticon = UIApplicationShortcutIcon(contact: contact) } }

44 Dynamic Quick Actions Using a contact for the icon let contactname = "Lexi Torres" var contacticon: UIApplicationShortcutIcon? = nil // Make sure to request access to the user's contacts first if CNContactStore.authorizationStatus(for:.contacts) ==.authorized { let predicate = CNContact.predicateForContacts(matchingName: contactname) let contacts = try? CNContactStore().unifiedContacts(matching: predicate, keystofetch: []) if let contact = contacts?.first { contacticon = UIApplicationShortcutIcon(contact: contact) } } let icon = contacticon?? UIApplicationShortcutIcon(type:.message)

45 Dynamic Quick Actions Creating and registering // Create a dynamic quick action using the icon let type = "com.company.app.sendchatto" let subtitle = "Send a chat" let shortcutitem1 = UIApplicationShortcutItem(type: type, localizedtitle: contactname, localizedsubtitle: subtitle, icon: icon)

46 Dynamic Quick Actions Creating and registering // Create a dynamic quick action using the icon let type = "com.company.app.sendchatto" let subtitle = "Send a chat" let shortcutitem1 = UIApplicationShortcutItem(type: type, localizedtitle: contactname, localizedsubtitle: subtitle, icon: icon) // Repeat as needed for any additional dynamic quick actions...

47 Dynamic Quick Actions Creating and registering // Create a dynamic quick action using the icon let type = "com.company.app.sendchatto" let subtitle = "Send a chat" let shortcutitem1 = UIApplicationShortcutItem(type: type, localizedtitle: contactname, localizedsubtitle: subtitle, icon: icon) // Repeat as needed for any additional dynamic quick actions... let shortcutitems = [shortcutitem1, shortcutitem2, shortcutitem3]

48 Dynamic Quick Actions Creating and registering // Create a dynamic quick action using the icon let type = "com.company.app.sendchatto" let subtitle = "Send a chat" let shortcutitem1 = UIApplicationShortcutItem(type: type, localizedtitle: contactname, localizedsubtitle: subtitle, icon: icon) // Repeat as needed for any additional dynamic quick actions... let shortcutitems = [shortcutitem1, shortcutitem2, shortcutitem3] // Register the dynamic quick actions to display on the home screen application.shortcutitems = shortcutitems

49 647 x 1150

50 Handling Quick Actions On app activation func application(application: UIApplication, performactionforshortcutitem shortcutitem: UIApplicationShortcutItem, completionhandler: Bool -> Void) { }

51 Handling Quick Actions On app activation func application(application: UIApplication, performactionforshortcutitem shortcutitem: UIApplicationShortcutItem, completionhandler: Bool -> Void) { let didhandle: Bool = /* handle the quick action using shortcutitem */ completionhandler(didhandle) }

52 Handling Quick Actions On app activation func application(application: UIApplication, performactionforshortcutitem shortcutitem: UIApplicationShortcutItem, completionhandler: Bool -> Void) { let didhandle: Bool = /* handle the quick action using shortcutitem */ completionhandler(didhandle) }

53 Handling Quick Actions On app launch func application(application: UIApplication, didfinishlaunchingwithoptions launchoptions: [NSObject: AnyObject]?) -> Bool { }

54 Handling Quick Actions On app launch func application(application: UIApplication, didfinishlaunchingwithoptions launchoptions: [NSObject: AnyObject]?) -> Bool { var performadditionalhandling = true if let shortcutitem = launchoptions?[uiapplicationlaunchoptionsshortcutitemkey] as? UIApplicationShortcutItem { /* handle the quick action using shortcutitem */ performadditionalhandling = false } return performadditionalhandling }

55 Handling Quick Actions On app launch func application(application: UIApplication, didfinishlaunchingwithoptions launchoptions: [NSObject: AnyObject]?) -> Bool { var performadditionalhandling = true if let shortcutitem = launchoptions?[uiapplicationlaunchoptionsshortcutitemkey] as? UIApplicationShortcutItem { /* handle the quick action using shortcutitem */ performadditionalhandling = false } return performadditionalhandling }

56 Handling Quick Actions On app launch func application(application: UIApplication, didfinishlaunchingwithoptions launchoptions: [NSObject: AnyObject]?) -> Bool { var performadditionalhandling = true if let shortcutitem = launchoptions?[uiapplicationlaunchoptionsshortcutitemkey] as? UIApplicationShortcutItem { /* handle the quick action using shortcutitem */ performadditionalhandling = false } return performadditionalhandling }

57 Home Screen Quick Actions Best practices

58 Home Screen Quick Actions Best practices Every app should provide quick actions

59 Home Screen Quick Actions Best practices Every app should provide quick actions Focus on providing quick access to high-value tasks

60 Home Screen Quick Actions Best practices Every app should provide quick actions Focus on providing quick access to high-value tasks Make quick actions predictable

61 Home Screen Quick Actions Best practices Every app should provide quick actions Focus on providing quick access to high-value tasks Make quick actions predictable Be prepared to handle dynamic quick actions from a previous version of your app

62 Home Screen Quick Actions Best practices Every app should provide quick actions Focus on providing quick access to high-value tasks Make quick actions predictable Be prepared to handle dynamic quick actions from a previous version of your app Don t add functionality that is only accessible using quick actions

63 Peek and Pop Seamlessly preview and navigate to content Peter Hajas UIKit Frameworks Engineer

64

65

66

67

68

69 Preview

70

71

72 Commit

73 Adding Peek and Pop to Your App Components of the interaction

74 Adding Peek and Pop to Your App Components of the interaction Registered View Controller

75 Adding Peek and Pop to Your App Components of the interaction Registered View Controller Source

76 Adding Peek and Pop to Your App Components of the interaction Registered View Controller Previewed View Controller Source

77 Adding Peek and Pop to Your App Components of the interaction Registered View Controller Previewed View Controller Source

78 Adding Peek and Pop to Your App Conforming to UIViewControllerPreviewingDelegate class ChatTableViewController : UITableViewController, UIViewControllerPreviewingDelegate

79 Adding Peek and Pop to Your App Conforming to UIViewControllerPreviewingDelegate class ChatTableViewController : UITableViewController, UIViewControllerPreviewingDelegate

80 Adding Peek and Pop to Your App Registering for previewing override func viewdidload() { super.viewdidload() } registerforpreviewing(with: self, sourceview: tableview)

81 Adding Peek and Pop to Your App Registering for previewing override func viewdidload() { super.viewdidload() } registerforpreviewing(with: self, sourceview: tableview)

82 Adding Peek and Pop to Your App Registering for previewing override func viewdidload() { super.viewdidload() } registerforpreviewing(with: self, sourceview: tableview)

83 Adding Peek and Pop to Your App Providing a preview view controller func previewingcontext(_ previewingcontext: UIViewControllerPreviewing, viewcontrollerforlocation location: CGPoint) -> UIViewController? { }

84 Adding Peek and Pop to Your App Providing a preview view controller func previewingcontext(_ previewingcontext: UIViewControllerPreviewing, viewcontrollerforlocation location: CGPoint) -> UIViewController? { }

85 Adding Peek and Pop to Your App Providing a preview view controller func previewingcontext(_ previewingcontext: UIViewControllerPreviewing, viewcontrollerforlocation location: CGPoint) -> UIViewController? { guard let indexpath = tableview.indexpathforrow(at: location) else { return nil } }

86 Adding Peek and Pop to Your App Providing a preview view controller func previewingcontext(_ previewingcontext: UIViewControllerPreviewing, viewcontrollerforlocation location: CGPoint) -> UIViewController? { guard let indexpath = tableview.indexpathforrow(at: location) else { return nil } let chatdetailviewcontroller =... chatdetailviewcontroller.chatitem = chatitem(at: indexpath) }

87 Adding Peek and Pop to Your App Providing a preview view controller func previewingcontext(_ previewingcontext: UIViewControllerPreviewing, viewcontrollerforlocation location: CGPoint) -> UIViewController? { guard let indexpath = tableview.indexpathforrow(at: location) else { return nil } let chatdetailviewcontroller =... chatdetailviewcontroller.chatitem = chatitem(at: indexpath) let cellrect = tableview.rectforrow(at: indexpath) let sourcerect = previewingcontext.sourceview.convert(cellrect, from: tableview) previewingcontext.sourcerect = sourcerect }

88 Adding Peek and Pop to Your App Providing a preview view controller func previewingcontext(_ previewingcontext: UIViewControllerPreviewing, viewcontrollerforlocation location: CGPoint) -> UIViewController? { guard let indexpath = tableview.indexpathforrow(at: location) else { return nil } let chatdetailviewcontroller =... chatdetailviewcontroller.chatitem = chatitem(at: indexpath) let cellrect = tableview.rectforrow(at: indexpath) let sourcerect = previewingcontext.sourceview.convert(cellrect, from: tableview) previewingcontext.sourcerect = sourcerect } return chatdetailviewcontroller

89

90

91 Adding Peek and Pop to Your App Committing a preview view controller func previewingcontext(_ previewingcontext: UIViewControllerPreviewing, commit viewcontrollertocommit: UIViewController) { show(viewcontrollertocommit, sender: self) }

92 Adding Peek and Pop to Your App Committing a preview view controller func previewingcontext(_ previewingcontext: UIViewControllerPreviewing, commit viewcontrollertocommit: UIViewController) { show(viewcontrollertocommit, sender: self) }

93 Adding Peek and Pop to Your App Committing a preview view controller func previewingcontext(_ previewingcontext: UIViewControllerPreviewing, commit viewcontrollertocommit: UIViewController) { show(viewcontrollertocommit, sender: self) }

94

95

96

97

98 Peek and Pop Preview quick actions Registered View Controller Previewed View Controller Source

99 Adding Peek and Pop to Your App Preview quick actions override func previewactionitems() -> [UIPreviewActionItem] { let heart = UIPreviewAction(title: " ", style:.default) { (action, viewcontroller) in // Send a heart } return [heart] }

100 Adding Peek and Pop to Your App Preview quick actions override func previewactionitems() -> [UIPreviewActionItem] { let heart = UIPreviewAction(title: " ", style:.default) { (action, viewcontroller) in // Send a heart } return [heart] }

101 Adding Peek and Pop to Your App Preview quick action groups let replyactions = [UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler)] let sendreply = UIPreviewActionGroup(title: "Send Reply ", style:.default, actions: replyactions)

102 Adding Peek and Pop to Your App Preview quick action groups let replyactions = [UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler)] let sendreply = UIPreviewActionGroup(title: "Send Reply ", style:.default, actions: replyactions)

103 Adding Peek and Pop to Your App Preview quick action groups let replyactions = [UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler), UIPreviewAction(title: " ", style:.default, handler: replyactionhandler)] let sendreply = UIPreviewActionGroup(title: "Send Reply ", style:.default, actions: replyactions)

104 Adding Peek and Pop to Your App Other preview quick action styles let save = UIPreviewAction(title: "Chat Saved", style:.selected, handler: savehandler) let block = UIPreviewAction(title: "Block", style:.destructive, handler: blockhandler)

105 Peek and Pop Best practices

106 Peek and Pop Best practices Content that can be tapped should support Peek and Pop

107 Peek and Pop Best practices Content that can be tapped should support Peek and Pop Return a preview view controller consistently

108 Peek and Pop Best practices Content that can be tapped should support Peek and Pop Return a preview view controller consistently Don t take too long in the previewing delegate

109 Peek and Pop Best practices Content that can be tapped should support Peek and Pop Return a preview view controller consistently Don t take too long in the previewing delegate Set the previewing context sourcerect

110 NEW UIPreviewInteraction Peek and Pop feel with your user interface

111

112

113

114

115

116

117

118

119

120

121

122

123 UIPreviewInteraction Same Peek and Pop Force Processing + Automatic Haptic + Feedback Your User Interface

124 UIPreviewInteraction UIPreviewInteractionDelegate extension ChatDetailViewController : UIPreviewInteractionDelegate

125 UIPreviewInteraction Creating the UIPreviewInteraction override func viewdidload() { super.viewdidload() } replypreviewinteraction = UIPreviewInteraction(view: view) replypreviewinteraction.delegate = self

126 UIPreviewInteraction Creating the UIPreviewInteraction override func viewdidload() { super.viewdidload() } replypreviewinteraction = UIPreviewInteraction(view: view) replypreviewinteraction.delegate = self

127 UIPreviewInteraction Starting the interaction previewinteractionshouldbegin() Preview

128 UIPreviewInteraction State transitions Preview

129 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) Preview

130 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) 0.80 Preview

131 UIPreviewInteraction State transitions 0.10 previewinteraction(didupdatepreviewtransition:ended:) Preview

132 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) Preview

133 UIPreviewInteraction Preview transition func previewinteraction(_ previewinteraction: UIPreviewInteraction, didupdatepreviewtransition transitionprogress: CGFloat, ended: Bool) { updateforpreview(progress: transitionprogress) if ended { completepreview() } }

134 UIPreviewInteraction Preview transition func previewinteraction(_ previewinteraction: UIPreviewInteraction, didupdatepreviewtransition transitionprogress: CGFloat, ended: Bool) { updateforpreview(progress: transitionprogress) if ended { completepreview() } }

135 UIPreviewInteraction Preview transition func previewinteraction(_ previewinteraction: UIPreviewInteraction, didupdatepreviewtransition transitionprogress: CGFloat, ended: Bool) { updateforpreview(progress: transitionprogress) if ended { completepreview() } }

136 UIPreviewInteraction Cancellation func previewinteractiondidcancel(_ previewinteraction: UIPreviewInteraction) { UIView.animate(withDuration: 0.4) { self.updateforpreview(progress: 0) self.resettoinitialappearance() } }

137 UIPreviewInteraction Cancellation func previewinteractiondidcancel(_ previewinteraction: UIPreviewInteraction) { UIView.animate(withDuration: 0.4) { self.updateforpreview(progress: 0) self.resettoinitialappearance() } }

138 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) Preview

139 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) Preview previewinteraction(didupdatepreviewtransition:ended:) previewinteraction(didupdatecommittransition:ended:) Commit

140 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) Preview previewinteraction(didupdatepreviewtransition:ended:) previewinteraction(didupdatecommittransition:ended:) Commit

141 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) 0.10 Preview previewinteraction(didupdatepreviewtransition:ended:) previewinteraction(didupdatecommittransition:ended:) Commit

142 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) Preview previewinteraction(didupdatepreviewtransition:ended:) previewinteraction(didupdatecommittransition:ended:) Commit

143 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) Preview 0.20 previewinteraction(didupdatepreviewtransition:ended:) previewinteraction(didupdatecommittransition:ended:) Commit

144 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) Preview 0.10 previewinteraction(didupdatepreviewtransition:ended:) previewinteraction(didupdatecommittransition:ended:) Commit

145 UIPreviewInteraction State transitions previewinteraction(didupdatepreviewtransition:ended:) Preview previewinteraction(didupdatepreviewtransition:ended:) previewinteraction(didupdatecommittransition:ended:) Commit

146 UIPreviewInteraction Commit transition func previewinteraction(_ previewinteraction: UIPreviewInteraction, didupdatecommittransition transitionprogress: CGFloat, ended: Bool) { updateforcommit(progress: transitionprogress) if ended { completecommit() } }

147 UIPreviewInteraction Commit transition func previewinteraction(_ previewinteraction: UIPreviewInteraction, didupdatecommittransition transitionprogress: CGFloat, ended: Bool) { updateforcommit(progress: transitionprogress) if ended { completecommit() } }

148 UIPreviewInteraction Commit transition func previewinteraction(_ previewinteraction: UIPreviewInteraction, didupdatecommittransition transitionprogress: CGFloat, ended: Bool) { updateforcommit(progress: transitionprogress) if ended { completecommit() } }

149 Low-Level Force API

150 Low-Level Force API Normalized access to force data

151 Low-Level Force API Normalized access to force data Properties on UITouch: force and maximumpossibleforce force maximumpossibleforce

152 Low-Level Force API Normalized access to force data Properties on UITouch: force and maximumpossibleforce force maximumpossibleforce Available on devices that support 3D Touch or Apple Pencil

153 Low-Level Force API Normalized access to force data Properties on UITouch: force and maximumpossibleforce force maximumpossibleforce Available on devices that support 3D Touch or Apple Pencil Leveraging Touch Input on ios Pacific Heights Thursday 10:00AM

154 Summary

155 Summary Home screen quick actions let you jump straight into action

156 Summary Home screen quick actions let you jump straight into action Peek and Pop allow you to quickly preview and navigate to content

157 Summary Home screen quick actions let you jump straight into action Peek and Pop allow you to quickly preview and navigate to content UIPreviewInteraction opens up new possibilities to make your app more immersive

158 Summary Home screen quick actions let you jump straight into action Peek and Pop allow you to quickly preview and navigate to content UIPreviewInteraction opens up new possibilities to make your app more immersive Users expect your apps to support 3D Touch

159 More Information

160 Related Sessions Advances in UIKit Animations and Transitions Pacific Heights Wednesday 5:00PM Leveraging Touch Input on ios Pacific Heights Thursday 10:00AM

161 Labs Cocoa Touch and 3D Touch Lab Frameworks Lab C Friday 10:30AM

162