Création d’objets d’interface utilisateur dans Xamarin. iOSCreating User Interface Objects in Xamarin.iOS

Apple regroupe des fonctionnalités connexes dans des « frameworks » qui correspondent à des espaces de noms Xamarin. iOS.Apple groups related pieces of functionality into “frameworks” which equate to Xamarin.iOS namespaces. UIKitest l’espace de noms qui contient tous les contrôles d’interface utilisateur pour iOS.UIKit is the namespace that contains all the user interface controls for iOS.

Chaque fois que votre code doit faire référence à un contrôle d’interface utilisateur, tel qu’une étiquette ou un bouton, n’oubliez pas d’inclure l’instruction using suivante :Whenever your code needs to reference a user interface control, such as a label or button, remember to include the following using statement:

using UIKit;

Tous les contrôles présentés dans ce chapitre se trouvent dans l’espace de noms UIKit, et chaque nom de classe de contrôle utilisateur a le UI préfixe.All the controls discussed in this chapter are in the UIKit namespace, and each user control class name has the UI prefix.

Vous pouvez modifier les mises en page et les contrôles de l’interface utilisateur de trois façons :You can edit UI controls and layouts in three ways:

  • Concepteur iOS Xamarin : utilisez le concepteur de disposition intégré à Xamarin pour concevoir des écrans.Xamarin iOS Designer – Use Xamarin’s built-in layout designer to design screens. Double-cliquez sur fichiers Storyboard ou XIB à modifier avec le concepteur intégré.Double-click storyboard or XIB files to edit with the built-in designer.
  • Xcode Interface Builder : faites glisser les contrôles sur vos dispositions d’écran avec Interface Builder.Xcode Interface Builder – Drag controls onto your screen layouts with Interface Builder. Ouvrez le fichier Storyboard ou XIB dans Xcode en cliquant avec le bouton droit sur le fichier dans le panneau solutions et en choisissant ouvrir avec > Interface Builder Xcode.Open the storyboard or XIB file in Xcode by right-clicking the file in the Solution Pad and choosing Open With > Xcode Interface Builder.
  • L’utilisation de C# – Controls peut également être construite par programmation avec du code et ajoutée à la hiérarchie de la vue.Using C# – Controls can also be programmatically constructed with code and added to the view hierarchy.

Vous pouvez ajouter de nouveaux fichiers Storyboard et XIB en cliquant avec le bouton droit sur un projet iOS et en choisissant ajouter > nouveau fichier....New Storyboard and XIB files can be added by right-clicking on an iOS project and choosing Add > New File....

Quelle que soit la méthode utilisée, les propriétés et les événements de contrôle peuvent toujours être manipulés avec C# dans votre logique d’application.Whichever method you use, control properties and events can still be manipulated with C# in your application logic.

Utilisation du concepteur iOS XamarinUsing Xamarin iOS Designer

Pour commencer à créer votre interface utilisateur dans le concepteur iOS, double-cliquez sur un fichier de table de montage séquentiel.To start creating your user interface in the iOS Designer, double-click on a storyboard file. Vous pouvez faire glisser les contrôles sur l’aire de conception à partir de la boîte à outils , comme illustré ci-dessous :Controls can be dragged onto the design surface from the Toolbox as illustrated below:

Lorsqu’un contrôle est sélectionné sur l’aire de conception, le panneau Propriétés affiche les attributs de ce contrôle.When a control is selected on the design surface the Properties Pad will show the attributes for that control. Le Widget > le champ nom de l’identité >, qui est renseigné dans la capture d’écran ci-dessous, est utilisé comme nom de sortie .The Widget > Identity > Name field, which is populated in the screenshot below, is used as the Outlet name. Voici comment vous pouvez référencer le contrôle en C# :This is how you can reference the control in C#:

Bloc widget propriétésProperties Widget Pad

Pour approfondir votre connaissance de l’utilisation du concepteur iOS, reportez-vous au guide d’introduction au concepteur iOS .For a deeper dive into using the iOS designer, refer to the Introduction to the iOS Designer guide.

Utilisation de Xcode Interface BuilderUsing Xcode Interface Builder

Si vous n’êtes pas familiarisé avec l’utilisation de Interface Builder, reportez-vous aux documents d’Apple Interface Builder .If you are unfamiliar with using Interface Builder, refer to Apple's Interface Builder documents.

Pour ouvrir une table de montage séquentiel dans Xcode, cliquez avec le bouton droit pour accéder au menu contextuel du fichier de Storyboard et choisissez de l’ouvrir avec l' Interface Builder Xcode:To open a Storyboard in Xcode, right-click to access the context menu for the storyboard file and choose to open with the Xcode Interface Builder:

Vous pouvez faire glisser les contrôles sur le Aire de conception à partir de la bibliothèque d’objets illustrée ci-dessous :Controls can be dragged onto the Design Surface from the Object Library illustrated below:

Bibliothèque d’objets XcodeXcode Object Library

Lorsque vous concevez votre interface utilisateur avec Interface Builder vous devez créer une sortie pour chaque contrôle que vous souhaitez référencer en C#.When you design your UI with Interface Builder you must create an Outlet for each control that you wish to reference in C#. Pour ce faire, vous activez l' éditeur de l’Assistant à l’aide du bouton centrer de la barre d’outils Xcode :This is done by turning on the Assistant Editor using the center Editor button on the Xcode toolbar button:

Bouton de l’éditeur de l’AssistantAssistant Editor button

Cliquez sur un objet d’interface utilisateur. Ensuite, le contrôle fait glisser dans le fichier. h.Click on a user interface object; then Control Drag into the .h file. Pour contrôler le glissement, maintenez la touche CTRL enfoncée, puis cliquez et maintenez le pointeur sur l’objet d’interface utilisateur pour lequel vous créez la sortie (ou action).To Control Drag, hold down the control key then click and hold over the user interface object that you are creating the outlet (or action) for. Maintenez la touche CTRL enfoncée pendant que vous faites glisser le fichier d’en-tête.Keep holding down the Control key while you drag into the header file. Terminez le glissement sous la @interface définition.Finish dragging below the @interface definition. Une ligne bleue doit apparaître avec une légende insérer une sortie ou une collection de sortie, comme illustré dans la capture d’écran ci-dessous.A blue line should appear with a caption Insert Outlet or Outlet Collection, as illustrated in the screenshot below.

Quand vous relâchez le clic, vous êtes invité à fournir un nom pour la prise, qui sera utilisé pour créer une propriété C# qui peut être référencée dans le code :When you release the click you will be prompted to provide a name for the Outlet, which will be used to create a C# property that can be referenced in code:

Création d’une sortieCreating an outlet

Pour plus d’informations sur l’intégration de l’Interface Builder de Xcode à Visual Studio pour Mac, consultez le document de génération de code XIB .For more information on how Xcode's Interface Builder integrates with Visual Studio for Mac, refer to the Xib Code Generation document.

Utilisation de C#Using C#

Si vous décidez de créer par programmation un objet d’interface utilisateur à l’aide de C# (dans un contrôleur de vue ou de vue, par exemple), procédez comme suit :If you decide to programmatically create a user interface object using C# (in a View or View Controller, for example), follow these steps:

  • Déclarez un champ au niveau de la classe pour l’objet d’interface utilisateur.Declare a class level field for the user interface object. Créez le contrôle lui-même une seule fois, ViewDidLoad par exemple.Create the control itself once, in ViewDidLoad for example. L’objet peut ensuite être référencé dans toutes les méthodes de cycle de vie du contrôleur d’affichage (par exemple,The object can then be referenced throughout the lifecycle methods of the View Controller (eg. ViewWillAppear).ViewWillAppear).
  • Créez un CGRect qui définit le frame du contrôle (ses coordonnées X et Y sur l’écran, ainsi que sa largeur et sa hauteur).Create a CGRect that defines the frame of the control (its X and Y coordinates on the screen, as well as its width and height). Vous devez vous assurer que vous disposez d’une using CoreGraphics directive pour ce.You'll need to make sure you have a using CoreGraphics directive for this.
  • Appelez le constructeur pour créer et assigner le contrôle.Call the constructor to create and assign the control.
  • Définissez des propriétés ou des gestionnaires d’événements.Set any properties or event handlers.
  • Appelez Add() pour ajouter le contrôle à la hiérarchie d’affichage.Call Add() to add the control to the view hierarchy.

Voici un exemple simple de création d’un UILabel dans un contrôleur d’affichage à l’aide de C# :Here is a simple example of creating a UILabel in a View Controller using C#:

UILabel label1;
public override void ViewDidLoad () {
    base.ViewDidLoad ();
    var frame = new CGRect(10, 10, 300, 30);
    label1 = new UILabel(frame);
    label1.Text = "New Label";
    View.Add (label1);
}

Utilisation de C# et des storyboardsUsing C# and Storyboards

Lorsque les contrôleurs d’affichage sont ajoutés au Aire de conception, deux fichiers C# correspondants sont créés dans le projet.When View Controllers are added to the Design Surface, two corresponding C# files are created in the project. Dans cet exemple, ControlsViewController.cs et ControlsViewController.designer.cs ont été créés automatiquement :In this example, ControlsViewController.cs and ControlsViewController.designer.cs have been created automatically:

Classe partielle ViewControllerViewController partial class

Le ControlsViewController.cs fichier est destiné à votre code.The ControlsViewController.cs file is intended for your code. C’est là que les View méthodes de cycle de vie telles que ViewDidLoad et ViewWillAppear sont implémentées, et où vous pouvez ajouter vos propres propriétés, champs et méthodes.This is where the View lifecycle methods such as ViewDidLoad and ViewWillAppear are implemented and where you can add your own properties, fields and methods.

Le ControlsViewController.designer.cs code généré contient une classe partielle.The ControlsViewController.designer.cs is generated code containing a partial class. Lorsque vous nommez un contrôle sur l’aire de conception dans Visual Studio pour Mac, ou créez une sortie ou une action dans Xcode, une propriété correspondante, ou une méthode partielle, est ajoutée au fichier du concepteur (designer.cs).When you name a control on the design surface in Visual Studio for Mac, or create an outlet or action in Xcode, a corresponding property, or partial method, is added to the designer (designer.cs) file. Le code ci-dessous montre un exemple de code généré pour deux boutons et un affichage de texte, où l’un des boutons a également un TouchUpInside événement.The code below shows an example of code generated for two buttons and a text view, where one of the buttons also has a TouchUpInside event.

Ces éléments de la classe partielle permettent à votre code de référencer les contrôles et de répondre aux actions déclarées sur l’aire de conception :These elements of the partial class enable your code to reference the controls and respond to the actions that are declared on the design surface:

[Register ("ControlsViewController")]
    partial class ControlsViewController
    {
        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UIButton Button1 { get; set; }

        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UIButton Button2 { get; set; }

        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UITextField textfield1 { get; set; }

        [Action ("button2_TouchUpInside:")]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        partial void button2_TouchUpInside (UIButton sender);

        void ReleaseDesignerOutlets ()
        {
            if (Button1 != null) {
                Button1.Dispose ();
                Button1 = null;
            }
            if (Button2 != null) {
                Button2.Dispose ();
                Button2 = null;
            }
            if (textfield1 != null) {
                textfield1.Dispose ();
                textfield1 = null;
            }
        }
    }
}

Le designer.cs fichier ne doit pas être modifié manuellement : l’IDE (Visual Studio pour Mac ou Visual Studio) est responsable de sa synchronisation avec le Storyboard.The designer.cs file should not be manually edited – the IDE (Visual Studio for Mac or Visual Studio) is responsible for keeping it synchronized with the Storyboard.

Lorsque des objets d’interface utilisateur sont ajoutés par programmation à un View ou à ViewController , vous instanciez et gérez les références de l’objet vous-même, et aucun fichier de concepteur n’est donc requis.When user interface objects are added programmatically to a View or ViewController, you instantiate and manage the object references yourself, and therefore no designer file is required.