Touch Bar Fundamentals

Transcription

1 Session App Frameworks #WWDC17 Touch Bar Fundamentals 211 Chris Dreessen John Tegtmeyer 2017 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2

3

4

5

6

7

8

9 Specifications P3 retina display Multi-Touch Context sensitivity Adaptive whitepoint and brightness

10 Design Goals Input device Don t hide functionality Don t distract

11 Core classes Responder chain NSTouchBarItem in depth

12 Core classes Responder chain NSTouchBarItem in depth

13 Core Classes NSTouchBarItem NSTouchBar NSResponder

14 NSTouchBarItem

15 NSTouchBarItem

16 NSTouchBarItem Attaches a view to the Touch Bar Intended to be subclassed Has a required identifier

17 NSTouchBar Has array of item identifiers

18 // Creating an NSTouchBar let sharkidentifier = NSTouchBarItem.Identifier( shark") let seaturtleidentifier = NSTouchBarItem.Identifier("sea turtle ) let bar = NSTouchBar() bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier]

19 // Creating an NSTouchBar let sharkidentifier = NSTouchBarItem.Identifier( shark") let seaturtleidentifier = NSTouchBarItem.Identifier("sea turtle ) let bar = NSTouchBar() bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier]

20 // Creating an NSTouchBar let sharkidentifier = NSTouchBarItem.Identifier( shark") let seaturtleidentifier = NSTouchBarItem.Identifier("sea turtle ) let bar = NSTouchBar() bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier]

21 NSTouchBar Has array of item identifiers Looks up items by identifiers templateitems delegate

22 // Using NSTouchBar.templateItems let sharkidentifier = NSTouchBarItem.Identifier("shark") let seaturtleidentifier = NSTouchBarItem.Identifier("sea turtle ) let bar = NSTouchBar() bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] let sharkitem = NSCustomTouchBarItem(identifier: sharkidentifier) sharkitem.view = NSButton(title: "", target: nil, action: nil) let turtleitem = NSCustomTouchBarItem(identifier: seaturtleidentifier) turtleitem.view = NSButton(title: " ", target: nil, action: nil) bar.templateitems = [sharkitem, turtleitem]

23 // Using NSTouchBar.templateItems let sharkidentifier = NSTouchBarItem.Identifier("shark") let seaturtleidentifier = NSTouchBarItem.Identifier("sea turtle ) let bar = NSTouchBar() bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] let sharkitem = NSCustomTouchBarItem(identifier: sharkidentifier) sharkitem.view = NSButton(title: "", target: nil, action: nil) let turtleitem = NSCustomTouchBarItem(identifier: seaturtleidentifier) turtleitem.view = NSButton(title: " ", target: nil, action: nil) bar.templateitems = [sharkitem, turtleitem]

24 // Using NSTouchBar.templateItems let sharkidentifier = NSTouchBarItem.Identifier("shark") let seaturtleidentifier = NSTouchBarItem.Identifier("sea turtle ) let bar = NSTouchBar() bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] let sharkitem = NSCustomTouchBarItem(identifier: sharkidentifier) sharkitem.view = NSButton(title: "", target: nil, action: nil) let turtleitem = NSCustomTouchBarItem(identifier: seaturtleidentifier) turtleitem.view = NSButton(title: " ", target: nil, action: nil) bar.templateitems = [sharkitem, turtleitem]

25 // Using NSTouchBar.templateItems let sharkidentifier = NSTouchBarItem.Identifier("shark") let seaturtleidentifier = NSTouchBarItem.Identifier("sea turtle ) let bar = NSTouchBar() bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] let sharkitem = NSCustomTouchBarItem(identifier: sharkidentifier) sharkitem.view = NSButton(title: "", target: nil, action: nil) let turtleitem = NSCustomTouchBarItem(identifier: seaturtleidentifier) turtleitem.view = NSButton(title: " ", target: nil, action: nil) bar.templateitems = [sharkitem, turtleitem]

26

27 // Implementing an NSTouchBarDelegate class MyTouchBarDelegate: NSObject, NSTouchBarDelegate { func touchbar(_ touchbar: NSTouchBar, makeitemforidentifier identifier: NSTouchBarItem.Identifier) -> NSTouchBarItem? { switch identifier { case sharkidentifier: let item = NSCustomTouchBarItem(identifier: identifier) item.view = NSButton(title: "", target: nil, action: nil) return item case seaturtleidentifier: let item = NSCustomTouchBarItem(identifier: identifier) item.view = NSButton(title: " ", target: nil, action: nil) return item default: return nil } } }

28 // Implementing an NSTouchBarDelegate class MyTouchBarDelegate: NSObject, NSTouchBarDelegate { func touchbar(_ touchbar: NSTouchBar, makeitemforidentifier identifier: NSTouchBarItem.Identifier) -> NSTouchBarItem? { switch identifier { case sharkidentifier: let item = NSCustomTouchBarItem(identifier: identifier) item.view = NSButton(title: "", target: nil, action: nil) return item case seaturtleidentifier: let item = NSCustomTouchBarItem(identifier: identifier) item.view = NSButton(title: " ", target: nil, action: nil) return item default: return nil } } }

29 // Implementing an NSTouchBarDelegate class MyTouchBarDelegate: NSObject, NSTouchBarDelegate { func touchbar(_ touchbar: NSTouchBar, makeitemforidentifier identifier: NSTouchBarItem.Identifier) -> NSTouchBarItem? { switch identifier { case sharkidentifier: let item = NSCustomTouchBarItem(identifier: identifier) item.view = NSButton(title: "", target: nil, action: nil) return item case seaturtleidentifier: let item = NSCustomTouchBarItem(identifier: identifier) item.view = NSButton(title: " ", target: nil, action: nil) return item default: return nil } } }

30 NSTouchBar Has array of item identifiers Looks up items by identifiers templateitems delegate Customizable

31 // Making an NSTouchBar customizable bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier]

32 // Making an NSTouchBar customizable NSApp.isAutomaticCustomizeTouchBarMenuItemEnabled = true bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] bar.customizationidentifier = NSTouchBar.CustomizationIdentifier("ocean animals") bar.customizationalloweditemidentifiers = [sharkidentifier, seaturtleidentifier]

33 // Making an NSTouchBar customizable NSApp.isAutomaticCustomizeTouchBarMenuItemEnabled = true bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] bar.customizationidentifier = NSTouchBar.CustomizationIdentifier("ocean animals") bar.customizationalloweditemidentifiers = [sharkidentifier, seaturtleidentifier]

34 // Making an NSTouchBar customizable NSApp.isAutomaticCustomizeTouchBarMenuItemEnabled = true bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] bar.customizationidentifier = NSTouchBar.CustomizationIdentifier("ocean animals") bar.customizationalloweditemidentifiers = [sharkidentifier, seaturtleidentifier, angelfishidentifier, dolphinidentifier, octopusidentifier, crabidentifier, squididentifier, fishidentifier, pufferfishidentifier, whaleidentifier]

35 // Making an NSTouchBar customizable NSApp.isAutomaticCustomizeTouchBarMenuItemEnabled = true bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] bar.customizationidentifier = NSTouchBar.CustomizationIdentifier("ocean animals") bar.customizationalloweditemidentifiers = [sharkidentifier, seaturtleidentifier] seaturtleidentifier, angelfishidentifier, dolphinidentifier, octopusidentifier, crabidentifier, squididentifier, fishidentifier, pufferfishidentifier, whaleidentifier] bar.customizationrequireditemidentifiers = [seaturtleidentifier]

36 NSTouchBarProvider Protocol Connects NSTouchBars to the Touch Bar Implemented by delegates and responders extension NSTouchBarProvider : NSObject { } let touchbar: NSTouchBar?

37 // Providing an NSTouchBar from an application delegate using the NSTouchBarProvider protocol class ApplicationDelegate: NSObject, NSApplicationDelegate, NSTouchBarProvider { lazy var touchbar: NSTouchBar? = { let item = NSCustomTouchBarItem(identifier:NSTouchBarItem.Identifier("shark")) item.view = NSButton(title: "", target: nil, action: nil) let bar = NSTouchBar() bar.defaultitemidentifiers = [NSTouchBarItem.Identifier("shark")] bar.templateitems = [item] } }() return bar

38 // Providing an NSTouchBar from an application delegate using the NSTouchBarProvider protocol class ApplicationDelegate: NSObject, NSApplicationDelegate, NSTouchBarProvider { lazy var touchbar: NSTouchBar? = { let item = NSCustomTouchBarItem(identifier:NSTouchBarItem.Identifier("shark")) item.view = NSButton(title: "", target: nil, action: nil) let bar = NSTouchBar() bar.defaultitemidentifiers = [NSTouchBarItem.Identifier("shark")] bar.templateitems = [item] } }() return bar

39 NSResponder Has a settable touchbar property class NSResponder : NSObject, NSTouchBarProvider { } var touchbar: NSTouchBar? Subclasses can use.maketouchbar()

40 // Providing an NSTouchBar from an NSResponder subclass class MyWindowController: NSWindowController, NSTouchBarDelegate { override func maketouchbar() -> NSTouchBar? { let touchbar = NSTouchBar() touchbar.delegate = self touchbar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] return touchbar } }

41 // Providing an NSTouchBar from an NSResponder subclass class MyWindowController: NSWindowController, NSTouchBarDelegate { override func maketouchbar() -> NSTouchBar? { let touchbar = NSTouchBar() touchbar.delegate = self touchbar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] return touchbar } }

42 Interface Builder

43 Interface Builder

44 Interface Builder

45 Interface Builder

46 Interface Builder

47 Interface Builder

48 Core classes Responder chain NSTouchBarItem in depth

49 Responder Chain NSResponder nextresponder property Linked to form chains

50 Responder Chain NSEvent

51 Responder Chain NSEvent b Application

52 Responder Chain b Application NSEvent

53 Responder Chain b Application NSEvent

54 Responder Chain b Application NSEvent a Key Window

55 Responder Chain b Application a Key Window NSEvent

56 Responder Chain b Application a Key Window c First Responder NSEvent

57 Responder Chain b Application a Key Window c First Responder NSEvent

58 Responder Chain B Application A Key Window C First Responder NSEvent

59 Responder Chain B Application D View A Key Window C First Responder NSEvent

60 Responder Chain B Application D View NSEvent A Key Window C First Responder

61 Responder Chain B Application D View NSEvent A Key Window C First Responder

62 Responder Chain E View Controller B Application D View NSEvent A Key Window C First Responder

63 Responder Chain E View Controller B Application NSEvent D View A Key Window C First Responder

64 Responder Chain E View Controller B Application NSEvent D View A Key Window C First Responder

65 Responder Chain E View Controller B Application D View A Key Window C First Responder NSEvent

66 Responder Chain E View Controller B Application D View A Key Window C First Responder NSEvent

67 Responder Chain E View Controller B Application D View A Key Window C First Responder NSEvent

68 Responder Chain E View Controller B Application NSEvent D View A Key Window C First Responder

69 Responder Chain E View Controller B Application D View A Key Window C First Responder

70 Responder Chain E View Controller B Application D View A Key Window C First Responder

71 Responder Chain E View Controller B Application D View A Key Window C First Responder esc

72 A Special Note About Views and View Controllers To be the first responder of a window, views must opt-in class MyViewSubclass: NSView { func override acceptsfirstresponder -> Bool { return true } }

73 Responder Chain Multiple NSTouchBar instances Closest to keyboard input wins Many system controls have automatic support

74 NSTouchBarItemIdentifier.otherItemsProxy A special item identifier Incorporates items from other NSTouchBar instances

75

76

77 Touch Bar Window Controller s NSTouchBar.otherItemsProxy Recipient Field s NSTouchBar

78 Touch Bar Window Controller s NSTouchBar.otherItemsProxy Edit View s NSTouchBar

79

80 NSTouchBarItemIdentifier.otherItemsProxy Excluding an NSTouchBar Mail Viewer No window Viewer window

81 Space Item Identifiers

82 Space Item Identifiers no space

83 Space Item Identifiers.fixedSpaceLarge

84 Space Item Identifiers.flexibleSpace

85 Flexible Space

86 Flexible Space

87 Principal Item Identifier

88 Principal Item Identifier NSTouchBar.principalItemIdentifier Physically centered

89 // Using NSTouchBar.principalItemIdentifier let sharkidentifier = NSTouchBarItem.Identifier("shark") let seaturtleidentifier = NSTouchBarItem.Identifier("sea turtle") let bar = NSTouchBar() bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] let sharkitem = NSCustomTouchBarItem(identifier: sharkidentifier) sharkitem.view = NSButton(title: "", target: nil, action: nil) let turtleitem = NSCustomTouchBarItem(identifier: seaturtleidentifier) turtleitem.view = NSButton(title: " ", target: nil, action: nil) bar.templateitems = [sharkitem, turtleitem] bar.principalitemidentifier = sharkidentifier

90 // Using NSTouchBar.principalItemIdentifier let sharkidentifier = NSTouchBarItem.Identifier("shark") let seaturtleidentifier = NSTouchBarItem.Identifier("sea turtle") let bar = NSTouchBar() bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] let sharkitem = NSCustomTouchBarItem(identifier: sharkidentifier) sharkitem.view = NSButton(title: "", target: nil, action: nil) let turtleitem = NSCustomTouchBarItem(identifier: seaturtleidentifier) turtleitem.view = NSButton(title: " ", target: nil, action: nil) bar.templateitems = [sharkitem, turtleitem] bar.principalitemidentifier = sharkidentifier

91 // Using NSTouchBar.principalItemIdentifier let sharkidentifier = NSTouchBarItem.Identifier("shark") let seaturtleidentifier = NSTouchBarItem.Identifier("sea turtle") let bar = NSTouchBar() bar.defaultitemidentifiers = [sharkidentifier, seaturtleidentifier] let sharkitem = NSCustomTouchBarItem(identifier: sharkidentifier) sharkitem.view = NSButton(title: "", target: nil, action: nil) let turtleitem = NSCustomTouchBarItem(identifier: seaturtleidentifier) turtleitem.view = NSButton(title: " ", target: nil, action: nil) bar.templateitems = [sharkitem, turtleitem] bar.principalitemidentifier = seaturtleidentifier

92 Core classes Responder chain NSTouchBarItem in Depth

93 NSTouchBarItem in Depth John Tegtmeyer

94 NSTouchBarItem class NSTouchBarItem : NSObject, NSCoding { var identifier: NSTouchBarItem.Identifier { get } var view: NSView? { get } var viewcontroller: NSViewController? { get } } var customizationlabel: String { get }

95 NSTouchBarItem class NSTouchBarItem : NSObject, NSCoding { var identifier: NSTouchBarItem.Identifier { get } var view: NSView? { get } var viewcontroller: NSViewController? { get } } var customizationlabel: String { get }

96 NSTouchBarItem class NSTouchBarItem : NSObject, NSCoding { var identifier: NSTouchBarItem.Identifier { get } var view: NSView? { get } var viewcontroller: NSViewController? { get } } var customizationlabel: String { get }

97 NSTouchBarItem class NSTouchBarItem : NSObject, NSCoding { var identifier: NSTouchBarItem.Identifier { get } var view: NSView? { get } var viewcontroller: NSViewController? { get } } var customizationlabel: String { get }

98 NSTouchBarItem class NSTouchBarItem : NSObject, NSCoding { var identifier: NSTouchBarItem.Identifier { get } var view: NSView? { get } var viewcontroller: NSViewController? { get } } var customizationlabel: String { get }

99 NSTouchBarItem Constraint-based sizing intrinsiccontentsize Inequality constraints Advanced Touch Bar Grand Ballroom A Wednesday 5:10PM

100 NSCustomTouchBarItem NSPopoverTouchBarItem NSSliderTouchBarItem NSGroupTouchBarItem Other Items

101 NSCustomTouchBarItem NSPopoverTouchBarItem NSSliderTouchBarItem NSGroupTouchBarItem Other Items

102 NSCustomTouchBarItem Set view or view controller Convenience constructors Button Segmented Control Label Scrubber

103 // customtouchbaritem : NSButton let buttonitem = NSCustomTouchBarItem(identifier: identifier) buttonitem.view = NSButton(title: "Hello World!", target: nil, action: nil)

104 // customtouchbaritem : NSSegmentedControl let segmenteditem = NSCustomTouchBarItem(identifier: identifier) segmenteditem.view = NSSegmentedControl(labels: ["foo", "bar", "buzz"], trackingmode:.selectone, target: nil, action: nil)

105 NSCustomTouchBarItem NSPopoverTouchBarItem NSSliderTouchBarItem NSGroupTouchBarItem Other Items

106 NSPopoverTouchBarItem Collapsed representation Popover NSTouchBar

107 NSPopoverTouchBarItem Default class NSPopoverTouchBarItem: NSTouchBarItem { var collapsedrepresentationimage: NSImage? } var collapsedrepresentationlabel: String

108 NSPopoverTouchBarItem Custom class NSPopoverTouchBarItem: NSTouchBarItem { var collapsedrepresentation: NSView func showpopover(_ sender: Any?) } func dismisspopover(_ sender: Any?)

109 NSPopoverTouchBarItem Touch and show

110 NSPopoverTouchBarItem Press and hold

111 NSPopoverTouchBarItem Touch and show Press and hold

112 NSPopoverTouchBarItem class NSPopoverTouchBarItem: NSTouchBarItem { var popovertouchbar: NSTouchBar } var pressandholdtouchbar: NSTouchBar?

113 NSCustomTouchBarItem NSPopoverTouchBarItem NSSliderTouchBarItem NSGroupTouchBarItem Other Items

114 NSSliderTouchBarItem Slider Value accessories Label

115 NSSliderTouchBarItem Slider Value accessories Label

116 NSSliderTouchBarItem Slider Value accessories Label

117 NSSliderTouchBarItem Slider Value accessories Label

118 NSSliderTouchBarItem Press and hold

119 NSSliderTouchBarItem Press and hold

120 // NSSliderTouchBarItem with value accessories and a label let slideritem = NSSliderTouchBarItem(identifier: identifier) slideritem.minimumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateLeftTemplate)!) slideritem.maximumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateRightTemplate)!) slideritem.label = "Rotation"

121 // NSSliderTouchBarItem with value accessories and a label let slideritem = NSSliderTouchBarItem(identifier: identifier) slideritem.minimumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateLeftTemplate)!) slideritem.maximumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateRightTemplate)!) slideritem.label = "Rotation"

122 // NSSliderTouchBarItem with value accessories and a label let slideritem = NSSliderTouchBarItem(identifier: identifier) slideritem.minimumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateLeftTemplate)!) slideritem.maximumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateRightTemplate)!) slideritem.label = "Rotation"

123 // NSSliderTouchBarItem with value accessories and a label let slideritem = NSSliderTouchBarItem(identifier: identifier) slideritem.minimumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateLeftTemplate)!) slideritem.maximumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateRightTemplate)!) slideritem.label = "Rotation"

124 // NSSliderTouchBarItem with value accessories and a label let slideritem = NSSliderTouchBarItem(identifier: identifier) slideritem.minimumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateLeftTemplate)!) slideritem.maximumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateRightTemplate)!) slideritem.label = "Rotation"

125 // NSSliderTouchBarItem with value accessories and a label let slideritem = NSSliderTouchBarItem(identifier: identifier) slideritem.minimumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateLeftTemplate)!) slideritem.maximumvalueaccessory = NSSliderAccessory(image: NSImage(named:.touchBarRotateRightTemplate)!) slideritem.label = "Rotation" slideritem.slider.widthanchor.constraint(equaltoconstant: 200).isActive = true

126 NSCustomTouchBarItem NSPopoverTouchBarItem NSSliderTouchBarItem NSGroupTouchBarItem Other Items

127 NSGroupTouchBarItem class NSGroupTouchBarItem: NSTouchBarItem { convenience init(identifier: NSTouchBarItem.Identifier, items: [NSTouchBarItem]) } var grouptouchbar: NSTouchBar

128 NSGroupTouchBarItem Center multiple items Customization Localization

129 NSGroupTouchBarItem Center multiple items

130 NSGroupTouchBarItem Non-customizable

131 NSGroupTouchBarItem Non-customizable

132 NSGroupTouchBarItem Customizable Within-group reordering Items remain within group

133 NSGroupTouchBarItem Customizable Within-group reordering Items remain within group

134 NSGroupTouchBarItem Localization FaceTime with Bird Full Screen End Mute

135 NSGroupTouchBarItem Localization FaceTime with Bird Full Screen End Mute

136 NSGroupTouchBarItem Localization معwith FaceTime FaceTime إجراء Bird كتمMute الصوت إنهاء End ملء Screen الشاشة Full

137 NSGroupTouchBarItem Localization Control Strip and esc key do not flip left-to-right Opt-in per group

138 NSGroupTouchBarItem Localization NEW Control Strip and esc key do not flip left-to-right Opt-in per group groupitem.groupuserinterfacelayoutdirection = NSApp.userInterfaceLayoutDirection

139 NSGroupTouchBarItem Localization Design for variable length strings Rigid constraints can cause clipping

140 NSGroupTouchBarItem Localization Design for variable length strings Rigid constraints can cause clipping

141 NSGroupTouchBarItem Localization Design for variable length strings Rigid constraints can cause clipping Advanced Touch Bar Grand Ballroom A Wednesday 5:10PM

142 NSCustomTouchBarItem NSPopoverTouchBarItem NSSliderTouchBarItem NSGroupTouchBarItem Other Items

143 NSColorPickerTouchBarItem

144 NSSharingServicePickerTouchBarItem

145 NSScrubber Advanced Touch Bar Grand Ballroom A Wednesday 5:10PM

146 Next Steps Adopt NSTouchBar User customization Localization

147 More Information

148 Related Sessions Choosing the Right Cocoa Container View Grand Ballroom B Wednesday 3:10PM Advanced Touch Bar Grand Ballroom A Wednesday 5:10PM

149 Labs Cocoa Lab Technology Lab C Wed 11:00AM-1:00PM Cocoa Touch Bar Lab Technology Lab C Thurs 9:00AM-11:00AM Cocoa Lab Technology Lab B Fri 1:50PM-3:20PM

150