Een inleiding tot tvOS Development

Invoering

Tijdens hun jaarlijkse september-evenement in september 2015, in aanvulling op de nieuwe iPhone- en iPad-modellen, kondigde Apple hun langverwachte update aan voor de set-top box van Apple TV. Deze nieuwe vierde generatie Apple TV bevat een krachtige A8-processor, een externe Siri, een vernieuwde gebruikersinterface en, het belangrijkste, een gloednieuw platform voor applicaties en games van derden, door Apple TVOS genoemd.

In deze tutorial ga ik je laten kennismaken met tvOS-ontwikkeling door een standaard tvOS-toepassing te maken. Deze tutorial vereist dat u Xcode 7.1 of hoger gebruikt, inclusief ondersteuning voor tvOS. Ik ga er ook van uit dat je al bekend bent met iOS-ontwikkeling.

1. Projectinstelling

Open Xcode en maak een nieuw project. U zult onmiddellijk merken dat de lijst met sjablonen een sectie voor tvOS-toepassingen bevat. Kies uit de beschikbare sjablonen tvOS> Toepassing> Toepassing enkele weergave.

Klik volgende en configureer het project zoals hieronder getoond. Ik heb gekozen voor Snel als de taal van het project, maar je kunt ook Objective-C gebruiken om tvOS-applicaties te ontwikkelen.

Om het opzetten van het project te voltooien, vertel Xcode waar u het project wilt opslaan. Het eerste dat opvalt, is dat het project bijna identiek is opgebouwd met een normale iOS-applicatie. In de onderstaande screenshot kun je zien dat we hebben AppDelegate.swiftViewController.swift, en Main.storyboard.

2. De interface bouwen

Het eerste grote verschil dat u zult opmerken wanneer u met tvOS werkt, is het bouwen van de gebruikersinterface van uw app. Wanneer je opent Main.storyboard, je ziet een groot, leeg Apple TV-scherm. Als u het volledige scherm niet in de editor ziet, drukt u op Commando-- uitzoomen.

Dit scherm is aanzienlijk groter vanwege de manier waarop tvOS-apps worden geschaald. In de moderne iOS-ontwikkeling wordt de lay-out van de interface afgehandeld door het gebruik van punten in plaats van pixels om ontwikkeling gemakkelijker te maken op apparaten met Retina Displays.

De iPhone 6 en iPhone 6s hebben bijvoorbeeld een schermresolutie van 1334x750, maar alleen een schermgrootte van 667x375 punten. Dit betekent dat alle apps op het apparaat op een 2x-schaal worden uitgevoerd. Alle iOS-apparaten van Apple met een Retina-display worden op een 2x-schaal uitgevoerd, behalve de iPhone 6 Plus en iPhone 6s Plus, die op een schaal van 3x worden uitgevoerd.

De nieuwe Apple TV voert echter apps uit met een standaard resolutie van 1920x1080 op een schaal van 1x. Dit betekent dat bij het maken van tvOS-apps de schermgrootte, in punten, die u moet gebruiken bij het opbouwen van uw interface ook 1920x1080 is.

Nu u weet hoe tvOS-apps worden geschaald en op het scherm worden weergegeven, kunnen we beginnen met het bouwen van onze eerste interface. Van de Objectbibliotheek aan de rechterkant sleept u in a Button aan de rechterkant van je lege scherm. Klik met de knop geselecteerd onder aan je storyboardeditor op de Pin knop en voeg de volgende beperkingen toe.

Sleep vervolgens naar a Tabelweergave aan de linkerkant van de knop en voeg de volgende beperkingen toe. Zorg er ook voor dat de Frames bijwerken optie onderaan is ingesteld op Alle frames in container. Bekijk het onderstaande screenshot voor meer informatie.

Selecteer uw tafelweergave, open de Size Inspector, en stel de Rijhoogte eigendom aan 88 zoals hieronder getoond.

Sleep vervolgens naar a Tabelweergave Cel van de Objectbibliotheek en voeg het toe aan de tabelweergave. Met de celweergavecel geselecteerd, opent u de Kenmerken Inspector en verander de Stijl eigendom aan subtitel.

Tenslotte, druk op Controle op uw toetsenbord en sleep vanuit uw tabelweergave naar uw weergavecontroller om de weergavecontroller in te stellen als de gegevensbron en de gemachtigde van de tabelweergave. U kunt dit ook doen met behulp van de Verbindingen inspecteur aan de rechterkant.

Door deze tvOS-interface te bouwen, zul je zien dat het bijna identiek is aan het bouwen van een iOS-interface met als grootste verschil de aanzienlijk grotere schaal van items.

3. Focus op begrijpen

Laten we ons nu concentreren op wat code. Open ViewController.swift en vervang de implementatie van de ViewController les met het volgende.

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate override func viewDidLoad () super.viewDidLoad () // Voer een extra installatie uit nadat de weergave is geladen, meestal vanaf een punt.  override func didReceiveMemoryWarning () super.didReceiveMemoryWarning () // Beschik alle middelen die opnieuw kunnen worden gemaakt.  func tableView (tableView: UITableView, numberOfRowsInSection sectie: Int) -> Int return 3 func numberOfSectionsInTableView (tableView: UITableView) -> Int return 1 func tableView (tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell  let cell = UITableViewCell (style: .Subtitle, reuseIdentifier: nil) cell.textLabel? .text = "Item \ (indexPath.row + 1)" cell.detailTextLabel? .text = "Subtitle \ (indexPath.row + 1)" cel retourneren

Als u bekend bent met iOS-ontwikkeling, moet de bovenstaande implementatie er heel bekend uitzien. U bent nu klaar om uw allereerste tvOS-toepassing uit te voeren. druk op Command-R of klik op de knop uitvoeren links bovenaan. Zorg ervoor dat uw testapparaat is ingesteld op Apple TV 1080p.

Zodra de Apple TV Simulator is opgestart en uw toepassing is gestart, ziet u het volgende scherm:

Gefeliciteerd! Je hebt nu je allereerste tvOS-app in gebruik. Om de app te kunnen bedienen, moet je de nieuwe Apple TV-afstandsbediening gebruiken. Selecteer om de afstandsbediening op te roepen in de simulator Hardware> Apple TV Remote weergeven vanuit het menu of druk op ⌘Command + Shift + R.

Er moet een klein venster op afstand worden geopend naast uw simulatievenster. Speel rond met de afstandsbediening door de Keuze op uw toetsenbord en beweeg uw muiscursor over de afstandsbediening. U zult zien dat, terwijl u uw muiscursor omhoog en omlaag beweegt, de selectie in de tabelweergave verandert.

Evenzo, wanneer u naar rechts veegt, wordt de knop aan de rechterkant geselecteerd.

Bij de ontwikkeling van tvOS wordt dit het wijzigen van het huidige focusitem genoemd. In tegenstelling tot iOS-apps waarbij gebruikers op elk willekeurig moment op het scherm kunnen tikken, gebruiken tvOS-apps een point-and-click interactiestijl.

U hoeft als ontwikkelaar geen extra werk te doen om uw interface-elementen in een logische volgorde te kunnen richten. De focus-engine die is ingebouwd in het UIKit-framework op tvOS kijkt naar de lay-out van uw interface en behandelt al het werk bij het verplaatsen van de focus van het ene item naar het andere.

Er zijn echter veel nieuwe methoden en eigenschappen beschikbaar om programmeerbaar de manier te regelen waarop de focus in uw app wordt afgehandeld. Veel van deze worden gedefinieerd door de UIFocusEnvironment protocol, dat de UIViewControllerUIViewUIWindow, en UIPresentationController klassen voldoen automatisch aan. Er zijn ook meerdere methoden in de tvOS-versies van de UITableViewDelegate en UICollectionViewDelegate protocollen die kunnen worden gebruikt om de focus binnen uw app te beheren.

We gaan bijvoorbeeld de knop rechts het standaard focusitem maken. Als u de app nu uitvoert, ziet u dat het eerste item van de tabel aanvankelijk in focus is. We gaan ook uitschakelen dat het tweede item in de tabelweergave focusbaar is. Voeg het volgende codefragment toe aan de implementatie van de ViewController klasse:

override var preferredFocusedView: UIView? return self.view.subviews [0] func tableView (tableView: UITableView, canFocusRowAtIndexPath indexPath: NSIndexPath) -> Bool if indexPath.row == 1 return false return true 

We vervangen eerst de preferredFocusedView eigenschap en retourneer de eerste subweergave, die momenteel de knop aan de rechterkant is. De preferredFocusedView property is read-only en kan alleen worden ingesteld door de implementatie ervan ongedaan te maken, zoals we hebben gedaan. Wanneer de weergaveregelaar is geladen, vindt de focusengine de weergave geretourneerd door deze eigenschap en stelt deze automatisch scherp.

We hebben ook de tableView (_: canFocusRowAtIndexPath :) methode en terugkeer vals wanneer de indexPath.row is gelijk aan 1. Anders komen we terug waar. Zoals je zou verwachten bepaalt deze gedelegeerde methode of een specifieke rij al dan niet in focus kan zijn.

Wanneer u uw app opnieuw opbouwt en uitvoert, ziet u dat de knop aan de rechterkant automatisch wordt scherpgesteld bij het opstarten. Als de knop aan de rechterkant niet automatisch wordt scherpgesteld, is de weergavehiërarchie van de app mogelijk iets anders, dat wil zeggen dat de eerste subweergave van de weergave van de view controller niet gelijk is aan de knop aan de rechterkant.

U zult ook opmerken dat wanneer u door de rijen van de tabelweergave navigeert, de middelste rij wordt overgeslagen zoals voorgeschreven door de implementatie van de tableView (_: canFocusRowAtIndexPath :) methode.

4. tvOS-app-componenten en -beperkingen

Hoewel we in deze zelfstudie geen afbeeldingen zullen maken, is het belangrijk dat u de verschillende componenten begrijpt die nodig zijn voor tvOS-apps, evenals enkele van de beperkingen.

App-pictogrammen

Elke tvOS-app moet twee app-pictogrammen bevatten:

  • Groot: 1280 px x 768 px
  • Klein: 400 px x 240 px

Het belangrijkste verschil met iOS is dat tvOS-app-pictogrammen kunnen worden samengesteld uit maximaal drie lagen. Dit is zo dat een parallax-effect kan worden bereikt op het startscherm en overal waar uw app-pictogram wordt weergegeven. Als u dit effect zelf wilt zien, gaat u naar de Apple TV Simulator, drukt u op Huis toets op de afstandsbediening (het kleine TV-pictogram). Focus de instellingen app-pictogram en houd de knop ingedrukt Keuze toets terwijl u de muiscursor een beetje op de afstandsbediening beweegt. Je zult zien dat het app-pictogram reageert op je beweging en dat de verschillende lagen van het pictogram een ​​leuk effect geven.

Afbeelding starten

Net als bij een gewone iOS-applicatie, moet u een statische afbeelding opgeven die wordt weergegeven zodra uw app is geopend en wordt geladen. Het grootste verschil is dat je maar één afbeelding van 1920 x 1080 pixels hoeft te leveren.

Top Shelf-afbeeldingen

Als uw app is geplaatst in de Bovenste plank door een gebruiker kunt u, indien gericht, inhoud weergeven op het startscherm van de Apple TV. Er zijn drie hoofdtypen inhoud die u kunt weergeven:

  • Statische afbeelding: Dit is slechts een 1920px x 720px-afbeelding die u in uw toepassingsbundel opgeeft.
  • Dynamic Content Layouts: Hier geeft u een reeks afbeeldingen weer in een interface die lijkt op een verzamelweergave. Deze afbeeldingen kunnen op elk gewenst moment door uw app worden geselecteerd en hoeven niet te worden opgenomen in de toepassingsbundel. De drie afbeeldingsformaten die u kunt gebruiken, zijn 404px x 608px, 608px x 608px en 908px x 512px. Elke combinatie van deze drie maten kan worden gebruikt.
  • Scrolling Banner: Dit is waar u een reeks brede beelden met een breedteverhouding levert die naast elkaar worden weergegeven, waarbij het grootste deel van het scherm wordt gebruikt. Dit inhoudstype is vergelijkbaar met de startpagina van de iOS App Store. Deze afbeeldingen moeten een afmeting van 1940 x x 624 px hebben.

beperkingen

Ondanks dat de nieuwe Apple TV meer opslagruimte inpakt dan de meeste iPhone-apparaten met een minimale capaciteit van 32 GB, zijn er enkele belangrijke beperkingen voor tvOS-toepassingen. Ten eerste kunnen apps niet groter zijn dan 200 MB. Alle inhoud die u nodig hebt buiten deze buffer van 200 MB moet worden gedownload met behulp van de On-Demand Resources API geïntroduceerd met iOS 9 en nu tvOS.

Een ander ding waar je ook bewust van moet zijn, is dat tvOS-apps geen permanente lokale opslag hebben. Dit betekent dat alle gegevens die u moet bewaren tussen app-lanceringen, zoals game saves, foto's en video's, moeten worden opgeslagen in iCloud en moeten worden opgehaald wanneer dat nodig is.

Conclusie

Hoewel we in deze zelfstudie niet veel code hebben geschreven, hoop ik dat dit een goede inleiding tot het tvOS-platform was. U kent nu de belangrijkste overeenkomsten en verschillen tussen het ontwikkelen van apps voor iOS en tvOS en de beperkingen die aan ontwikkelaars worden opgelegd.

In toekomstige tutorials duiken we dieper in tvOS en ontdekken we wat er mogelijk is met tvOS en de nieuwe Apple TV.

Laat zoals altijd uw opmerkingen en feedback achter in de opmerkingen hieronder.