Partager via

Utilisation des contrôleurs de barre d’onglets tvOS dans Xamarin

  • Article

Pour de nombreux types d’applications tvOS, la navigation principale est présentée sous la forme d’une barre d’onglets s’exécutant en haut de l’écran. L’utilisateur balaye vers la gauche et la droite dans la liste des catégories possibles et de la zone de contenu sous les modifications pour refléter la sélection de l’utilisateur.

Exemple de barre d’onglets

La barre de tabulation est translucide par défaut et apparaît toujours en haut de l’écran. Lorsque le focus est activé, une barre de tabulation couvre les 140 pixels supérieurs de l’écran, mais s’éloigne rapidement lorsque le focus se déplace vers la zone de contenu ci-dessous.

Barres d’onglets dans tvOS

Le UITabViewController travail est similaire et sert un objectif similaire sur tvOS comme il le fait dans iOS, avec les principales différences suivantes :

  • Contrairement à la barre de tabulation sur iOS qui apparaît en bas de l’écran, les barres de tabulation dans tvOS occupent les 140 pixels supérieurs de l’écran et sont translucides par défaut.
  • Lorsque le focus quitte la barre de tabulation pour la zone de contenu ci-dessous, la barre de tabulation glisse rapidement en haut de l’écran et est masquée. L’utilisateur peut appuyer sur le bouton Menu une fois ou balayer vers le haut sur Siri Remote pour afficher à nouveau la barre d’onglets.
  • Le balayage vers le bas sur Siri Remote déplace le focus vers la zone de contenu située sous la barre d’onglets vers le premier élément pouvant être mis en évidence dans le contenu affiché. Là encore, cela masque la barre de tabulation une fois le focus décalé.
  • Cliquer pour sélectionner une catégorie affichée dans la barre d’onglets bascule vers le contenu de cette catégorie et le focus est redirigé vers le premier élément pouvant être mis en évidence dans cette vue.
  • Le nombre de catégories affichées dans la barre d’onglets doit être fixe et toutes les catégories doivent être accessibles à tout moment, une catégorie donnée ne doit jamais être désactivée.
  • Les barres d’onglets ne prennent pas en charge la personnalisation sur tvOS. En outre, ils n’affichent pas la catégorie plus (comme iOS) s’il y a plus de catégories que possible dans la barre d’onglets.

Apple propose les suggestions suivantes pour utiliser les barres de tabulation :

  • Utilisez des barres de tabulation pour organiser logiquement le contenu : utilisez la barre de tabulation pour organiser logiquement le contenu avec lequel votre application tvOS fonctionne. Par exemple, Les graphiques recommandés, les graphiques les plus hauts, achetés et recherchés.
  • Ajouter des badges pour informer les utilisateurs du nouveau contenu : vous pouvez éventuellement afficher un badge (un ovale rouge avec un nombre blanc ou un point d’exclamation) pour informer l’utilisateur de nouveau contenu dans une catégorie.
  • Utilisez les badges de manière éparse : ne pas encombrer la barre d’onglets avec des badges et les afficher uniquement là où ils fournissent des informations critiques à l’utilisateur.
  • Limitez le nombre de catégories : pour réduire la complexité et maintenir l’application gérable, ne surchargez pas votre barre d’onglets avec des catégories et assurez-vous que toutes les catégories sont visibles et non bondées. Les titres courts simples fonctionnent mieux.
  • Ne désactivez pas une catégorie : tous les onglets (catégories) doivent toujours être visibles et activés à tout moment. Si un onglet donné n’a pas de contenu, fournissez une explication à l’utilisateur pour quelle raison. Par exemple, l’onglet Achats est vide si l’utilisateur n’a effectué aucun achat.

Éléments de la barre d’onglets

Chaque catégorie (tabulation) dans la barre de tabulation est représentée par un élément de barre d’onglets (UITabBarItem). Apple propose les suggestions suivantes pour utiliser les éléments de la barre d’onglets :

  • Utiliser des onglets basés sur du texte : alors que l’élément de barre de tabulation est en mesure d’être représenté sous forme d’icône, Apple suggère d’utiliser du texte uniquement parce qu’un titre concis est plus facile à interpréter qu’une icône.
  • Utilisez des noms courts, explicites ou verbes : un élément de barre d’onglet doit clairement relayer le contenu qu’il contient et fonctionne le mieux lorsqu’il s’agit d’un nom simple (par exemple, Photos, Films ou Musique) ou de verbes (tels que la recherche ou la lecture).

Barres d’onglets et storyboards

Le moyen le plus simple d’utiliser des barres de tabulation dans une application Xamarin.tvOS consiste à les ajouter à l’interface utilisateur de l’application à l’aide du Concepteur iOS.

  1. Démarrez une nouvelle application Xamarin.tvOS et sélectionnez application tabulée d’application>tvOS :>

    Sélectionner l’application à onglets

  2. Suivez toutes les invites pour créer une solution Xamarin.tvOS.

  3. Dans le panneau Solution, double-cliquez sur le Main.storyboard fichier et ouvrez-le pour modification.

  4. Pour modifier l’icône ou le titre d’une catégorie donnée, sélectionnez l’élémentde barre d’onglets du contrôleur d’affichage dans le plan du document :

    Élément de barre d’onglets pour le contrôleur d’affichage dans le plan du document

  5. Définissez ensuite les propriétés requises dans l’onglet Widget de l’Explorateur de propriétés :

    Onglet Widget

  6. Pour ajouter une nouvelle catégorie (onglet), déposez un contrôleur d’affichage sur votre aire de conception :

    Contrôleur d’affichage

  7. Cliquez sur le contrôle et faites glisser du contrôleur d’affichage tabulation vers le nouveau contrôleur d’affichage.

  8. Dans la fenêtre contextuelle, sélectionnez les contrôleurs d’affichage pour ajouter le nouvel affichage sous forme d’onglet (catégorie) :

    Sélectionner l’onglet

  9. Concevez la disposition de l’interface utilisateur pour chaque zone de contenu Caterogies comme normale, en ajoutant des éléments d’interface utilisateur dans le Concepteur iOS.

  10. Exposez tous les événements requis pour travailler avec vos contrôles d’interface utilisateur dans le code C#.

  11. Nommez les contrôles d’interface utilisateur que vous souhaitez exposer dans le code C#.

  12. Enregistrez vos modifications.

Important

Bien qu’il soit possible d’affecter des événements tels qu’un TouchUpInside élément d’interface utilisateur (tel qu’un UIButton) dans le Concepteur iOS, il ne sera jamais appelé, car Apple TV n’a pas d’écran tactile ou ne prend pas en charge les événements tactiles. Vous devez toujours utiliser l’événement lors de la Primary Action création de gestionnaires d’événements pour les éléments d’interface utilisateur tvOS.

Pour plus d’informations sur l’utilisation de Storyboards, consultez notre Guide de démarrage rapide Hello, tvOS.

Utilisation des barres d’onglets

Utilisez la Items propriété de la UITabBar collection pour accéder à la collection qu’elle UITabBarItems contient sous la forme d’un tableau indexé zéro (0). La SelectedItem propriété retourne l’onglet actuellement sélectionné (Catégorie) sous la forme .UITabBarItem

Utilisation des éléments de la barre d’onglets

Pour afficher un badge sous un onglet donné (un ovale rouge avec du texte blanc), utilisez le code suivant :

// Display a badge
TabBar.Items [2].BadgeValue = "10";

Ce qui produit les résultats suivants lors de l’exécution :

Élément de barre d’onglets avec badge

Utilisez la Title propriété de la UITabBarItem propriété pour modifier le titre et la Image propriété pour modifier l’icône.

Résumé

Cet article a abordé la conception et l’utilisation du contrôleur de barre de tabulation à l’intérieur d’une application Xamarin.tvOS.