Utilisation de la navigation et du focus tvOS dans Xamarin

  • Article

Cet article décrit le concept de Focus et la façon dont il est utilisé pour présenter et gérer la navigation à l’intérieur d’une application Xamarin.tvOS.

Cet article décrit le concept de Focus et la façon dont il est utilisé pour gérer la navigation dans l’interface utilisateur d’une application Xamarin.tvOS. Nous allons examiner comment les contrôles de navigation tvOS intégrés utilisent focus, mise en surbrillance et sélection pour fournir la navigation de l’interface utilisateur de votre application Xamarin.tvOS.

tvOS apps User Interface Navigation

Ensuite, nous allons examiner la façon dont Focus peut être utilisé avec des images parallaxe et superposées pour fournir des indices visuels pour l’état de navigation actuel à l’utilisateur final.

Enfin, nous allons examiner l’utilisation du focus, du focus Mises à jour, des guides de focus, du focus dans les collections et de l’activation de parallax sur les vues d’images dans vos applications Xamarin.tvOS.

Les utilisateurs de votre application Xamarin.tvOS n’interagissent pas directement avec son interface comme avec iOS où ils appuient sur des images sur l’écran de l’appareil, mais indirectement depuis l’ensemble de la salle à l’aide de Siri Remote. Vous devrez garder cela à l’esprit lors de la conception de l’interface utilisateur de votre application afin qu’elle circule naturellement, mais maintient l’utilisateur immergé dans l’expérience Apple TV.

Une application tvOS réussie implémente la navigation de manière fluide qui prend en charge l’objectif de l’application et la structure des données qu’elle présente sans attirer l’attention sur la navigation elle-même. Concevez votre navigation afin qu’elle se sente naturelle et familière sans dominer l’interface utilisateur ou dessiner le focus loin du contenu et de l’expérience utilisateur des applications.

The tvOS settings app

Lors de l’utilisation d’une Apple TV, l’utilisateur navigue généralement dans un ensemble empilé d’écrans, chacun présentant un ensemble donné de contenu. À son tour, chaque nouvel écran peut entraîner un ou plusieurs sous-écrans de contenu à l’aide de contrôles d’interface utilisateur standard tels que boutons, barres d’onglet, tables, vues de collection ou vues fractionnées.

Avec chaque nouvel écran de données, l’utilisateur navigue plus en profondeur dans cette pile d’écrans. En utilisant le bouton Menu sur Siri Remote, ils peuvent naviguer vers l’arrière dans la pile pour revenir à un écran précédent ou un menu principal.

Apple suggère de garder à l’esprit les éléments suivants lors de la conception de la navigation pour votre application tvOS :

  • Disposition de votre navigation pour rendre la recherche de contenu rapide et facile : les utilisateurs souhaitent accéder au contenu au sein de votre application dans le plus petit nombre d’appuis, de clics et de balayages possibles. Simplifiez votre navigation et organisez le contenu en nombre minimal d’écrans.
  • Créez une interface fluide à l’aide de l’interface tactile : assurez-vous qu’un utilisateur peut se déplacer entre les éléments focusables avec un minimum de frictions en utilisant le plus petit nombre de mouvements possibles.
  • Conception avec Focus à l’esprit : étant donné que l’utilisateur interagit avec du contenu dans la salle, il doit déplacer Focus vers un élément d’interface utilisateur avant d’interagir avec lui à l’aide de Siri Remote. Les utilisateurs seront frustrés par votre application s’il nécessite trop de mouvements pour qu’ils atteignent leurs objectifs.
  • Fournir une navigation vers l’arrière via le bouton de menu : pour créer une expérience simple et familière, autorisez les utilisateurs à naviguer vers l’arrière à l’aide du bouton Menu de Siri Remote. Appuyer sur le bouton Menu doit toujours revenir à l’écran précédent ou revenir au menu principal de l’application. Au niveau supérieur de l’application, appuyez sur le bouton Menu pour revenir à l’écran d’accueil Apple TV.
  • En règle générale, évitez d’afficher un bouton Précédent, car l’appui sur le bouton Menu sur Siri Remote navigue vers l’arrière dans la pile d’écran, évitez d’afficher un contrôle supplémentaire qui dupliquez ce comportement. Une exception à cette règle concerne l’achat d’écrans ou d’écrans avec des actions destructrices (comme la suppression de contenu) où un bouton Annuler doit également être affiché.
  • Afficher de grandes collections sur un seul écran, au lieu de Plusieurs - Le Siri Remote a été conçu pour faire passer une grande collection de contenu rapide et facile à l’aide de mouvements. Si votre application fonctionne avec une grande collection d’éléments focusables, envisagez de les conserver sur un seul écran au lieu de les diviser en plusieurs écrans qui nécessitent davantage de navigation dans la partie de l’utilisateur.
  • Utilisez des contrôles standard pour la navigation : là encore UIKit , pour créer une expérience utilisateur simple et familière, dans la mesure du possible, utilisez des contrôles intégrés tels que les contrôles de page, les barres d’onglet, les contrôles segmentés, les vues de table, les vues de collection et les vues fractionnées pour la navigation de votre application. Étant donné que l’utilisateur est déjà familiarisé avec ces éléments, il sera en mesure de naviguer intuitivement dans votre application.
  • Favoriser la navigation horizontale de contenu - En raison de la nature de l’Apple TV, le balayage vers la gauche vers la droite sur Siri Remote est plus naturel que vers le haut et le bas. Tenez compte de cette option lors de la conception de dispositions de contenu pour votre application.

Focus et sélection

Sur Apple TV, une image, un bouton ou un autre élément d’interface utilisateur est considéré comme étant en focus lorsqu’il s’agit de la cible de la navigation actuelle.

Focus and Selection example

Contrairement aux appareils iOS où l’utilisateur interagit directement avec des éléments sur l’écran tactile de l’appareil, les utilisateurs interagissent avec des éléments tvOS de l’ensemble de la salle à l’aide de Siri Remote. Pour présenter et gérer cette interaction utilisateur, Apple TV utilise un modèle basé sur Focus .

À l’aide de mouvements et de boutons appuyant sur Siri Remote, l’utilisateur déplace le focus d’un élément d’interface utilisateur vers un autre. Une fois le focus déplacé vers l’élément souhaité, l’utilisateur clique pour sélectionner le contenu ou activer l’action représentée par cet élément.

À mesure que le focus change, des animations et des effets subtils (tels que l’effet parallax sur les images) sont utilisés pour identifier clairement l’élément Interface utilisateur qui a actuellement le focus.

Apple propose les suggestions suivantes pour l’utilisation du focus et de la sélection :

  • Utilisez des contrôles d’interface utilisateur intégrés pour les effets de mouvement : à l’aide UIKit de l’API Focus dans votre interface utilisateur, le modèle Focus applique automatiquement les effets visuels et de mouvement par défaut à vos éléments d’interface utilisateur. Cela rend votre application native et familière aux utilisateurs de la plateforme Apple TV et permet un mouvement fluide et intuitif entre les éléments focusables.
  • Déplacer le focus dans les directions attendues - Sur Apple TV, presque tous les éléments utilisent une manipulation indirecte. Par exemple, l’utilisateur utilise Siri Remote pour déplacer le focus et le système fait défiler automatiquement l’interface pour que l’élément actuellement ciblé soit visible. Si votre application implémente ce type d’interaction, assurez-vous que le focus se déplace dans la direction du mouvement de l’utilisateur. Par conséquent, si l’utilisateur effectue un mouvement de balayage vers la droite sur le focus Siri Remote doit se déplacer vers la droite (ce qui peut entraîner le défilement de l’écran vers la gauche). L’une des exceptions à cette règle est les éléments en plein écran qui utilisent la manipulation directe (où le balayage vers le haut déplace l’élément vers le haut).
  • Assurez-vous que l’élément prioritaire est évident : étant donné que vos utilisateurs interagissent avec vos éléments d’interface utilisateur de loin, il est essentiel que l’élément actuellement axé se distingue. En règle générale, cela sera géré automatiquement par des éléments intégrés UIKit . Pour les contrôles personnalisés, utilisez des fonctionnalités telles que la taille de l’élément ou l’ombre pour afficher le focus.
  • Utilisez Parallax pour rendre les éléments ciblés réactifs - Petits mouvements circulaires sur le Siri Remote entraînent un mouvement doux et en temps réel de l’élément ciblé. Cet effet Parallax est intégré à UIKitdes images superposées pour donner à l’utilisateur une idée de connexion à l’élément ciblé.
  • Créer des éléments focusables de la taille appropriée : les éléments volumineux avec un espacement suffisant sont plus faciles à sélectionner et à naviguer que les éléments plus petits.
  • Élément d’interface utilisateur de conception pour se concentrer ou non ciblé - Généralement Apple TV représente l’élément prioritaire en augmentant sa taille. Assurez-vous que les éléments de l’interface utilisateur de vos applications s’affichent très bien à n’importe quelle taille de présentation et, si nécessaire, fournissez des ressources pour des éléments de taille supérieure.
  • Représenter les modifications du focus de manière fluide : utilisez l’animation pour passer en douceur d’un état prioritaire et sans focus pour empêcher les transitions d’être jarring.
  • N’affichez pas de curseur : les utilisateurs s’attendent à naviguer dans l’interface utilisateur de votre application à l’aide du focus et non en déplaçant un curseur autour de l’écran. Votre interface utilisateur doit toujours utiliser le modèle Focus pour présenter une expérience utilisateur cohérente.

Utilisation du focus

Il peut arriver que vous souhaitiez créer un contrôle personnalisé qui peut devenir un élément focusable. Si tel est le cas, remplacez la CanBecomeFocused propriété et le retour true, sinon retournez false. Par exemple :

public class myView : UIView
{
    public override bool CanBecomeFocused {
        get {return true;}
    }
}

À tout moment, vous pouvez utiliser la Focused propriété d’un UIKit contrôle pour voir s’il s’agit d’un élément actif. Si true l’élément d’interface utilisateur a actuellement le focus, sinon il ne le fait pas. Par exemple :

// Is my view in focus?
if (myView.Focused) {
    // Do something
    ...
}

Bien que vous ne puissiez pas déplacer directement le focus vers un autre élément d’interface utilisateur via du code, vous pouvez spécifier l’élément d’interface utilisateur qui obtient d’abord le focus lorsqu’un écran est chargé en définissant sa PreferredFocusedView propriété truesur . Par exemple :

// Make the play button the starting focus item
playButton.PreferredFocusedView = true;

Utilisation du Mises à jour Focus

Lorsque l’utilisateur déplace le focus d’un élément d’interface utilisateur vers un autre (par exemple, en réponse à un mouvement sur Siri Remote), un événement de mise à jour du focus est envoyé à la fois à l’élément qui perd le focus et à l’élément qui obtient le focus.

Pour les éléments personnalisés qui héritent ou UIViewUIViewController, vous pouvez remplacer plusieurs méthodes pour utiliser l’événement Focus Update :

  • DidUpdateFocus : cette méthode est appelée à tout moment où l’affichage gagne ou perd le focus.
  • ShouldUpdateFocus : utilisez cette méthode pour définir où le focus est autorisé à se déplacer.

Pour demander que le moteur focus revient à l’élément PreferredFocusedView d’interface utilisateur, appelez la SetNeedsUpdateFocus méthode du contrôleur de vue.

Important

L’appel SetNeedsUpdateFocus n’a effet que si le contrôleur de vue sur lequel il est appelé contient la vue qui a actuellement le focus.

Utilisation des guides de focus

Le moteur focus intégré à tvOS est idéal pour gérer les mouvements entre les éléments qui tombent sur une grille horizontale et verticale. En règle générale, vous devez ne rien faire plus que d’ajouter les éléments d’interface utilisateur à votre conception d’interface et le moteur Focus gère automatiquement le déplacement entre ces éléments sans intervention du développeur.

Toutefois, il peut y avoir des moments, en raison des nécessités de la conception de votre interface utilisateur, lorsque les éléments de l’interface utilisateur ne tombent pas sur une grille horizontale et verticale et peuvent être inaccessibles, car ils sont diagonales les uns avec les autres. Cela se produit parce que le moteur focus a été conçu pour gérer un déplacement simple vers le haut, le bas, la gauche et la droite entre les éléments de l’interface utilisateur uniquement.

Prenez la disposition suivante de l’interface utilisateur pour obtenir un exemple :

Working with Focus Guides example

Étant donné que le bouton Plus d’informations ne tombe pas sur une grille horizontale et verticale avec le bouton Acheter , il serait inaccessible à l’utilisateur. Toutefois, cela peut être facilement corrigé à l’aide d’un guide focus pour fournir des conseils de mouvement au moteur focus.

Un guide de focus (UIFocusGuide) expose une zone non visible de l’affichage comme pouvant être focusable sur le moteur focus, ce qui permet au focus d’être redirigé vers une autre vue.

Par conséquent, pour résoudre l’exemple ci-dessus, le code suivant peut être ajouté au contrôleur de vue pour créer un guide de focus entre les boutons Plus d’informations et Acheter :

public UIFocusGuide FocusGuide = new UIFocusGuide ();
...

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Add Focus Guide to layout
    View.AddLayoutGuide (FocusGuide);

    // Define Focus Guide that will allow the user to move
    // between the More Info and Buy buttons.
    FocusGuide.LeftAnchor.ConstraintEqualTo (BuyButton.LeftAnchor).Active = true;
    FocusGuide.TopAnchor.ConstraintEqualTo (MoreInfoButton.TopAnchor).Active = true;
    FocusGuide.WidthAnchor.ConstraintEqualTo (BuyButton.WidthAnchor).Active = true;
    FocusGuide.HeightAnchor.ConstraintEqualTo (MoreInfoButton.HeightAnchor).Active = true;
}

Tout d’abord, un nouveau UIFocusGuide est créé et ajouté à la collection View’s Layout Guide à l’aide de la AddLayoutGuide méthode.

Ensuite, les ancres haut, gauche, largeur et hauteur du Guide de focus sont ajustées par rapport aux boutons Plus d’informations et d’achat pour le positionner entre eux. Consultez l'article :

Example Focus Guide

Il est également important de noter que les nouvelles contraintes sont activées à mesure qu’elles sont créées en définissant leur Active propriété sur true:

FocusGuide.LeftAnchor.ConstraintEqualTo (...).Active = true;

Avec le nouveau Guide de focus établi et ajouté à la vue, la méthode du contrôleur de DidUpdateFocus vue peut être remplacée et le code suivant ajouté pour passer des boutons Plus d’informations et Acheter :

public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
    base.DidUpdateFocus (context, coordinator);

    // Get next focusable item from context
    var nextFocusableItem = context.NextFocusedView;

    // Anything to process?
    if (nextFocusableItem == null) return;

    // Decide the next focusable item based on the current
    // item with focus
    if (nextFocusableItem == MoreInfoButton) {
        // Move from the More Info to Buy button
        FocusGuide.PreferredFocusedView = BuyButton;
    } else if (nextFocusableItem == BuyButton) {
        // Move from the Buy to the More Info button
        FocusGuide.PreferredFocusedView = MoreInfoButton;
    } else {
        // No valid move
        FocusGuide.PreferredFocusedView = null;
    }
}

Tout d’abord, ce code est obtenu NextFocusedView à partir de celui UIFocusUpdateContext qui a été passé (context). Si cette vue est null, aucun traitement n’est nécessaire et la méthode s’est terminée.

Ensuite, la nextFocusableItem valeur est évaluée. S’il correspond aux boutons Plus d’informations ou d’achat , le focus est envoyé au bouton opposé à l’aide de la propriété du PreferredFocusedView Guide de focus. Par exemple :

// Move from the More Info to Buy button
FocusGuide.PreferredFocusedView = BuyButton;

Si aucun bouton n’est la source du maj Focus, la PreferredFocusedView propriété est désactivée :

// No valid move
FocusGuide.PreferredFocusedView = null;

Utilisation du focus dans les collections

Lorsque vous décidez si un élément individuel peut ou non être focusable dans un UICollectionView ou un UITableView, vous remplacerez les méthodes du ou UITableViewDelegate des UICollectionViewDelegate deux. Par exemple :

public class CardHandDelegate : UICollectionViewDelegateFlowLayout
{
    ...
    public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
    {
        if (indexPath == null) {
            return false;
        } else {
            var controller = collectionView as CardHandViewController;
            return !controller.Hand [indexPath.Row].IsFaceDown;
        }
    }
}

La CanFocusItem méthode retourne true si l’élément actuel peut être en focus, sinon elle retourne false.

Si vous souhaitez qu’un ou un UICollectionViewUITableView rappel soit mémorisé et restaurez le focus sur le dernier élément lorsqu’il perd et récupère le focus, définissez la RemembersLastFocusedIndexPath propriété sur true.

Focus et Parallax

Comme indiqué ci-dessus, un élément User Interface est considéré comme étant actif lorsqu’il s’agit de l’élément actuel pendant un événement de navigation. En règle générale, quand un élément entre en focus, sa taille est légèrement augmentée et elle est visuellement élevée à l’aide d’une ombre.

Si l’utilisateur effectue un mouvement lent et circulaire sur Siri Remote, l’élément prioritaire passe en temps réel en réponse à ce mouvement. Au fur et à mesure que le sway se produit, un sheen éclairé est appliqué à son image faisant apparaître la surface à briller. Après une quantité donnée d’inactivité, tout contenu hors focus s’estompé et l’élément Prioritaire augmente encore plus.

Ces effets fonctionnent ensemble pour fournir une connexion mentale entre le contenu sur l’écran de télévision et l’utilisateur interagissant avec Apple TV à partir du canapé.

Sur apple TV, cet effet Parallax est utilisé tout au long du système pour transmettre un sens de profondeur et de dynamique 3D aux éléments en focus. tvOS utilise une série d’images transparentes en couches qu’il déplace et met à l’échelle dynamiquement pour créer cet effet.

Les images en couches sont requises pour l’icône de votre application tvOS et sont prises en charge pour le contenu dynamique top shelf. Bien qu’il ne soit pas nécessaire, Apple suggère fortement d’implémenter des images en couches dans d’autres éléments pouvant être mis au point dans l’interface utilisateur de votre application.

Activation de Parallax

Le UIImageView contrôle (ou tout contrôle qui hérite de UIImageView) prend automatiquement en charge l’effet Parallax. Par défaut, cette prise en charge est désactivée pour l’activer, utilisez le code suivant :

myImageView.AdjustsImageWhenAncestorFocused = true;

Avec cette propriété définie truesur , l’affichage image obtient automatiquement l’effet Parallax lorsqu’il est sélectionné par l’utilisateur et au focus.

Résumé

Cet article a abordé le concept de Focus et la façon dont il est utilisé pour gérer la navigation dans l’interface utilisateur d’une application Xamarin.tvOS. Il examine la façon dont les contrôles de navigation tvOS intégrés utilisent focus, mise en surbrillance et sélection pour fournir la navigation. Ensuite, il a examiné comment focus peut être utilisé avec les images parallax et superposées pour fournir des indices visuels pour l’état de navigation actuel à l’utilisateur final. Enfin, il a examiné l’utilisation de Focus, Focus Mises à jour, Focus dans les collections et activation de Parallax.