Prendre le contrôle du moteur de mise au point tvOS

introduction

Sur iOS, les utilisateurs interagissent normalement avec vos applications via l’écran tactile de l’appareil. Sur tvOS, cependant, l’interaction de l’utilisateur est gérée en déplaçant le concentrer entre les vues à l’écran.

Heureusement, les implémentations tvOS des API UIKit gèrent automatiquement le changement de focus entre les vues. Bien que ce système intégré fonctionne très bien, pour des dispositions et / ou des objectifs de vue spécifiques, il peut être nécessaire de contrôler parfois manuellement le moteur de mise au point.

Dans ce tutoriel, nous examinons en profondeur le moteur de focus tvOS. Vous apprenez comment cela fonctionne et comment le contrôler comme vous le souhaitez.

Conditions préalables

Ce didacticiel nécessite que vous exécutiez Xcode 7.3 ou version ultérieure avec le dernier SDK tvOS 9.2. Si vous souhaitez suivre, vous devez également télécharger le projet de démarrage depuis GitHub.

1. Présentation du moteur de mise au point

Le but du moteur de focus de tvOS est d’aider les développeurs à se concentrer sur le contenu unique de leur propre application plutôt que de réimplémenter les comportements de navigation de base. Cela signifie que, alors que de nombreux utilisateurs utiliseront la télécommande Siri d’Apple TV, le moteur de mise au point prend automatiquement en charge tous les périphériques d’entrée Apple TV actuels et futurs.

Cela signifie qu’en tant que développeur, vous n’avez pas à vous soucier de la façon dont un utilisateur interagit avec votre application. Un autre objectif important du moteur de mise au point est de créer une expérience utilisateur cohérente entre les applications. Pour cette raison, il n’existe aucune API permettant à une application de déplacer le focus.

Mouvement de concentration

Lorsque l’utilisateur interagit avec la télécommande de l’Apple TV en faisant glisser la surface tactile en verre dans une direction particulière, le moteur de mise au point recherche une vue focalisable possible dans cette direction et, s’il est trouvé, déplace le focus vers cette vue. Si aucune vue focalisable n’est trouvée, le focus reste là où il se trouve actuellement.

En plus de déplacer la mise au point dans une direction particulière, le moteur de mise au point gère également plusieurs autres comportements plus avancés, tels que:

  • déplacer le focus au-delà de vues particulières si, par exemple, l’utilisateur glisse rapidement sur la surface tactile de la télécommande Apple TV
  • exécution d’animations à des vitesses basées sur la vitesse du changement de mise au point
  • lecture des sons de navigation lorsque la mise au point change
  • animation automatique des décalages de la vue de défilement lorsque la mise au point doit passer à une vue actuellement hors écran

Lors de la détermination de l’endroit où le focus doit se déplacer dans une application, le moteur de focus prend une image interne de l’interface actuelle de votre application et met en évidence tous les éléments visibles qui sont focalisables. Cela signifie que toutes les vues masquées, y compris les vues avec une valeur alpha de 0, ne peuvent pas être focalisées. Cela signifie également que, pour toute vue masquée par une autre vue, seule la partie visible est prise en compte par le moteur de mise au point.

Si le moteur de focus trouve une vue vers laquelle il peut déplacer le focus, il notifie les objets conformes à la UIFocusEnvironment protocole impliqué dans le changement. Les classes UIKit conformes à la UIFocusEnvironment protocole sont UIWindow, UIViewController, UIView, et UIPresentationController. Le moteur de mise au point appelle le shouldUpdateFocusInContext(_:) méthode de tous les objets d’environnement de focus qui contiennent soit la vue actuellement focalisée, soit la vue vers laquelle le focus se déplace. Si l’une de ces méthodes appelle retourne false, la mise au point n’est pas modifiée.

Focus initial

le UIFocusEnvironment protocole représente un objet connu sous le nom de environnement de concentration. Le protocole définit un preferredFocusView propriété qui spécifie où le focus doit se déplacer si l’environnement actuel devient lui-même focalisé.

Par exemple, un UIViewController par défaut de l’objet preferredFocusView est son point de vue racine. Comme chacun UIView objet peut également spécifier sa propre vue de mise au point préférée, un chaîne de mise au point préférée peuvent être créés. Le moteur de focus tvOS suit cette chaîne jusqu’à ce qu’un objet particulier retourne soit self ou nil de son preferredFocusView propriété. En utilisant ces propriétés, vous pouvez rediriger le focus dans toute l’interface utilisateur et également spécifier quelle vue doit être focalisée en premier lorsqu’un contrôleur de vue apparaît à l’écran.

En relation :  Les meilleurs smartphones à petit budget: 7 téléphones bon marché pour les États-Unis

Il est important de noter que si vous ne modifiez aucun des preferredFocusView propriétés de vos vues et contrôleurs de vue, le moteur de focus par défaut concentre la vue la plus proche du coin supérieur gauche de l’écran.

Mise à jour du focus

Une mise à jour de focus se produit lorsque l’un des trois événements a lieu:

  • l’utilisateur provoque un mouvement de mise au point
  • l’application demande explicitement une mise à jour du focus
  • le système déclenche et mise à jour automatique

Chaque fois qu’une mise à jour a lieu, les événements suivants suivent:

  • Le courant UIScreen objets focusedView la propriété est remplacée par la vue vers laquelle le focus se déplace.
  • Le moteur de mise au point appelle le didUpdateFocusInContext(_:withAnimationCoordinator:) de chaque objet d’environnement de focus impliqué dans la mise à jour de focus. Il s’agit du même ensemble d’objets que le moteur de focus vérifie en appelant chaque objet shouldUpdateFocusInContext(_:) méthode avant de mettre à jour le focus. C’est à ce stade que vous pouvez ajouter des animations personnalisées à exécuter en conjonction avec les animations liées au focus fournies par le système.
  • Toutes les animations coordonnées, à la fois les animations système et personnalisées, sont exécutées simultanément.
  • Si la vue vers laquelle le focus se déplace est actuellement hors écran et dans une vue de défilement, le système fait défiler la vue à l’écran de sorte que la vue devienne visible pour l’utilisateur.

Pour mettre à jour manuellement le focus dans l’interface utilisateur, vous pouvez appeler le setNeedsFocusUpdate() méthode de tout objet d’environnement de focus. Cela réinitialise le focus et le ramène à l’environnement preferredFocusView.

Le système peut également déclencher une mise à jour automatique de la mise au point dans plusieurs situations, notamment lorsqu’une vue focalisée est supprimée de la hiérarchie de vues, une vue de table ou de collection recharge ses données, ou lorsqu’un nouveau contrôleur de vue est présenté ou ignoré.

Bien que le moteur de mise au point tvOS soit assez complexe et comporte de nombreuses pièces mobiles, les API UIKit qui vous sont fournies facilitent grandement l’utilisation de ce système et le font fonctionner comme vous le souhaitez.

2. Contrôle du moteur de mise au point

Guides de mise au point

Pour étendre le moteur de focus, nous allons implémenter un comportement de bouclage. Notre application actuelle a une grille de six boutons, comme indiqué dans la capture d’écran ci-dessous.

Configuration du projet

Ce que nous allons faire, c’est permettre à l’utilisateur de déplacer le focus vers la droite, des boutons 3 et 6, et de faire revenir le focus sur les boutons 1 et 4 respectivement. Comme le moteur de focus ignore toutes les vues invisibles, cela ne peut pas être fait en insérant un UIView (y compris une vue avec une largeur et une hauteur de 0) et en changeant sa preferredFocusedView propriété.

Au lieu de cela, nous pouvons accomplir cela en utilisant le UIFocusGuide classe. Cette classe est une sous-classe de UILayoutGuide et représente une région rectangulaire focalisable sur l’écran tout en étant complètement invisible et n’interagissant pas avec la hiérarchie de vue. En plus de tous les UILayoutGuide propriétés et méthodes, les UIFocusGuide class ajoute les propriétés suivantes:

  • preferredFocusedView: Cette propriété fonctionne comme je l’ai décrit précédemment. Vous pouvez considérer cela comme la vue vers laquelle vous souhaitez que le guide de mise au point soit redirigé.
  • enabled: Cette propriété vous permet d’activer ou de désactiver le guide de mise au point.

Dans votre projet, ouvrez ViewController.swift et mettre en œuvre le viewDidAppear(_:) méthode de la ViewController classe comme indiqué ci-dessous:

Dans viewDidAppear(_:), nous créons des guides de mise au point à droite des boutons 3 et 6, et à gauche des boutons 1 et 4. Comme ces guides de mise au point représentent une région focalisable dans l’interface utilisateur, ils doivent avoir une hauteur et une largeur définies. Avec ce code, nous donnons aux régions la même taille que les autres boutons afin que la logique basée sur l’élan du moteur de focus soit cohérente avec les boutons visibles.

En relation :  Comment prendre des captures d'écran sur votre Mac, PC Windows, iPhone et Android

Animations coordonnées

Pour illustrer le fonctionnement des animations coordonnées, nous mettons à jour le alpha propriété des boutons lorsque le focus change. Dans ViewController.swift, implémentez le didUpdateFocusInContext(_:withAnimationCoordinator:) méthode dans le ViewController classe:

le context paramètre de didUpdateFocusInContext(_:withAnimationCoordinator:) est un UIFocusUpdateContext objet qui a les propriétés suivantes:

  • previouslyFocusedView: fait référence à la vue à partir de laquelle le focus se déplace
  • nextFocusedView: fait référence à la vue vers laquelle le focus se déplace
  • focusHeading: une UIFocusHeading valeur d’énumération représentant la direction dans laquelle le focus se déplace

Avec la mise en œuvre de didUpdateFocusInContext(_:withAnimationCoordinator:), nous ajoutons une animation coordonnée pour changer la valeur alpha du bouton précédemment focalisé à 0.5 et celle du bouton actuellement focalisé à 1.0.

Exécutez l’application dans le simulateur et déplacez le focus entre les boutons de l’interface utilisateur. Vous pouvez voir que le bouton actuellement focalisé a un alpha de 1.0 tandis que le bouton précédemment focalisé a un alpha de 0.5.

Boutons transparents

La première fermeture du addCoordinatedAnimations(_:completion:) La méthode fonctionne de la même manière qu’une méthode UIView fermeture de l’animation. La différence est qu’il hérite de sa fonction de durée et de minutage du moteur de mise au point.

Si vous souhaitez exécuter une animation avec une durée personnalisée, vous pouvez ajouter n’importe quel UIView animation dans cette fermeture avec le OverrideInheritedDuration option d’animation. Le code suivant est un exemple de la façon d’implémenter une animation personnalisée qui s’exécute dans la moitié du temps des animations de focus:

En utilisant le UIFocusGuide et en utilisant des animations personnalisées, vous pouvez étendre le comportement standard du moteur de mise au point tvOS en fonction de vos besoins.

Limiter le moteur de mise au point

Comme je l’ai mentionné précédemment, pour décider si le focus doit être déplacé ou non d’une vue à une autre, le moteur de focus appelle le shouldUpdateFocusInContext(_:) méthode sur chaque environnement de mise au point impliqué. Si l’une de ces méthodes appelle retourne false, la mise au point n’est pas modifiée.

Dans notre application, nous allons remplacer cette méthode dans le ViewController classe afin que le focus ne puisse pas être déplacé vers le bas si le bouton actuellement focalisé est 2 ou 3. Pour ce faire, implémentez shouldUpdateFocusInContext(_:) dans le ViewController classe comme indiqué ci-dessous:

Dans shouldUpdateFocusInContext(_:), nous vérifions d’abord si la vue précédemment focalisée est le bouton 2 ou 3. Nous inspectons ensuite l’en-tête de focus. Si le cap est égal à Down, nous retournons false afin que le focus actuel ne change pas.

Exécutez votre application une dernière fois. Vous ne pouvez pas déplacer la mise au point vers le bas des boutons 2 et 3 aux boutons 5 et 6.

Conclusion

Vous devriez maintenant être à l’aise de contrôler et de travailler avec le moteur de mise au point de tvOS. Vous savez maintenant comment fonctionne le moteur de mise au point et comment vous pouvez le manipuler pour répondre à tous vos besoins pour vos propres applications Apple TV.

Comme toujours, assurez-vous de laisser 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.