Bringing C# to the Living Room - Intro to tvOS Development With Xamarin

As presented at Xamarin Evolve 2016!

The new Apple TV has been released, and YOU can be one of the first developers to write apps for it. To make things even better, you can build these apps in C#! This session will introduce the basics of how to create a tvOS app with Xamarin, including: differences between tvOS and iOS APIs, TV user interface best practices, responding to user input, as well as the capabilities and limitations of building apps for a television. Grab some popcorn—this is going to be good!

Transcript

2. As Seen On TV … Bringing C# to the Living Room Matthew Soucoup Code Mill Technologies @codemillmatt
4. Tonight’s Lineup • Introduce hardware, OS and take a tour • Techniques to navigate between views • Best practices to present cinematic content to a room full of people Topics
6. Meet Our Stars • Characteristics • Strengths • Weaknesses • Special considerations Apple TV, Siri Remote, tvOS
7. Hardware
8. 64-bit A8 processor Up to 64 GB Storage 2 GB RAM 10/100 Mbps Ethernet WiFi 802.11 a/b/g/n/ac 1080p Resolution HDMI Game Controller Capable Siri Remote / Apple TV Remote
9. Touch surface Menu Siri / Search Play / Pause Home Volume Lightning Connector
10. Hardware Star Bio • Ample power for apps • No hardware fragmentation • One screen size • Always on – high speed Internet • New user interaction model Strong Points • Limited storage • 200 MB app bundle • 4 GB total ODR • Cannot write to permanent storage • No 4K support • New user interaction model Weak Points
11. tvOS
12. tvOS Intro • Derived from iOS • But is a distinct OS • UIKit, AVKit, CoreGraphics … still present • Supports new app type – TVML • New TVServices framework • Radically different interaction model • No touch - remote • Social • Immersive Characteristics
13. Tab Bar View
14. Split View, Collection View, Table View
15. Page View
16. tvOS Star Bio • Two types of apps • TVML • Traditional • Same old UIKit • Different way to interact • Immersive experience • Most other native frameworks available Considerations
18. Development Environment • XCode 7.3 • tvOS 9.2 SDK Apple • Beta channel • Xamarin.tvOS Beta Cycle 7 • Xamarin Studio 6 Xamarin
19. Demo!
21. Sneak Preview • Types of interactions • Handling events • Navigation between views • Design considerations Remote & Navigation • What it is • Focus engine • Interacting with Focus Model Demo!
22. Siri Remote
23. Remote Interaction • Across the room • Only one element on screen ”in focus” • Siri remote & game controllers • Can use in landscape • Accelerometer & gyroscope available Interacting with tvOS
24. Touch surface Menu Siri / Search Play / Pause Home Volume
25. Touch surface Menu Play / Pause • Gestures • Swipes – 1 finger only! • Taps • Clicks Touch Surface
26. Touch surface Menu Play / Pause • Back button • No on-screen back! • Pause for game play Menu
27. Touch surface Menu Play / Pause • Playback shortcuts • Game controls Play / Pause
28. Touch Pad Click // Primary "click" buttonOne.PrimaryActionTriggered += (sender, e) => { // Do something cool }; • No touch events
29. Swipe Recognizers // Swipe up var upGesture = new UISwipeGestureRecognizer(() => { // The up action }); upGesture.Direction = UISwipeGestureRecognizerDirection.Up; this.View.AddGestureRecognizer(upGesture);
30. Swipe Recognizers // Swipe up var upGesture = new UISwipeGestureRecognizer(() => { // The up action }); upGesture.Direction = UISwipeGestureRecognizerDirection.Up; this.View.AddGestureRecognizer(upGesture);
31. Swipe Recognizers // Swipe up var upGesture = new UISwipeGestureRecognizer(() => { // The up action }); upGesture.Direction = UISwipeGestureRecognizerDirection.Up; this.View.AddGestureRecognizer(upGesture);
32. Remote Button Clicks // Play pause click var playPauseClick = new UITapGestureRecognizer(() => { // Play or pause something }); playPauseClick.AllowedPressTypes = new NSNumber[] { NSNumber.FromInt64((long)UIPressType.PlayPause) }; this.View.AddGestureRecognizer(playPauseClick);
33. Remote Button Clicks // Play pause click var playPauseClick = new UITapGestureRecognizer(() => { // Play or pause something }); playPauseClick.AllowedPressTypes = new NSNumber[] { NSNumber.FromInt64((long)UIPressType.PlayPause) }; this.View.AddGestureRecognizer(playPauseClick);
34. Remote Button Clicks // Play pause click var playPauseClick = new UITapGestureRecognizer(() => { // Play or pause something }); playPauseClick.AllowedPressTypes = new NSNumber[] { NSNumber.FromInt64((long)UIPressType.PlayPause) }; this.View.AddGestureRecognizer(playPauseClick);
35. Remote Best Practices • Don’t repurpose standard gestures • Don’t invent new gestures • Use menu as back button Standards
36. Navigation • Only one item “in-focus” at a time • Focused item needs to be obvious • Move between items with minimal gestures • Navigation between items & screens intuitive • Don’t get the user lost! Everything Needs To Be Obvious
37. Focused Control
38. Focus Model & Engine • Implementation of Focus Model for UIKit controls • Intended for use with Siri Remote (works with others) • Provides consistent user experience Focus Engine • Theory of indirect UI manipulation • Only one view in focus • Obvious and intuitive movement between views Focus Model
39. Focus Engine • Maintains single view in focus at a time • Takes care of finding next focusable view • Cannot set focus programmatically • Provides API to respond to focus changes • Don’t fight it – defaults on most UIKit controls work API Basics
40. Demo!
41. Scene One • User interaction happens at a distance • Maintain a consistent remote control experience • Don’t get the user lost – easy navigation • Take time to understand focus model and engine Recap
43. Sneak Preview • Cinematic experience • Many people – far away • Organized and legible content Design Practices For • Stack views • Collection views Tools To Provide
44. Immersive
45. Living Room Experience • Edge to edge content • No chrome • Rely on focus model Cinematic • Legible at distance • Adjust for content appearing/disappearing • Reduce words on screen Organized
46. The Tools
47. Stack View
48. Collection Views
49. Collection Views
50. Scene Two • Provide “Living Room Experience” • Immersive, cinematic – edge-to-edge content, no chrome • Easy to read and understand from a distance • Adjust for content appearing and disappearing • Stack Views – Auto Layout’s helper • Collection Views - Grid organization Recap
52. C# in the Living Room • New generation of hardware and remote • New tvOS and two ways to write apps • Traditional apps – UIKit based • User do not interact directly – rely on focus model • Make interactions obvious and intuitive • Immersive and organized layouts Recap
53. As Seen On TV … Bringing C# to the Living Room Matthew Soucoup Code Mill Technologies @codemillmatt