tvOS Workshop

Transcript

1. None
2. None
3. None
4. None
5. None

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

15. None

16. Input

17. None
18. None
19. None

20. ?

21. None

22. Design Considerations

23. None

24. 10-feet away

25. None

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.
27. None
28. None
29. None

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(); }
38. None

39. https://developer.apple.com/library/content/samplecode/TVMLCatalog/Introduction/ Intro.html

40. None

41. Focus

42. None

43. Am I focusable? canBecomeFocused? userInteractionEnabled? visible?

44. Am I focusable? po [view _whyIsThisViewNotFocusable]

45. None
46. None
47. None

48. magic? !

49. None
50. None
51. None
52. None
53. None
54. None

55. .sectioned

56. .inset

57. Project Setup

58. Project Setup ViewController.swift RSSParser.swift RSSEntry.swift iTunesClient.swift

59. Project Setup E