What s New in tvos 12

Transcription

1 #WWDC18 What s New in tvos 12 Session 208 Hans Kim, tvos Engineering 2018 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Agenda

3 Agenda Password AutoFill

4 Agenda Password AutoFill Focus Engine enhancement

5 Agenda Password AutoFill Focus Engine enhancement UI patterns

6 Password AutoFill Alex Sanciangco, tvos Engineering Conrad Shultz, tvos Engineering

7

8 Demo

9

10 Ensure QuickType bar appears

11 Ensure QuickType bar appears Get your app s credentials on the QuickType bar

12 Ensure QuickType bar appears Get your app s credentials on the QuickType bar Enable one-tap sign in

13 Ensure QuickType Bar Appears Adopt UITextContentType

14 Ensure QuickType Bar Appears Adopt UITextContentType tvos will try to automatically detect username and password fields

15 Ensure QuickType Bar Appears Adopt UITextContentType tvos will try to automatically detect username and password fields Explicitly mark the text field types

16 Ensure QuickType Bar Appears Adopt UITextContentType tvos will try to automatically detect username and password fields Explicitly mark the text field types let usernamefield = UITextField() let passwordfield = UITextField() usernamefield.textcontenttype =.username passwordfield.textcontenttype =.password

17

18

19

20

21 QuickType Bar Suggestions Associated Domains

22 QuickType Bar Suggestions Associated Domains Powers many other features

23 QuickType Bar Suggestions Associated Domains Powers many other features Strong relationship between app and website

24 QuickType Bar Suggestions Associated Domains Powers many other features Strong relationship between app and website Introducing Password AutoFill for Apps WWDC 2017

25

26

27 Enable One-Tap Sign In Implement preferredfocusenvironments

28 Enable One-Tap Sign In Implement preferredfocusenvironments AutoFill will perform a focused button s action after filling

29 Enable One-Tap Sign In Implement preferredfocusenvironments AutoFill will perform a focused button s action after filling Implement preferredfocusenvironments to provide your login button for focus

30 // Sample Implementation override var preferredfocusenvironments: [UIFocusEnvironment] { if let username = usernametextfield.text, let password = passwordtextfield.text { return [loginbutton] } else { return [usernametextfield] } }

31 // Sample Implementation override var preferredfocusenvironments: [UIFocusEnvironment] { if let username = usernametextfield.text, let password = passwordtextfield.text { return [loginbutton] } else { return [usernametextfield] } }

32 // Sample Implementation override var preferredfocusenvironments: [UIFocusEnvironment] { if let username = usernametextfield.text, let password = passwordtextfield.text { return [loginbutton] } else { return [usernametextfield] } }

33 // Sample Implementation override var preferredfocusenvironments: [UIFocusEnvironment] { if let username = usernametextfield.text, let password = passwordtextfield.text { return [loginbutton] } else { return [usernametextfield] } }

34 // Sample Implementation override var preferredfocusenvironments: [UIFocusEnvironment] { if let username = usernametextfield.text, let password = passwordtextfield.text { return [loginbutton] } else { return [usernametextfield] } }

35 Summary

36 Summary Reduce the friction of signing into your app with Password AutoFill

37 Summary Reduce the friction of signing into your app with Password AutoFill Tag your text fields with appropriate UITextContentType

38 Summary Reduce the friction of signing into your app with Password AutoFill Tag your text fields with appropriate UITextContentType Adopt Associated Domains

39 Summary Reduce the friction of signing into your app with Password AutoFill Tag your text fields with appropriate UITextContentType Adopt Associated Domains Implement preferredfocusenvironments

40 Focus Enhancements Ada Turner, tvos Engineering

41 Focus on tvos

42 Focus on tvos

43 Focus on tvos UIKit

44 Focus on tvos UIKit SpriteKit

45 Focus on tvos UIKit SpriteKit SceneKit

46 NEW Focus Engine now supports apps regardless of how they are rendered.

47 What s Included

48 What s Included State management

49 What s Included State management Focus item geometry

50 What s Included State management Focus item geometry Accessibility

51 What s Included State management Focus item geometry Accessibility tvos s native feel Momentum during swipes Scrolling inertia Focus movement hinting

52 Focus Components

53 Focus Components UIFocusEnvironment

54 Focus Components UIFocusEnvironment UIFocusItem

55 Focus Components UIFocusEnvironment UIFocusSystem UIFocusItem

56 Focus Components UIFocusEnvironment UIFocusSystem UIFocusItem Focus Interaction in tvos 11 WWDC 2017

57 New Focus Features

58 New Focus Features UIFocusEnvironment UIFocusSystem UIFocusItem

59 New Focus Features NEW UIFocusEnvironment UIFocusSystem UIFocusItem

60 New Focus Features NEW UIFocusItemContainer UIFocusEnvironment UIFocusSystem UIFocusItem

61 New Focus Features NEW UIFocusItemContainer UIFocusEnvironment UIFocusSystem UIFocusItem

62 New Focus Features NEW UIFocusItemContainer UIFocusEnvironment UIFocusSystem UIFocusItemScrollable Container UIFocusItem

63 New Focus Features NEW UIFocusItemContainer UIFocusEnvironment UIFocusSystem UIFocusItemScrollable Container UIFocusItem UIFocusMovementHint

64 Adopting New Focus API

65 UIFocusEnvironment NEW UIFocusEnvironment

66 UIFocusEnvironment NEW UIFocusEnvironment Hooking into the focus engine weak var parentfocusenvironment: UIFocusEnvironment? var focusitemcontainer: UIFocusItemContainer?

67 UIFocusEnvironment NEW UIFocusEnvironment Hooking into the focus engine weak var parentfocusenvironment: UIFocusEnvironment? var focusitemcontainer: UIFocusItemContainer? Controlling and reacting to focus updates var preferredfocusenvironments: [UIFocusEnvironment] func shouldupdatefocus(in context: UIFocusUpdateContext) -> Bool func didupdatefocus(in context: UIFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator)

68 UIFocusEnvironment NEW UIFocusEnvironment Focus updating functions

69 UIFocusEnvironment NEW UIFocusEnvironment Focus updating functions func setneedsfocusupdate() { } UIFocusSystem(for: self)?.requestfocusupdate(to: self) func updatefocusifneeded() { } UIFocusSystem(for: self)?.updatefocusifneeded()

70 UIFocusItemContainer NEW UIFocusEnvironment UIFocusItemContainer

71 UIFocusItemContainer NEW UIFocusEnvironment Provide a coordinatespace UIFocusItemContainer UIView provides itself

72 UIFocusItemContainer NEW UIFocusEnvironment Provide a coordinatespace UIFocusItemContainer UIView provides itself Implement focusitems(in rect: CGRect) Return Focus Items whose frames intersect with rect rect is expressed in coordinatespace Focus Items frames must also be expressed in coordinatespace

73 UIFocusItem NEW UIFocusEnvironment UIFocusItemContainer UIFocusItem UIFocusItem UIFocusItem

74 UIFocusItem NEW UIFocusEnvironment Inherits from UIFocusEnvironment UIFocusItemContainer UIFocusItem UIFocusItem UIFocusItem

75 UIFocusItem NEW UIFocusEnvironment Inherits from UIFocusEnvironment UIFocusItemContainer Implement canbecomefocused UIFocusItem UIFocusItem UIFocusItem

76 UIFocusItem NEW UIFocusEnvironment Inherits from UIFocusEnvironment UIFocusItemContainer Implement canbecomefocused UIFocusItem Implement didhintfocusmovement(_ hint: UIFocusMovementHint) UIFocusItem UIFocusItem

77 UIFocusItem NEW UIFocusEnvironment Inherits from UIFocusEnvironment UIFocusItemContainer Implement canbecomefocused UIFocusItem Implement didhintfocusmovement(_ hint: UIFocusMovementHint) Provide a frame UIFocusItem Same coordinate space as its containing UIFocusItemContainer UIFocusItem

78 UIFocusMovementHint NEW 1 class UIFocusMovementHint : NSObject, NSCopying { var movementdirection: CGVector { get } var perspectivetransform: CATransform3D { get } var rotation: CGVector { get } var translation: CGVector { get } -1 1 var interactiontransform: CATransform3D { get } } -1

79 UIFocusMovementHint NEW 1 class UIFocusMovementHint : NSObject, NSCopying { var movementdirection: CGVector { get } var perspectivetransform: CATransform3D { get } var rotation: CGVector { get } var translation: CGVector { get } -1 1 var interactiontransform: CATransform3D { get } } -1

80 UIFocusMovementHint NEW 1 class UIFocusMovementHint : NSObject, NSCopying { var movementdirection: CGVector { get } var perspectivetransform: CATransform3D { get } var rotation: CGVector { get } var translation: CGVector { get } -1 1 var interactiontransform: CATransform3D { get } }. -1

81 UIFocusMovementHint NEW 1 class UIFocusMovementHint : NSObject, NSCopying { var movementdirection: CGVector { get } var perspectivetransform: CATransform3D { get } var rotation: CGVector { get } var translation: CGVector { get } -1 1 var interactiontransform: CATransform3D { get } }. -1

82 UIFocusMovementHint NEW 1 class UIFocusMovementHint : NSObject, NSCopying { var movementdirection: CGVector { get } var perspectivetransform: CATransform3D { get } var rotation: CGVector { get } var translation: CGVector { get } -1 1 var interactiontransform: CATransform3D { get } } -1

83 UIFocusMovementHint NEW 1 class UIFocusMovementHint : NSObject, NSCopying { var movementdirection: CGVector { get } var perspectivetransform: CATransform3D { get } var rotation: CGVector { get } var translation: CGVector { get } -1 1 var interactiontransform: CATransform3D { get } } -1

84 UIFocusMovementHint NEW 1 class UIFocusMovementHint : NSObject, NSCopying { var movementdirection: CGVector { get } var perspectivetransform: CATransform3D { get } var rotation: CGVector { get } var translation: CGVector { get } -1 1 var interactiontransform: CATransform3D { get } } -1

85 UIFocusItemScrollableContainer NEW UIFocusEnvironment ScrollableContainer UIFocusItem UIFocusItem UIFocusItem UIFocusItem

86 UIFocusItemScrollableContainer NEW UIFocusEnvironment Inherits from UIFocusItemContainer ScrollableContainer UIFocusItem UIFocusItem UIFocusItem UIFocusItem

87 UIFocusItemScrollableContainer NEW UIFocusEnvironment Inherits from UIFocusItemContainer Three additional properties ScrollableContainer UIFocusItem UIFocusItem UIFocusItem UIFocusItem

88 UIFocusItemScrollableContainer NEW UIFocusEnvironment Inherits from UIFocusItemContainer Three additional properties ScrollableContainer UIFocusItem var contentoffset: CGPoint { get set } UIFocusItem UIFocusItem UIFocusItem

89 UIFocusItemScrollableContainer NEW UIFocusEnvironment Inherits from UIFocusItemContainer Three additional properties ScrollableContainer UIFocusItem var contentoffset: CGPoint { get set } var contentsize: CGSize { get } UIFocusItem UIFocusItem UIFocusItem

90 UIFocusItemScrollableContainer NEW UIFocusEnvironment Inherits from UIFocusItemContainer Three additional properties ScrollableContainer UIFocusItem var contentoffset: CGPoint { get set } var contentsize: CGSize { get } UIFocusItem var visiblesize: CGSize { get } UIFocusItem UIFocusItem

91 UIFocusItemScrollableContainer NEW UIFocusEnvironment Inherits from UIFocusItemContainer Three additional properties ScrollableContainer UIFocusItem var contentoffset: CGPoint { get set } var contentsize: CGSize { get } UIFocusItem var visiblesize: CGSize { get } contentoffset is set automatically UIFocusItem UIFocusItem

92 UIFocusItemScrollableContainer NEW UIFocusEnvironment Inherits from UIFocusItemContainer Three additional properties ScrollableContainer UIFocusItem var contentoffset: CGPoint { get set } var contentsize: CGSize { get } UIFocusItem var visiblesize: CGSize { get } contentoffset is set automatically UIFocusItem UIFocusItem

93 Accessibility

94 Accessibility It s incredibly easy!

95 Accessibility It s incredibly easy! Implement UIFocusItemContainer.focusItems(in rect: CGRect)

96 Accessibility It s incredibly easy! Implement UIFocusItemContainer.focusItems(in rect: CGRect) Set accessibilitylabel and accessibilityhint on your Focus Items

97 Accessibility It s incredibly easy! Implement UIFocusItemContainer.focusItems(in rect: CGRect) Set accessibilitylabel and accessibilityhint on your Focus Items What s New in Accessibility WWDC 2016

98 Demo Focus-powered Metal app Paul Schneider, tvos Engineering

99 Summary

100 Summary Implement custom UIFocusEnvironments and UIFocusItems

101 Summary Implement custom UIFocusEnvironments and UIFocusItems Even with non-uikit components!

102 Summary Implement custom UIFocusEnvironments and UIFocusItems Even with non-uikit components! Support Focus movement with UIFocusItemContainer

103 Summary Implement custom UIFocusEnvironments and UIFocusItems Even with non-uikit components! Support Focus movement with UIFocusItemContainer Hint at interaction with UIFocusMovementHint

104 Summary Implement custom UIFocusEnvironments and UIFocusItems Even with non-uikit components! Support Focus movement with UIFocusItemContainer Hint at interaction with UIFocusMovementHint Automatically scroll with UIFocusItemScrollableContainer

105 Summary Implement custom UIFocusEnvironments and UIFocusItems Even with non-uikit components! Support Focus movement with UIFocusItemContainer Hint at interaction with UIFocusMovementHint Automatically scroll with UIFocusItemScrollableContainer Full accessibility support

106 Summary Implement custom UIFocusEnvironments and UIFocusItems Even with non-uikit components! Support Focus movement with UIFocusItemContainer Hint at interaction with UIFocusMovementHint Automatically scroll with UIFocusItemScrollableContainer Full accessibility support Available in the Developer Beta

107 UI Patterns Hans Kim, tvos Engineering

108

109

110 Text Scrolling Marquee

111 Text Scrolling Marquee Present variable-length strings in fixed geometry

112 Text Scrolling Marquee NEW Present variable-length strings in fixed geometry Visually highlights current focus

113

114

115 UILabel Marquee label.enablesmarqueewhenancestorfocused = true

116 UILabel Marquee NEW label.enablesmarqueewhenancestorfocused = true

117 NEW Label Label Label

118 NEW Label Label Label

119 NEW Label string too long for label string too lon Label

120 NEW Label string too long for label string too lon Label

121

122

123

124

125

126

127

128

129 TVUIKit

130 TVUIKit NEW

131 Poster NEW

132 NEW Poster Caption Button

133 Poster Caption Button Card NEW

134 Poster Caption Button Card Monogram NEW

135

136

137 TVPosterView NEW

138 TVPosterView NEW image

139 TVPosterView NEW image title subtitle

140 TVPosterView NEW image title subtitle

141 TVPosterView NEW image title subtitle

142 TVPosterView NEW image title subtitle

143 TVPosterView NEW image title subtitle

144 TVPosterView NEW image title subtitle

145 TVPosterView NEW image title subtitle

146 TVPosterView NEW image title subtitle

147

148

149

150

151 TVCaptionButtonView NEW

152 TVCaptionButtonView NEW content

153 TVCaptionButtonView NEW content title subtitle

154 TVCaptionButtonView NEW content title subtitle

155 TVCaptionButtonView NEW title subtitle

156 TVCaptionButtonView NEW $9.99 title subtitle

157 TVCaptionButtonView NEW $9.99 title subtitle

158 TVCaptionButtonView NEW $9.99 title subtitle

159 TVCaptionButtonView NEW $9.99 title subtitle

160 TVCaptionButtonView NEW $9.99 title subtitle

161 TVCaptionButtonView NEW $9.99 title subtitle

162

163

164

165

166 TVCardView NEW

167 TVCardView NEW

168 TVCardView NEW

169 TVCardView NEW

170 TVCardView NEW

171

172

173

174

175 TVMonogramView NEW

176 TVMonogramView NEW content image

177 TVMonogramView NEW content image title subtitle

178 TVMonogramView NEW title subtitle

179 TVMonogramView NEW John Appleseed title subtitle

180 TVMonogramView NEW JA John Appleseed title subtitle

181 TVMonogramView NEW JA title subtitle

182 TVMonogramView NEW JA title subtitle

183 TVMonogramView NEW title subtitle

184 TVMonogramView NEW title subtitle

185

186

187 NEW

188 Poster Caption Button Card Monogram NEW

189 Common Theme NEW content

190 Common Theme NEW header content footer

191 Common Theme NEW header content footer

192 Common Theme NEW header content footer

193 TVPosterView TVCaptionButton TVCardView TVMonogramView NEW

194 TVPosterView TVCaptionButton TVCardView TVMonogramView NEW

195 NEW TVLockupView TVPosterView TVCaptionButton TVCardView TVMonogramView

196 TVLockupView NEW header content footer

197 TVLockupView NEW header content footer

198 TVLockupView NEW header content footer

199 TVLockupView NEW header content footer

200 TVLockupView NEW header content footer

201 TVLockupView Custom content NEW

202 TVLockupView Custom content 12.0, *) public protocol TVLockupViewComponent : NSObjectProtocol { optional public func updateappearance(forlockupviewstate state: UIControl.State) }

203 TVLockupView Custom content 12.0, *) public protocol TVLockupViewComponent : NSObjectProtocol { optional public func updateappearance(forlockupviewstate state: UIControl.State) }

204 TVLockupView NEW

205 TVLockupView NEW Your own widget that responds to focus

206 TVLockupView NEW Your own widget that responds to focus Customize 4 special purpose subclasses TVPosterView TVCaptionButtonView TVCardView TVMonogramView

207

208

209 TVDigitEntryViewController NEW

210 TVDigitEntryViewController NEW

211 TVDigitEntryViewController NEW

212 TVDigitEntryViewController NEW

213 TVDigitEntryViewController NEW

214 TVDigitEntryViewController NEW

215 @available(tvos 12.0, *) NEW open class TVDigitEntryViewController : UIViewController { open var entrycompletionhandler: (String) -> Swift.Void open var titletext: String? open var prompttext: String? open var issecuredigitentry: Bool open var numberofdigits: UInt } open func clearentry(animated: Bool)

216 @available(tvos 12.0, *) NEW open class TVDigitEntryViewController : UIViewController { open var entrycompletionhandler: (String) -> Swift.Void open var titletext: String? open var prompttext: String? open var issecuredigitentry: Bool open var numberofdigits: UInt } open func clearentry(animated: Bool)

217 @available(tvos 12.0, *) NEW open class TVDigitEntryViewController : UIViewController { open var entrycompletionhandler: (String) -> Swift.Void open var titletext: String? open var prompttext: String? open var issecuredigitentry: Bool open var numberofdigits: UInt } open func clearentry(animated: Bool)

218 @available(tvos 12.0, *) NEW open class TVDigitEntryViewController : UIViewController { open var entrycompletionhandler: (String) -> Swift.Void open var titletext: String? open var prompttext: String? open var issecuredigitentry: Bool open var numberofdigits: UInt } open func clearentry(animated: Bool)

219 Demo Marshall Huss, tvos Engineering

220 TVUIKit NEW

221 TVUIKit NEW Easy adoption of common UI patterns

222 TVUIKit NEW Easy adoption of common UI patterns Built-in support for localization and accessibility

223 TVUIKit NEW Easy adoption of common UI patterns Built-in support for localization and accessibility Developer Beta

224 Summary

225 Summary Password AutoFill

226 Summary Password AutoFill Focus Engine enhancement

227 Summary Password AutoFill Focus Engine enhancement TVUIKit

228 More Information tvos Lab Technology Lab 7 Wednesday 9:00AM tvos Lab Technology Lab 7 Thursday 1:00PM

229 More Information Safari, WebKit, and Password AutoFill Lab Technology Lab 3 Wednesday 2:00PM Safari, WebKit, and Password AutoFill Lab Technology Lab 4 Friday 2:45PM

230