Compartir a través de

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

  • Artículo

Apple agrupa partes relacionadas de funcionalidades en “marcos” que equivalen a 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 con “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 prefijo UI.

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

  • iOS Designer de Xamarin: use el diseñador integrado de Xamarin para diseñar pantallas. Haga doble clic en los archivos de Storyboard o XIB para editarlos con el diseñador integrado.
  • Interface Builder de Xcode: arrastre controles a los diseños de pantalla con Interface Builder. Abra el archivo de Storyboard o XIB en Xcode haciendo clic con el botón derecho en el archivo en el Panel de solución y seleccionando Abrir con > Interface Builder de Xcode.
  • Usando C#: los controles también se pueden construir mediante programación con código y agregarse a la jerarquía de vistas.

Se pueden agregar nuevos archivos de Storyboard y XIB haciendo clic con el botón derecho en un proyecto de iOS y seleccionando Agregar > Nuevo archivo....

Con cualquier 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 iOS Designer de Xamarin

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

Cuando se selecciona un control en la superficie de diseño, el Panel de propiedades mostrará los atributos de ese control. El campo Widget > Identidad > Nombre, 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#:

Panel de widget de propiedades

Para profundizar más en el uso de iOS Designer, consulte la guíaIntroducción a iOS Designer.

Uso de Interface Builder de Xcode

Si no está familiarizado con el uso de Interface Builder, consulte la documentación de Apple sobreInterface Builder .

Para abrir un archivo de Storyboard en Xcode, haga clic con el botón derecho para acceder al menú contextual del archivo de Storyboard y seleccione abrir con Interface Builder de Xcode:

Los controles se pueden arrastrar a la Superficie de diseño desde la Biblioteca de objetos, como se muestra a continuación:

Biblioteca de objetos de Xcode

Al diseñar la interfaz de usuario con Interface Builder, debe crear una salida para cada control al que quiera hacer referencia en C#. Para ello, active el Assistant Editor con el botón central Editor de la barra de herramientas de Xcode:

Botón del editor del asistente

Haga clic en un objeto de interfaz de usuario; luego, arrastre con Control al archivo .h. Para arrastrar con Control, mantenga presionada la tecla de control sobre el objeto de la 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 definición @interface. Debe aparecer una línea azul con una leyenda Insert Outlet o Outlet Collection, 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 puede hacer referencia en el código:

Creación de una salida

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

Con C#

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

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

Este es un ejemplo sencillo de cómo crear una UILabel en un controlador de vista con 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 archivos de Storyboard

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:

Clase parcial ViewController

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

ControlsViewController.designer.cs es código generado que contiene una clase parcial. Cuando se asigna un nombre a un control en la superficie de diseño en Visual Studio para Mac, o se crea 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 evento TouchUpInside.

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 archivo designer.cs no se debe editar manualmente: el IDE (Visual Studio para Mac o Visual Studio) es responsable de mantenerlo sincronizado con Storyboard.

Cuando los objetos de la interfaz de usuario se agregan mediante programación a View o ViewController, crea las instancias de referencias de objeto y las administra usted mismo y, por tanto, no se requiere ningún archivo de diseñador.