Présentation des storyboards dans Xamarin.Mac

Cet article fournit une introduction à l’utilisation des 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 les contrôles de fenêtre, mais contient également les liens entre les différentes fenêtres (via segues) et les états d’affichage.

Exemple d’interface utilisateur dans Xcode

Cet article fournit une introduction à l’utilisation de storyboards pour définir l’interface utilisateur d’une application Xamarin.Mac.

Que sont les storyboards ?

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

Utilisation de scènes

Comme indiqué ci-dessus, un Storyboard définit l’ensemble de l’interface utilisateur d’une application donnée en une vue d’ensemble fonctionnelle de ses contrôleurs d’affichage. 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 de vue donnée avec un ensemble de lignes (appelées Segues) qui relient chaque scène dans l’interface utilisateur, montrant ainsi leurs relations. Certains Segues définissent la façon dont un contrôleur d’affichage contient un ou plusieurs affichages enfants ou contrôleurs d’affichage. D’autres segues définissent les transitions entre le contrôleur d’affichage (par exemple, l’affichage d’une fenêtre contextuelle ou d’une boîte de dialogue).

Exemple de segue

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

Utilisation des contrôleurs d’affichage

Les contrôleurs d’affichage définissent les relations entre une vue donnée des informations au sein d’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 d’affichage 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 (Affichage) 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.
  • Wire-up Actions et Outlets 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 en 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 de l’espace d’affichage physique limité.

Compte tenu des tendances de macOS à l’endiguement, il existe des situations où des segues de présentation sont utilisées, telles que les fenêtres modales, les vues feuilles et les fenêtres contextuelles.

Lorsque vous utilisez Segues de présentation, vous pouvez remplacer la PrepareForSegue méthode du contrôleur d’affichage parent pour la présentation pour initialiser et les variables et fournir des données au contrôleur d’affichage 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 constitutifs :

  • Scènes - qui sont composées de :
    • View Controller : 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 de confinement : qui définissent les relations parent-enfant entre les 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 permet le chargement paresseux de chaque élément uniquement en fonction des besoins 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 sauvegarde pour les faire fonctionner, tout en étant aussi efficaces que possible avec les ressources système.

Démarrage rapide du 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 de storyboards pour créer une interface utilisateur. L’exemple d’application se compose d’un affichage spilt contenant une zone de contenu et une zone d’inspecteur , et il 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.

Utilisation de storyboards

Cette section couvre les détails détaillés de l’utilisation de 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 d’affichage et de vue. Ensuite, nous allons voir comment les scènes sont liées avec Segues. Enfin, nous allons examiner l’utilisation des types Segue personnalisés.

Exemple de storyboard complexe

Pour obtenir un exemple complexe d’utilisation de Storyboards dans une application Xamarin.Mac, consultez l’exemple d’application SourceWriter. SourceWriter est un éditeur de code source simple qui assure la prise en charge de la complétion de code et de la coloration syntaxique de base.

Le code SourceWriter a été entièrement commenté et, le cas échéant, des liens ont être fournis entre les principales technologies ou méthodes et des informations pertinentes dans la documentation des guides Xamarin.Mac.

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.