Présentation des storyboards dans Xamarin.Mac

Cet article fournit une introduction à l’utilisation de Storyboards dans une application Xamarin.Mac. Il aborde la création et la gestion de l’interface utilisateur de l’application à l’aide de storyboards et d’Interface Builder de Xcode.

Les storyboards vous permettent de développer une interface utilisateur pour votre application Xamarin.Mac qui inclut non seulement les définitions et contrôles de fenêtre, mais également les liens entre différentes fenêtres (via segues) et les états d’affichage.

Exemple d’interface utilisateur dans Xcode

Cet article présente l’utilisation de Storyboards pour définir l’interface utilisateur d’une application Xamarin.Mac.

Qu’est-ce que storyboards ?

À l’aide de Storyboards, l’ensemble de l’interface utilisateur d’une application Xamarin.Mac peut être définie à un seul emplacement avec toutes les navigations entre ses éléments individuels et ses interfaces utilisateur. Les storyboards pour Xamarin.Mac fonctionnent de manière très similaire aux storyboards pour Xamarin.iOS. Toutefois, ils contiennent un ensemble différent de Types Segue en raison des différents idiomes d’interface.

Utilisation des scènes

Comme indiqué ci-dessus, un Storyboard définit l’ensemble de l’interface utilisateur d’une application donnée en vue d’une vue d’ensemble fonctionnelle de ses contrôleurs de vue. Dans le Générateur d’interface de Xcode, chacun de ces contrôleurs vit dans sa propre scène.

Exemple de contrôleur de vue

Chaque scène représente une paire de contrôleurs d’affichage et d’affichage donnée avec un ensemble de lignes (appelées Segues) qui connectent chaque scène dans l’interface utilisateur, montrant ainsi leurs relations. Certains Segues définissent la façon dont un contrôleur de vue contient un ou plusieurs affichages enfants ou contrôleurs de vue. Autres Segues, définissez des transitions entre le contrôleur de vue (par exemple, l’affichage d’une fenêtre contextuelle ou d’une boîte de dialogue).

Un échantillon de segue

La chose la plus importante à noter est que chaque Segue représente le flux de certaines formes de données entre l’élément donné de l’interface utilisateur de l’application.

Utilisation des contrôleurs d’affichage

Les contrôleurs de vue définissent les relations entre une vue d’informations donnée dans une application Mac et le modèle de données qui fournit ces informations. Chaque scène de niveau supérieur dans le Storyboard représente un contrôleur de vue dans le code de l’application Xamarin.Mac.

Exemple de contrôleur de vue de glissements

De cette façon, chaque contrôleur de vue est un appairage autonome et réutilisable de la représentation visuelle des informations (Vue) et de la logique permettant de présenter et de contrôler ces informations.

Dans une scène donnée, vous pouvez effectuer toutes les opérations qui auraient normalement été gérées par des fichiers individuels .xib :

  • Placez des sous-vues et des contrôles (tels que des boutons et des zones de texte).
  • Définissez les positions des éléments et les contraintes de disposition automatique.
  • Câbler des actions et des points de sortie pour exposer des éléments d’interface utilisateur au code.

Utilisation de Segues

Comme indiqué ci-dessus, Segues fournit les relations entre toutes les scènes qui définissent l’interface utilisateur de votre application. Si vous êtes familiarisé avec l’utilisation de Storyboards dans iOS, vous savez que Segues pour iOS définit généralement des transitions entre les vues plein écran. Cela diffère de macOS, lorsque Segues définit généralement « confinement » (où une scène est l’enfant d’une scène parente).

Dans macOS, la plupart des applications ont tendance à regrouper leurs vues dans la même fenêtre à l’aide d’éléments d’interface utilisateur tels que les affichages fractionnés et les onglets. Contrairement à iOS, où les vues doivent être transférées sur et hors écran, en raison d’un espace d’affichage physique limité.

Étant donné les tendances de macOS à l’endiguement, il existe des situations où la présentation segues est utilisée, comme les fenêtres modales, les vues de feuille et les popovers.

Lorsque vous utilisez Presentation Segues, vous pouvez remplacer la PrepareForSegue méthode du contrôleur de vue parent pour la présentation afin d’initialiser et de variables et de fournir toutes les données au contrôleur de vue présenté.

Temps de conception et d’exécution

Au moment de la conception (lors de la disposition de l’interface utilisateur dans le Générateur d’interface de Xcode), chaque élément de l’interface utilisateur de l’application est divisé en éléments constituants :

  • Scènes - Composées de :
    • Contrôleur de vue : qui définit les relations entre les vues et les données qui les prennent en charge.
    • Vues et sous-vues : éléments réels qui composent l’interface utilisateur.
    • Segues contenant - Qui définissent les relations parent-enfant entre scènes.
  • Segues de présentation : qui définissent des modes de présentation individuels.

En définissant chaque élément de cette façon, il autorise le chargement différé de chaque élément uniquement, car il est nécessaire pendant l’exécution. Dans macOS, l’ensemble du processus a été conçu pour permettre au développeur de créer des interfaces utilisateur complexes et flexibles qui nécessitent un minimum de code de stockage pour les rendre efficaces, tout en étant aussi efficace avec les ressources système que possible.

Démarrage rapide de storyboard

Dans le guide de démarrage rapide storyboard, nous allons créer une application Xamarin.Mac simple qui présente les concepts clés de l’utilisation des storyboards pour créer une interface utilisateur. L’exemple d’application se compose d’une vue Spilt contenant une zone de contenu et une zone d’inspecteur et présente une fenêtre de boîte de dialogue Préférences simple. Nous allons utiliser Segues pour lier tous les éléments de l’interface utilisateur ensemble.

Utilisation de storyboards

Cette section décrit les détails détaillés de l’utilisation des storyboards dans une application Xamarin.Mac. Nous examinons en détail les scènes et la façon dont elles sont composées de contrôleurs de vue et d’affichage. Ensuite, nous allons examiner comment les scènes sont liées avec Segues. Enfin, nous allons examiner l’utilisation de types Segue personnalisés.

Résumé

Cet article a examiné rapidement l’utilisation de Storyboards dans une application Xamarin.Mac. Nous avons vu comment créer une application à l’aide de storyboards et comment définir une interface utilisateur. Nous avons également vu comment naviguer entre différentes fenêtres et afficher des états à l’aide de segues.