Upgrade to Pro — share decks privately, control downloads, hide ads and more …

tvOS Workshop

tvOS Workshop

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

Ben Scheirman

October 12, 2016
Tweet

More Decks by Ben Scheirman

Other Decks in Programming

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