tvOS Workshop

A 1-day workshop given to attendees of Pragmaconf '16 in Verona, Italy.

Transcript

6. A New Platform
7. Not just a bigger screen. • Central place in home • The hub for media • Families
8. Refreshing Stuff
9. One Screen Size* *(for now) 1920 x 1080 16:9
10. One Image Scale
11. One Image Scale
12. Always Connected…
13. Not So Refreshing…
14. Overscan 90 pt gutter on sides 60 pt gutter top/bottom
16. Input
20. ?
22. Design Considerations
24. 10-feet away
26. •Provide a single focus point. •Keep the background simple. •Use words only when they’re essential or part of a logo. •Don’t include screenshots. •Keep icon corners square.
30. 2 UI Paradigms
31. UIKit TVML
32. UIKit UIViewController UIView UIButton UILabel UIImageView
33. JavaScript TVML XML
34. TVML <document> <loadingTemplate> <activityIndicator> <text>Hello World!</text> </activityIndicator> </loadingTemplate> </document>
35. <document> <stackTemplate> <banner> <title>Available Action Movies</title> </banner> <collectionList> <shelf> <section> <lockup onselect="playMedia('path to video', 'video')"> <img src="path to image" width="182" height="274"/> <title>Movie 1</title> </lockup> <lockup onselect="playMedia('path to video', 'video')"> <img src="path to image" width="182" height="274" /> <title>Movie 2</title> </lockup> </section> </shelf> </collectionList> </stackTemplate> </document>
36. <document> <stackTemplate> <banner> <title>Available Action Movies</title> </banner> <collectionList> <shelf> <section> <lockup onselect="playMedia('path to video', 'video')"> <img src="path to image" width="182" height="274"/> <title>Movie 1</title> </lockup> <lockup onselect="playMedia('path to video', 'video')"> <img src="path to image" width="182" height="274" /> <title>Movie 2</title> </lockup> </section> </shelf> </collectionList> </stackTemplate> </document>
37. function playMedia(extension, mediaType) { var videourl = baseURL + extension; var singleVideo = new MediaItem(mediaType, videourl); var videoList = new Playlist(); videoList.push(singleVideo); var myPlayer = new Player(); myPlayer.playlist = videoList; myPlayer.play(); }
39. https://developer.apple.com/library/content/samplecode/TVMLCatalog/Introduction/ Intro.html
41. Focus
43. Am I focusable? canBecomeFocused? userInteractionEnabled? visible?
44. Am I focusable? po [view _whyIsThisViewNotFocusable]
48. magic? !
55. .sectioned
56. .inset
57. Project Setup
58. Project Setup ViewController.swift RSSParser.swift RSSEntry.swift iTunesClient.swift
59. Project Setup E