Creación de objetos de interfaz de usuario en Xamarin.iOS

Apple agrupa partes relacionadas de la funcionalidad en "marcos" que equivalen a los espacios de nombres de Xamarin.iOS. UIKit es el espacio de nombres que contiene todos los controles de interfaz de usuario para iOS.

Siempre que el código necesite hacer referencia a un control de interfaz de usuario, como una etiqueta o un botón, recuerde incluir la siguiente instrucción using:

using UIKit;

Todos los controles descritos en este capítulo se encuentran en el espacio de nombres UIKit y cada nombre de clase de control de usuario tiene el UI prefijo.

Puede editar controles y diseños de la interfaz de usuario de tres maneras:

• Xamarin iOS Designer: use el diseñador de diseños integrado de Xamarin para diseñar pantallas. Haga doble clic en guion gráfico o archivos XIB para editar con el diseñador integrado.
• Generador de interfaz de Xcode : arrastre controles a los diseños de pantalla con interface Builder. Abra el archivo storyboard o XIB en Xcode; para ello, haga clic con el botón derecho en el archivo en el Panel de solución y elija Abrir con > Xcode Interface Builder.
• Uso de C# : los controles también se pueden construir mediante programación con código y agregarse a la jerarquía de vistas.

Para agregar nuevos archivos Storyboard y XIB, haga clic con el botón derecho en un proyecto de iOS y elija Agregar > nuevo archivo....

El método que use, las propiedades de control y los eventos se pueden manipular con C# en la lógica de la aplicación.

Uso de Xamarin iOS Designer

Para empezar a crear la interfaz de usuario en el Designer de iOS, haga doble clic en un archivo de guion gráfico. Los controles se pueden arrastrar a la superficie de diseño desde el Cuadro de herramientas , como se muestra a continuación:

Visual Studio para Mac

Visual Studio

Cuando se selecciona un control en la superficie de diseño, el Panel de propiedades mostrará los atributos de ese control. El campo Nombre de identidad > del widget>, que se rellena en la captura de pantalla siguiente, se usa como nombre de la salida. Así es como puede hacer referencia al control en C#:

Para profundizar más en el uso del diseñador de iOS, consulte la guía Introducción a iOS Designer.

Uso de Xcode Interface Builder

Si no está familiarizado con el uso de Interface Builder, consulte los documentos de Interface Builder de Apple.

Para abrir un guión gráfico en Xcode, haga clic con el botón derecho para acceder al menú contextual del archivo del guión gráfico y elija abrirlo con el Generador de interfaz de Xcode:

Visual Studio para Mac

Visual Studio

Los controles se pueden arrastrar a la superficie de diseño desde la biblioteca de objetos que se muestra a continuación:

Al diseñar la interfaz de usuario con Interface Builder, debe crear una salida para cada control al que desee hacer referencia en C#. Esto se hace activando el Editor del asistente mediante el botón Central Editor en el botón de la barra de herramientas de Xcode:

Haga clic en un objeto de interfaz de usuario; a continuación , Control Arrastre al archivo .h. Para Controlar Arrastre, mantenga presionada la tecla de control y mantenga pulsada la tecla de control sobre el objeto de interfaz de usuario para el que va a crear la salida (o acción). Mantenga presionada la tecla Control mientras arrastra al archivo de encabezado. Termine de arrastrar debajo de la @interface definición. Debe aparecer una línea azul con un subtítulo Insertar salida o colección outlet, como se muestra en la captura de pantalla siguiente.

Al liberar el clic, se le pedirá que proporcione un nombre para la salida, que se usará para crear una propiedad de C# a la que se pueda hacer referencia en el código:

Para obtener más información sobre cómo se integra Interface Builder de Xcode con Visual Studio para Mac, consulte el documento Generación de código Xib.

Con C#

Si decide crear mediante programación un objeto de interfaz de usuario mediante C# (en un controlador de vista o vista, por ejemplo), siga estos pasos:

• Declare un campo de nivel de clase para el objeto de interfaz de usuario. Cree el propio control una vez, por ViewDidLoad ejemplo. A continuación, se puede hacer referencia al objeto a lo largo de los métodos de ciclo de vida del controlador de vista (por ejemplo ViewWillAppear, ).
• Cree un CGRect objeto que defina el marco del control (sus coordenadas X e Y en la pantalla, así como su ancho y alto). Deberá asegurarse de que tiene una using CoreGraphics directiva para esto.
• Llame al constructor para crear y asignar el control.
• Establezca las propiedades o controladores de eventos.
• Llame Add() a para agregar el control a la jerarquía de vistas.

Este es un ejemplo sencillo de creación de en UILabel un controlador de vista mediante 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);
}

Uso de C# y guiones gráficos

Cuando se agregan controladores de vista a la superficie de diseño, se crean dos archivos de C# correspondientes en el proyecto. En este ejemplo, ControlsViewController.cs y ControlsViewController.designer.cs se han creado automáticamente:

El ControlsViewController.cs archivo está pensado para el código. Aquí es donde se implementan los View métodos de ciclo de vida, como ViewDidLoad y ViewWillAppear , y donde puede agregar sus propias propiedades, campos y métodos.

el ControlsViewController.designer.cs código se genera que contiene una clase parcial. Al asignar un nombre a un control en la superficie de diseño de Visual Studio para Mac, o crear una salida o acción en Xcode, se agrega una propiedad correspondiente o un método parcial al archivo del diseñador (designer.cs). El código siguiente muestra un ejemplo de código generado para dos botones y una vista de texto, donde uno de los botones también tiene un TouchUpInside evento.

Estos elementos de la clase parcial permiten al código hacer referencia a los controles y responder a las acciones declaradas en la superficie de diseño:

[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;
            }
        }
    }
}

El designer.cs archivo no se debe editar manualmente: el IDE (Visual Studio para Mac o Visual Studio) es responsable de mantenerlo sincronizado con storyboard.

Cuando se agregan objetos de interfaz de usuario mediante programación a o ViewViewController, se crean instancias y se administran las referencias de objeto usted mismo y, por lo tanto, no se requiere ningún archivo de diseñador.

Vínculos relacionados

• Controles (ejemplo)