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.

023a6a37e8177cb2f84a236bbce643cf?s=128

Ben Scheirman

October 12, 2016
Tweet

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