Partager via

Utilisation des contrôleurs de vue fractionnés tvOS dans Xamarin

  • Article

Avertissement

Le concepteur iOS a été déconseillé dans Visual Studio 2019 version 16.8 et Visual Studio 2019 pour Mac version 8.8, et supprimé dans Visual Studio 2019 version 16.9 et Visual Studio pour Mac version 8.9. La méthode recommandée pour créer des interfaces utilisateur iOS est directement sur un Mac exécutant le Générateur d’interface de Xcode. Pour plus d’informations, consultez Conception d’interfaces utilisateur avec Xcode.

Un contrôleur de vue fractionné présente et gère un contrôleur de vue Maître et Détail côte à côte, à l’écran en même temps. Les contrôleurs d’affichage fractionné sont utilisés pour présenter du contenu persistant et focusable dans l’affichage maître (la plus petite section à gauche) et des détails connexes dans l’affichage détail (la plus grande section à droite).

Exemple d’affichage fractionné

À propos des contrôleurs d’affichage fractionné

Comme indiqué ci-dessus, un contrôleur de vue fractionné gère un contrôleur de vue Maître et Détail présenté côte à côte, avec le Masque étant l’affichage plus petit à gauche, plus le détail est grand à droite.

En outre, le contrôleur de vue maître peut être masqué ou affiché comme requis :

Contrôleur de vue maître masqué

Les contrôleurs de vues fractionnées sont souvent utilisés pour présenter une liste de contenu filtrable, avec les catégories dans l’affichage maître et les résultats filtrés dans l’affichage détail. Il s’agit généralement d’une vue table à gauche et d’une vue collection à droite.

Lors de la conception d’une interface utilisateur qui nécessite un contrôleur de vue fractionné, Apple suggère d’utiliser les contrôleurs de vue Maître et Détail qui ne changent pas (seuls les modifications de contenu, et non la structure). Si vous avez besoin de permuter des contrôleurs de vue, il est préférable d’utiliser un contrôleur de navigation comme base du contrôleur de vue qui doit changer (maître ou détail).

Apple propose les suggestions suivantes pour utiliser les contrôleurs de vue fractionnés :

  • Utilisez le pourcentage de fractionnement correct : par défaut, le contrôleur de vue fractionné utilise un tiers de l’écran pour le contrôleur de vue maître et deux tiers pour le contrôleur de vue détail. Si vous le souhaitez, vous pouvez utiliser un fractionnement de 50/50. Choisissez le pourcentage approprié pour que votre contenu apparaisse équilibré à l’écran.
  • Conserver la sélection principale : alors que le contenu de l’affichage des détails peut changer est la réponse à la sélection d’un utilisateur dans l’affichage maître, le contenu de l’affichage maître doit être résolu. En outre, vous devez afficher clairement l’élément actuellement sélectionné dans l’affichage maître.
  • Utilisez un titre unifié unique : en règle générale, vous souhaiterez utiliser un titre unique centré dans l’affichage Détail, au lieu d’un titre dans les détails à la fois dans le détail et dans l’affichage maître.

Contrôleurs d’affichage fractionné et storyboards

Le moyen le plus simple d’utiliser les contrôleurs de vue fractionnés dans une application Xamarin.tvOS consiste à les ajouter à l’interface utilisateur de l’application à l’aide du Concepteur iOS.

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

  2. Faites glisser un contrôleur d’affichage fractionné à partir de la boîte à outils et déposez-le dans l’affichage :

    Contrôleur d’affichage fractionné

  3. Par défaut, le Concepteur iOS installe un contrôleur de navigation et un contrôleur de vue en mode Maître. Si cela ne correspond pas aux exigences de votre application, supprimez-les simplement.

  4. Si vous supprimez l’affichage maître par défaut, faites glisser un nouveau contrôleur d’affichage sur l’aire de conception :

    Contrôleur d’affichage

  5. Cliquez sur le contrôle et faites glisser du contrôleur d’affichage fractionné vers le nouveau contrôleur de vue maître.

  6. Sélectionnez Master dans le menu contextuel :

    Sélectionner Maître dans le menu contextuel

  7. Concevez le contenu de vos vues maître et détail :

    Exemple de mise en page

  8. Attribuez des noms dans l’ongletWidget du panneau Propriétés pour travailler avec vos contrôles d’interface utilisateur dans le code C#.

  9. Enregistrez vos modifications et revenez à Visual Studio pour Mac.

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

Utilisation des contrôleurs d’affichage fractionné

Comme indiqué ci-dessus, un contrôleur de vue fractionné est souvent utilisé dans des situations où vous affichez du contenu filtré pour l’utilisateur. Les catégories principales sont affichées à gauche dans l’affichage maître et les résultats filtrés à droite dans l’affichage détail en fonction de la sélection de l’utilisateur.

Accès au maître et au détail

Si vous devez accéder aux contrôleurs de vue maître et détail par programmation, utilisez la ViewControllers propriété du contrôleur de vue fractionné. Par exemple :

// Gain access to master and detail view controllers
var masterController = ViewControllers [0] as MasterViewController;
var detailController = ViewControllers [1] as DetailViewController;

Il est présenté sous la forme d’un tableau, où le premier élément (0) dans le contrôleur de vue maître et le deuxième élément (1) est le détail.

Accès aux détails à partir de Master

Étant donné que vous affichez généralement des informations détaillées dans l’affichage Détail en fonction de la sélection de l’utilisateur dans le masque, vous aurez besoin d’un moyen d’accéder au détail à partir du masque.

La méthode la plus simple consiste à exposer une propriété sur votre classe master View Controller, par exemple :

public DetailViewController DetailController { get; set;}

Dans le contrôleur de vue fractionné, remplacez la ViewDidLoad méthode et liez les deux vues ensemble. Par exemple :

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

    // Gain access to master and detail view controllers
    var masterController = ViewControllers [0] as MasterViewController;
    var detailController = ViewControllers [1] as DetailViewController;

    // Wire-up views
    masterController.SplitViewController = this;
    masterController.DetailController = detailController;
    detailController.SplitViewController = this;
}

Vous pouvez exposer des propriétés et des méthodes sur votre contrôleur d’affichage des détails que le maître peut utiliser pour présenter de nouvelles données selon les besoins.

Affichage et masquage du masque

Si vous le souhaitez, vous pouvez afficher et masquer le contrôleur de vue maître à l’aide de la PreferredDisplayMode propriété du contrôleur de vue fractionné. Par exemple :

// Show hide split view
if (SplitViewController.DisplayMode == UISplitViewControllerDisplayMode.PrimaryHidden) {
    SplitViewController.PreferredDisplayMode = UISplitViewControllerDisplayMode.AllVisible;
} else {
    SplitViewController.PreferredDisplayMode = UISplitViewControllerDisplayMode.PrimaryHidden;
}

L’énumération UISplitViewControllerDisplayMode définit la façon dont le contrôleur de vue maître sera présenté comme l’un des éléments suivants :

  • Automatique - tvOS contrôlera la présentation des affichages Maître et Détail.
  • PrimaryHidden : masque le contrôleur de vue maître.
  • AllVisible : affiche les contrôleurs Master et Detail View côte à côte. Il s’agit de la présentation par défaut normale.
  • PrimaryOverlay : le contrôleur de vue de détail s’étend sous et est couvert par le maître.

Pour obtenir l’état de présentation actuel, utilisez la DisplayMode propriété du contrôleur de vue fractionné.

Résumé

Cet article a abordé la conception et l’utilisation des contrôleurs de vue fractionnés à l’intérieur d’une application Xamarin.tvOS.