Une introduction au développement de tvOS

introduction

Lors de leur événement annuel de septembre 2015, en plus des nouveaux modèles d’iPhone et d’iPad, Apple a annoncé sa mise à jour tant attendue du décodeur Apple TV. Cette nouvelle Apple TV de quatrième génération comprend un puissant processeur A8, une télécommande compatible Siri, une interface utilisateur remaniée et, surtout, une toute nouvelle plate-forme pour les applications et les jeux tiers, qu’Apple a nommée tvOS.

Dans ce tutoriel, je vais vous présenter le développement tvOS en créant une application tvOS de base. Ce didacticiel nécessite que vous exécutiez Xcode 7.1 ou version ultérieure, qui inclut la prise en charge de tvOS. Je suppose également que vous êtes déjà familiarisé avec le développement iOS.

1. Configuration du projet

Ouvrez Xcode et créez un nouveau projet. Vous remarquerez immédiatement que la liste des modèles comprend une section pour les applications tvOS. Parmi les modèles disponibles, choisissez tvOS> Application> Application à vue unique.

Modèle de projet

Cliquez sur Prochain et configurez le projet comme indiqué ci-dessous. J’ai opté pour Rapide comme langage du projet, mais vous pouvez également utiliser Objective-C pour développer des applications tvOS.

Paramètres du projet

Pour terminer la configuration du projet, indiquez à Xcode où vous souhaitez enregistrer le projet. La première chose que vous remarquerez est que le projet est structuré de manière presque identique à une application iOS classique. Dans la capture d’écran ci-dessous, vous pouvez voir que nous avons AppDelegate.swift, ViewController.swift, et Main.storyboard.

Structure de l'application tvOS

2. Construire l’interface

La première différence majeure que vous remarquerez en travaillant avec tvOS est la création de l’interface utilisateur de votre application. Lorsque vous ouvrez Main.storyboard, vous verrez un grand écran Apple TV vierge. Si vous ne pouvez pas voir tout l’écran dans l’éditeur, appuyez sur Commander– pour effectuer un zoom arrière.

Interface Apple TV vierge

Cet écran est beaucoup plus grand en raison de la façon dont les applications tvOS sont mises à l’échelle. Dans le développement iOS moderne, la disposition de l’interface est gérée par l’utilisation de points plutôt que de pixels afin de faciliter le développement sur les appareils dotés d’écrans Retina.

Par exemple, l’iPhone 6 et l’iPhone 6s ont une résolution d’écran de 1334×750, mais seulement une taille d’écran, en points, de 667×375. Cela signifie que toutes les applications de l’appareil fonctionnent à une échelle 2x. Tous les appareils iOS d’Apple dotés d’un écran Retina fonctionnent à une échelle de 2x, à l’exception de l’iPhone 6 Plus et de l’iPhone 6s Plus, qui fonctionnent à une échelle de 3x.

La nouvelle Apple TV, cependant, exécute des applications à une résolution standard de 1920 x 1080 à une échelle de 1x. Cela signifie que, lors de la création d’applications tvOS, la taille de l’écran, en points, que vous devez utiliser lors de la création de votre interface est également de 1920×1080.

Maintenant que vous savez comment les applications tvOS sont mises à l’échelle et affichées à l’écran, nous pouvons commencer à créer notre première interface. Du Bibliothèque d’objets à droite, faites glisser un BUtton sur le côté droit de votre écran vide. Avec le bouton sélectionné, en bas de votre éditeur de storyboard, cliquez sur le Épingle et ajoutez les contraintes suivantes.

Bouton Pin
Contraintes de bouton

Ensuite, faites glisser un Vue de tableau à gauche du bouton et ajoutez les contraintes suivantes. Assurez-vous également que le Mettre à jour les cadres l’option en bas est définie sur Tous les cadres dans le conteneur. Jetez un œil à la capture d’écran ci-dessous pour plus de précisions.

Contraintes de vue de table

Sélectionnez votre vue de table, ouvrez le Inspecteur de tailleet définissez le Hauteur de ligne propriété à 88 comme indiqué ci-dessous.

Hauteur de ligne

Ensuite, faites glisser un Cellule d’affichage de tableau du Bibliothèque d’objets et ajoutez-le à la vue de table. Avec la cellule de vue tableau sélectionnée, ouvrez le Inspecteur d’attributs et changez le Style propriété à Sous-titre.

Style de cellule

Finalement, presse Contrôle sur votre clavier et faites-le glisser de votre vue de tableau vers votre contrôleur de vue pour définir le contrôleur de vue comme source de données et délégué de la vue de tableau. Vous pouvez également le faire en utilisant le Inspecteur des connexions sur la droite.

Source de données et délégué

En construisant cette interface tvOS, vous verrez qu’elle est presque identique à la construction d’une interface iOS, la différence majeure étant la plus grande échelle d’éléments.

En relation :  Les verrous de modèle ne sont PAS sécurisés sur les appareils Android

3. Comprendre le focus

Concentrons-nous maintenant sur du code. Ouvert ViewController.swift et remplacer la mise en œuvre du ViewController classe avec ce qui suit.

Si vous êtes familier avec le développement iOS, l’implémentation ci-dessus devrait vous sembler très familière. Vous êtes maintenant prêt à exécuter votre toute première application tvOS. presse Commande + R ou cliquez sur le bouton Exécuter en haut à gauche. Assurez-vous que votre appareil de test est réglé sur Apple TV 1080p.

Dispositif cible

Une fois que le simulateur Apple TV a démarré et que votre application est lancée, vous devriez voir l’écran suivant:

Application tvOS

Toutes nos félicitations! Vous avez maintenant votre toute première application tvOS opérationnelle. Pour contrôler l’application, vous devez utiliser la nouvelle télécommande Apple TV. Pour afficher la télécommande dans le simulateur, sélectionnez Matériel> Afficher la télécommande Apple TV dans le menu ou appuyez sur ⌘Commande + Maj + R.

Afficher la télécommande Apple TV

Une petite fenêtre distante devrait s’ouvrir à côté de la fenêtre de votre simulateur. Jouez avec la télécommande en tenant le Option sur votre clavier et en déplaçant le curseur de votre souris sur la télécommande. Vous verrez que lorsque vous déplacez le curseur de votre souris de haut en bas, la sélection dans la vue de tableau change.

Élément de tableau sélectionné

De même, lorsque vous faites glisser votre doigt vers la droite, le bouton de droite est sélectionné.

Bouton sélectionné

Dans le développement de tvOS, cela s’appelle la modification de l’élément de focus actuel. Contrairement aux applications iOS où les utilisateurs peuvent appuyer n’importe où sur l’écran à tout moment, les applications tvOS utilisent un style d’interaction pointer-cliquer.

Vous n’avez pas besoin de faire de travail supplémentaire en tant que développeur pour que vos éléments d’interface puissent être focalisés dans un ordre logique. Le moteur de mise au point intégré au framework UIKit sur tvOS examine la disposition de votre interface et gère tout le travail de déplacement du focus d’un élément à un autre.

Cependant, de nombreuses nouvelles méthodes et propriétés sont mises à votre disposition pour contrôler par programme la façon dont le focus est géré dans votre application. Beaucoup d’entre eux sont définis par le UIFocusEnvironment protocole, que le UIViewController, UIView, UIWindow, et UIPresentationController les classes se conforment automatiquement à. Il existe également plusieurs méthodes contenues dans les versions tvOS du UITableViewDelegate et UICollectionViewDelegate protocoles qui peuvent être utilisés pour contrôler la mise au point dans votre application.

À titre d’exemple, nous allons faire du bouton de droite l’élément de focus par défaut. Si vous exécutez l’application maintenant, vous verrez que le premier élément du tableau est initialement mis au point. Nous allons également désactiver le deuxième élément de la vue tableau pour qu’il ne soit pas focalisable. Ajoutez l’extrait de code suivant à l’implémentation de ViewController classe:

Nous remplaçons d’abord le preferredFocusedView propriété et renvoyez la première sous-vue, qui est actuellement le bouton à droite. le preferredFocusedView property est en lecture seule et ne peut être définie qu’en remplaçant son implémentation comme nous l’avons fait. Lorsque le contrôleur de vue est chargé, le moteur de focus recherche la vue renvoyée par cette propriété et la met automatiquement en focus.

Nous avons également mis en place le tableView(_:canFocusRowAtIndexPath:) méthode et retour false quand le indexPath.row est égal à 1. Sinon on retourne true. Comme vous vous en doutez, cette méthode de délégué détermine si une ligne spécifique peut être active ou non.

Lorsque vous créez et exécutez à nouveau votre application, vous verrez que le bouton à droite reçoit automatiquement le focus au lancement. Si le bouton de droite ne reçoit pas automatiquement le focus, la hiérarchie de vues de votre application peut être légèrement différente, c’est-à-dire que la première sous-vue de la vue du contrôleur de vue n’est pas égale au bouton de droite.

En relation :  5 meilleures applications de diabète pour suivre la glycémie, calculer la nourriture et écrire des journaux de bord

Vous remarquerez également que lorsque vous essayez de naviguer dans les lignes de la vue de table, la ligne du milieu est ignorée comme dicté par l’implémentation de la tableView(_:canFocusRowAtIndexPath:) méthode.

4. Composants et limitations de l’application tvOS

Bien que nous ne créerons aucune image dans ce didacticiel, il est important que vous compreniez les différents composants requis pour les applications tvOS ainsi que certaines des limitations.

Icônes d’application

Chaque application tvOS doit fournir deux icônes d’application:

  • Grand: 1 280 px x 768 px
  • Petit: 400 px x 240 px

La principale différence avec iOS est que les icônes de l’application tvOS peuvent être composées de trois couches maximum. Ceci afin qu’un effet de parallaxe puisse être obtenu sur l’écran d’accueil et partout ailleurs où l’icône de votre application apparaît. Si vous voulez voir cet effet par vous-même, allez dans le simulateur Apple TV, appuyez sur le bouton Accueil sur la télécommande (la petite icône TV). Concentrez le Réglages icône de l’application et maintenez le Option tout en déplaçant légèrement le curseur de la souris sur la télécommande. Vous verrez que l’icône de l’application répond à votre mouvement et les différentes couches de l’icône produisent un bel effet.

Image de lancement

Tout comme une application iOS classique, vous devez fournir une image statique à afficher une fois que votre application a été ouverte et se charge. La principale différence est que vous ne devez fournir qu’une seule image de 1 920 x 1 080 pixels.

Images des étagères supérieures

Si votre application a été placée dans le Étagère supérieure par un utilisateur, une fois concentré, vous pouvez afficher le contenu directement sur l’écran d’accueil de l’Apple TV. Il existe trois principaux types de contenu que vous pouvez afficher:

  • Image statique: Il ne s’agit que d’une image de 1 920 x 720 pixels que vous fournissez dans votre ensemble d’applications.
  • Dispositions de contenu dynamique: C’est ici que vous affichez une série d’images dans une interface similaire à une vue de collection. Ces images peuvent être sélectionnées par votre application à tout moment et ne doivent pas nécessairement être incluses dans l’offre groupée. Les trois tailles d’image que vous pouvez utiliser sont 404px x 608px, 608px x 608px et 908px x 512px. Toute combinaison de ces trois tailles peut être utilisée.
  • Bannière défilante: C’est là que vous fournissez un ensemble d’images à grand rapport hauteur / largeur à afficher les unes à côté des autres, l’une occupant la majorité de l’écran. Ce type de contenu est similaire à la page d’accueil de l’App Store iOS. Ces images doivent avoir une taille de 1940 px x 624 px.

Limites

Bien que la nouvelle Apple TV offre plus de stockage que la plupart des appareils iPhone d’une capacité minimale de 32 Go, il existe des limitations importantes pour les applications tvOS. Premièrement, les applications ne peuvent pas dépasser 200 Mo de taille. Tout contenu dont vous avez besoin en dehors de cette mémoire tampon de 200 Mo devra être téléchargé à l’aide du API de ressources à la demande introduit avec iOS 9 et maintenant tvOS.

Une autre chose dont vous devez également être conscient est que les applications tvOS n’ont pas de stockage local persistant. Cela signifie que toutes les données que vous devez conserver entre les lancements d’applications, telles que les sauvegardes de jeux, les photos et les vidéos, devront être stockées dans iCloud et récupérées si nécessaire.

Conclusion

Bien que nous n’ayons pas écrit beaucoup de code dans ce didacticiel, j’espère qu’il a servi de bonne introduction à la plate-forme tvOS. Vous connaissez maintenant les principales similitudes et différences entre le développement d’applications pour iOS et tvOS ainsi que les limitations imposées aux développeurs.

Dans les prochains didacticiels, nous approfondirons tvOS et découvrirons ce qui est possible avec tvOS et la nouvelle Apple TV.

Comme toujours, laissez vos commentaires et commentaires dans les commentaires ci-dessous.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.