Mastering UIKit on tvos

Transcription

1 App Frameworks #WWDC16 Mastering UIKit on tvos Session 210 Justin Voss UIKit Engineer 2016 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Agenda

3 Agenda Event Handling

4 Agenda Event Handling Layered Images

5 Agenda Event Handling Layered Images Scrolling

6 Agenda Event Handling Layered Images Scrolling Text Input

7 Event Handling

8 Event Handling Best Practices

9 Event Handling Best Practices Navigation should rely on the focus engine

10 Event Handling Best Practices Navigation should rely on the focus engine Use gesture recognizers when possible

11 Event Handling Best Practices Navigation should rely on the focus engine Use gesture recognizers when possible Avoid gestures that can t be used on all input devices

12 Touches

13 Touches UITouch represents contact between the user s finger and the touch surface

14 Touches UITouch represents contact between the user s finger and the touch surface Just like the ios version

15 Touches UITouch represents contact between the user s finger and the touch surface Just like the ios version UITouchTypeIndirect

16 Touches UITouch represents contact between the user s finger and the touch surface Just like the ios version UITouchTypeIndirect Begins centered in the focused view

17 Touches UITouch represents contact between the user s finger and the touch surface Just like the ios version UITouchTypeIndirect Begins centered in the focused view No absolute coordinates on the touch surface

18 Presses

19 Presses UIPress represents the up or down state of a physical button

20 Presses UIPress represents the up or down state of a physical button May be pressure-sensitive

21 Presses UIPress represents the up or down state of a physical button May be pressure-sensitive UIGestureRecognizer

22 Presses UIPress represents the up or down state of a physical button May be pressure-sensitive UIGestureRecognizer UIPress events mimic UITouch events

23 Presses UIPress represents the up or down state of a physical button May be pressure-sensitive UIGestureRecognizer UIPress events mimic UITouch events func pressesbegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {} func presseschanged(_ presses: Set<UIPress>, with event: UIPressesEvent?) {} func pressesended(_ presses: Set<UIPress>, with event: UIPressesEvent?) {} func pressescancelled(_ presses: Set<UIPress>, with event: UIPressesEvent?) {}

24 Press Types An illustrated guide

25 Press Types An illustrated guide

26 Press Types An illustrated guide

27 Press Types An illustrated guide

28 Press Types UIPressTypeSelect An illustrated guide

29 Press Types UIPressTypeSelect An illustrated guide

30 Press Types UIPressTypeSelect An illustrated guide

31 Press Types UIPressTypeSelect An illustrated guide

32 Press Types An illustrated guide UIPressTypeSelect UIPressTypeMenu

33 Press Types An illustrated guide UIPressTypeSelect UIPressTypeMenu

34 Press Types An illustrated guide UIPressTypeSelect UIPressTypeMenu

35 Press Types An illustrated guide UIPressTypeSelect UIPressTypeMenu

36 Press Types An illustrated guide UIPressTypeSelect UIPressTypeMenu

37 Press Types An illustrated guide UIPressTypeSelect UIPressTypeMenu UIPressTypePlayPause

38 Press Types An illustrated guide UIPressTypeSelect UIPressTypeMenu UIPressTypePlayPause

39 Press Types An illustrated guide UIPressTypeSelect UIPressTypeMenu UIPressTypePlayPause

40 Press Types An illustrated guide UIPressTypeSelect UIPressTypeMenu UIPressTypePlayPause

41 Press Types An illustrated guide UIPressTypeUpArrow UIPressTypeDownArrow UIPressTypeLeftArrow UIPressTypeRightArrow

42 Press Types An illustrated guide UIPressTypeUpArrow UIPressTypeDownArrow UIPressTypeLeftArrow UIPressTypeRightArrow

43 Press Types An illustrated guide UIPressTypeUpArrow UIPressTypeDownArrow UIPressTypeLeftArrow UIPressTypeRightArrow

44 Press Types An illustrated guide UIPressTypeUpArrow UIPressTypeDownArrow UIPressTypeLeftArrow UIPressTypeRightArrow

45 Press Types An illustrated guide UIPressTypeUpArrow UIPressTypeDownArrow UIPressTypeLeftArrow UIPressTypeRightArrow

46 Press Types An illustrated guide UIPressTypeUpArrow UIPressTypeDownArrow UIPressTypeLeftArrow UIPressTypeRightArrow

47 // Tap on Play-Pause button. let playpausetap = UITapGestureRecognizer(target: self, action: #selector(myclass.handleplaypause(_:))) playpausetap.allowedpresstypes = [ UIPressType.playPause.rawValue ] // Long-press on Select button. let selectlongpress = UILongPressGestureRecognizer(target: self, action: #selector(myclass.handleselectlongpress(_:))) selectlongpress.allowedpresstypes = [ UIPressType.select.rawValue ] // Double-tap on Select button. let selectdoubletap = UITapGestureRecognizer(target: self, action: #selector(myclass.handleselectdoubletap(_:))) selectdoubletap.allowedpresstypes = [ UIPressType.select.rawValue ] selectdoubletap.numberoftapsrequired = 2

48 The Menu Button

49 The Menu Button Users must be able to exit your app using the Menu button

50 The Menu Button Users must be able to exit your app using the Menu button This is a requirement that App Review specifically looks for

51 The Menu Button Users must be able to exit your app using the Menu button This is a requirement that App Review specifically looks for The event must reach UIApplication pressesended:withevent: in order for the app to exit

52 Custom Menu Button Handling

53 Custom Menu Button Handling Remove the gesture from its view

54 Custom Menu Button Handling Remove the gesture from its view Disable the gesture

55 Custom Menu Button Handling Remove the gesture from its view Disable the gesture Implement the gesture delegate method gesturerecognizershouldbegin

56 Custom Menu Button Handling Remove the gesture from its view Disable the gesture Implement the gesture delegate method gesturerecognizershouldbegin In pressesended call super if you re not going to handle the event

57 Custom Menu Button Handling Remove the gesture from its view Disable the gesture Implement the gesture delegate method gesturerecognizershouldbegin In pressesended call super if you re not going to handle the event GCEventViewController and controlleruserinteractionenabled

58 Layered Images

59 Layered Images

60 Layered Images

61 Layered Images Specific to tvos

62 Layered Images Specific to tvos Can have up to five layers

63 Layered Images Specific to tvos Can have up to five layers Required for app icons

64 Layered Images Specific to tvos Can have up to five layers Required for app icons Interactive

65 Layered Images Specific to tvos Can have up to five layers Required for app icons Interactive Animated

66 Interactivity with Layered Images

67 Interactivity with Layered Images Images are usually not interactive controls themselves, but components of larger controls

68 Interactivity with Layered Images Images are usually not interactive controls themselves, but components of larger controls The image view itself doesn t need to be focused to get the floating appearance

69 Interactivity with Layered Images Images are usually not interactive controls themselves, but components of larger controls The image view itself doesn t need to be focused to get the floating appearance imageview.adjustsimagewhenancestorfocused = true

70 Interactivity with Layered Images Images are usually not interactive controls themselves, but components of larger controls The image view itself doesn t need to be focused to get the floating appearance imageview.adjustsimagewhenancestorfocused = true The image view can show a pressed-in state

71 Interactivity with Layered Images Images are usually not interactive controls themselves, but components of larger controls The image view itself doesn t need to be focused to get the floating appearance imageview.adjustsimagewhenancestorfocused = true The image view can show a pressed-in state imageview.ishighlighted = pressed? true : false

72 Interactivity with Layered Images Images are usually not interactive controls themselves, but components of larger controls The image view itself doesn t need to be focused to get the floating appearance imageview.adjustsimagewhenancestorfocused = true The image view can show a pressed-in state imageview.ishighlighted = pressed? true : false Two common use cases that are covered for you:

73 Interactivity with Layered Images Images are usually not interactive controls themselves, but components of larger controls The image view itself doesn t need to be focused to get the floating appearance imageview.adjustsimagewhenancestorfocused = true The image view can show a pressed-in state imageview.ishighlighted = pressed? true : false Two common use cases that are covered for you: Images inside UICollectionViewCells

74 Interactivity with Layered Images Images are usually not interactive controls themselves, but components of larger controls The image view itself doesn t need to be focused to get the floating appearance imageview.adjustsimagewhenancestorfocused = true The image view can show a pressed-in state imageview.ishighlighted = pressed? true : false Two common use cases that are covered for you: Images inside UICollectionViewCells The imageview within a custom UIButton

75 Animations with Layered Images

76 Animations with Layered Images When an image enlarges, you can rearrange nearby views using Auto Layout

77 Animations with Layered Images When an image enlarges, you can rearrange nearby views using Auto Layout Use the layout guide focusedframeguide to create a constraint

78 Animations with Layered Images When an image enlarges, you can rearrange nearby views using Auto Layout Use the layout guide focusedframeguide to create a constraint

79 Animations with Layered Images When an image enlarges, you can rearrange nearby views using Auto Layout Use the layout guide focusedframeguide to create a constraint

80 Animations with Layered Images When an image enlarges, you can rearrange nearby views using Auto Layout Use the layout guide focusedframeguide to create a constraint

81 Animations with Layered Images When an image enlarges, you can rearrange nearby views using Auto Layout Use the layout guide focusedframeguide to create a constraint

82 Animations with Layered Images When an image enlarges, you can rearrange nearby views using Auto Layout Use the layout guide focusedframeguide to create a constraint Use focus context methods to coordinate animations correctly

83 Demo Interactivity and animation for layered images Randy Becker

84 Scrolling

85 Scroll Offset Selection

86 Scroll Offset Selection Usually not doing direct manipulation

87 Scroll Offset Selection Usually not doing direct manipulation The user manipulates focus, and the focus engine chooses a scroll offset

88 Scroll Offset Selection Usually not doing direct manipulation The user manipulates focus, and the focus engine chooses a scroll offset UIScrollViewDelegate can override the automatic scroll offset

89 Scroll Offset Selection Usually not doing direct manipulation The user manipulates focus, and the focus engine chooses a scroll offset UIScrollViewDelegate can override the automatic scroll offset func scrollviewwillenddragging(_ scrollview: UIScrollView, withvelocity velocity: CGPoint, targetcontentoffset: UnsafeMutablePointer<CGPoint>) { let myoffset = CGPoint(x: 42.0, y: 0) // Do your own calculations here. targetcontentoffset.initialize(with: myoffset) }

90 Direct Manipulation

91 Direct Manipulation It is possible to do direct manipulation if the situation calls for it

92 Direct Manipulation It is possible to do direct manipulation if the situation calls for it Reconfigure pan gesture recognizer on scroll view to recognize indirect touches

93 Direct Manipulation It is possible to do direct manipulation if the situation calls for it Reconfigure pan gesture recognizer on scroll view to recognize indirect touches Enable the directional press gesture

94 Direct Manipulation It is possible to do direct manipulation if the situation calls for it Reconfigure pan gesture recognizer on scroll view to recognize indirect touches Enable the directional press gesture scrollview.pangesturerecognizer.allowedtouchtypes = [ UITouchType.indirect.rawValue ] scrollview.directionalpressgesturerecognizer.isenabled = true

95 Demo Focus and direction manipulation Kevin Hiscott

96 Text Input

97 The System Keyboard

98 The System Keyboard The system standard keyboard is the only way to get certain text input features

99 The System Keyboard The system standard keyboard is the only way to get certain text input features Dictation

100 The System Keyboard The system standard keyboard is the only way to get certain text input features Dictation Bluetooth keyboards

101 The System Keyboard The system standard keyboard is the only way to get certain text input features Dictation Bluetooth keyboards Apple TV Remote app

102 The System Keyboard The system standard keyboard is the only way to get certain text input features Dictation Bluetooth keyboards Apple TV Remote app Localization

103 The System Keyboard The system standard keyboard is the only way to get certain text input features Dictation Bluetooth keyboards Apple TV Remote app Localization Automatic grid or linear layout based on input device

104 The System Keyboard The system standard keyboard is the only way to get certain text input features Dictation Bluetooth keyboards Apple TV Remote app Localization Automatic grid or linear layout based on input device Don t try to create your own keyboard, or your users will miss out on these features

105 Keyboard Appearance

106 Keyboard Appearance Adding custom UI to the keyboard is possible

107 Keyboard Appearance Adding custom UI to the keyboard is possible Use inputaccessoryview or inputaccessoryviewcontroller

108 Keyboard Appearance Adding custom UI to the keyboard is possible Use inputaccessoryview or inputaccessoryviewcontroller UITextField appearance no longer dictated by keyboardappearance

109

110 Search Controller

111 Search Controller UISearchController

112 Search Controller UISearchController Keyboard and search results visible at the same time

113 Search Controller UISearchController Keyboard and search results visible at the same time Automatically adapts to linear and grid keyboards

114 Search Controller UISearchController Keyboard and search results visible at the same time Automatically adapts to linear and grid keyboards Can be embedded within container view controllers

115 Search Controller UISearchController Keyboard and search results visible at the same time Automatically adapts to linear and grid keyboards Can be embedded within container view controllers UISearchContainerViewController

116 Search Controller UISearchController Keyboard and search results visible at the same time Automatically adapts to linear and grid keyboards Can be embedded within container view controllers UISearchContainerViewController Custom view controller for search results

117 // Embedding UISearchController class MySearchController: UIViewController, UISearchResultsUpdating { var searchcontroller: UISearchController! override func viewdidappear(_ animated: Bool) { super.viewdidappear(animated) if (searchcontroller == nil) { let results = UIViewController() searchcontroller = UISearchController(searchResultsController: results) searchcontroller.searchresultsupdater = self let container = UISearchContainerViewController (searchcontroller: searchcontroller) self.addchildviewcontroller(container) self.view.addsubview(container.view) container.didmove(toparentviewcontroller: self) } } }

118 // Embedding UISearchController class MySearchController: UIViewController, UISearchResultsUpdating { var searchcontroller: UISearchController! override func viewdidappear(_ animated: Bool) { super.viewdidappear(animated) if (searchcontroller == nil) { let results = UIViewController() searchcontroller = UISearchController(searchResultsController: results) searchcontroller.searchresultsupdater = self let container = UISearchContainerViewController (searchcontroller: searchcontroller) self.addchildviewcontroller(container) self.view.addsubview(container.view) container.didmove(toparentviewcontroller: self) } } }

119 // Embedding UISearchController class MySearchController: UIViewController, UISearchResultsUpdating { var searchcontroller: UISearchController! override func viewdidappear(_ animated: Bool) { super.viewdidappear(animated) if (searchcontroller == nil) { let results = UIViewController() searchcontroller = UISearchController(searchResultsController: results) searchcontroller.searchresultsupdater = self let container = UISearchContainerViewController (searchcontroller: searchcontroller) self.addchildviewcontroller(container) self.view.addsubview(container.view) container.didmove(toparentviewcontroller: self) } } }

120 // Embedding UISearchController class MySearchController: UIViewController, UISearchResultsUpdating { var searchcontroller: UISearchController! override func viewdidappear(_ animated: Bool) { super.viewdidappear(animated) if (searchcontroller == nil) { let results = UIViewController() searchcontroller = UISearchController(searchResultsController: results) searchcontroller.searchresultsupdater = self let container = UISearchContainerViewController (searchcontroller: searchcontroller) self.addchildviewcontroller(container) self.view.addsubview(container.view) container.didmove(toparentviewcontroller: self) } } }

121 // Embedding UISearchController class MySearchController: UIViewController, UISearchResultsUpdating { var searchcontroller: UISearchController! override func viewdidappear(_ animated: Bool) { super.viewdidappear(animated) if (searchcontroller == nil) { let results = UIViewController() searchcontroller = UISearchController(searchResultsController: results) searchcontroller.searchresultsupdater = self let container = UISearchContainerViewController (searchcontroller: searchcontroller) self.addchildviewcontroller(container) self.view.addsubview(container.view) container.didmove(toparentviewcontroller: self) } } }

122 // Embedding UISearchController class MySearchController: UIViewController, UISearchResultsUpdating { var searchcontroller: UISearchController! override func viewdidappear(_ animated: Bool) { super.viewdidappear(animated) if (searchcontroller == nil) { let results = UIViewController() searchcontroller = UISearchController(searchResultsController: results) searchcontroller.searchresultsupdater = self let container = UISearchContainerViewController (searchcontroller: searchcontroller) self.addchildviewcontroller(container) self.view.addsubview(container.view) container.didmove(toparentviewcontroller: self) } } }

123 Summary

124 Summary Be careful with custom Menu button handling

125 Summary Be careful with custom Menu button handling Use layout guides and coordinated animations for great layered images

126 Summary Be careful with custom Menu button handling Use layout guides and coordinated animations for great layered images If you need direct manipulation, use the existing UIScrollView gestures

127 Summary Be careful with custom Menu button handling Use layout guides and coordinated animations for great layered images If you need direct manipulation, use the existing UIScrollView gestures Use the system standard keyboard for text input

128 More Information developer.apple.com/wwdc16/210

129 Related Sessions What s New in tvos Presidio Tuesday 3:00PM Focus Interaction on tvos Mission Wednesday 4:00PM

130 Labs tvos Lab Frameworks Lab D Wednesday 2:00PM tvos Lab Frameworks Lab D Thursday 9:00AM

131