Conceptos básicos de iOS Designer
En esta guía se presenta el Designer de Xamarin para iOS. Muestra cómo usar el Designer de iOS para diseñar visualmente controles, cómo acceder a esos controles en el código y cómo editar propiedades.
Advertencia
iOS Designer quedó en desuso en la versión 16.8 de Visual Studio 2019 y la 8.8 de Visual Studio 2019 para Mac, y se ha eliminado de la versión 16.9 de Visual Studio 2019 y la 8.9 de Visual Studio para Mac. La manera recomendada de compilar interfaces de usuario de iOS es directamente en un equipo Mac que ejecuta Xcode. Para obtener más información, consulte Diseño de interfaces de usuario con Xcode.
El Designer de Xamarin para iOS es un diseñador de interfaz visual similar al Generador de interfaces de Xcode y a android Designer. Algunas de sus muchas características incluyen integración perfecta con Visual Studio para Windows y Mac, edición de arrastrar y colocar, una interfaz para configurar controladores de eventos y la capacidad de representar controles personalizados.
Requisitos
El Designer de iOS está disponible en Visual Studio para Mac y Visual Studio 2017 y versiones posteriores en Windows. En Visual Studio para Windows, el Designer de iOS requiere una conexión a un host de compilación mac configurado correctamente, aunque Xcode no necesita ejecutarse.
En esta guía se supone que está familiarizado con el contenido descrito en las guías de Introducción.
Funcionamiento del Designer de iOS
En esta sección se describe cómo el Designer de iOS facilita la creación de una interfaz de usuario y la conexión al código.
El Designer de iOS permite a los desarrolladores diseñar visualmente la interfaz de usuario de una aplicación. Como se describe en la guía Introducción a guiones gráficos , un guión gráfico describe las pantallas (controladores de vista) que componen una aplicación, los elementos de interfaz (vistas) colocados en esos controladores de vista y el flujo de navegación general de la aplicación.
Un controlador de vista tiene dos partes: una representación visual en el Designer de iOS y una clase de C# asociada:
de vista Designer A de iOS 
de vista Designer A de iOS 
En su estado predeterminado, un controlador de vista no proporciona ninguna funcionalidad; debe rellenarse con controles. Estos controles se colocan en la vista del controlador de vista, el área rectangular que contiene todo el contenido de la pantalla. La mayoría de los controladores de vista contienen controles comunes, como botones, etiquetas y campos de texto, como se muestra en la captura de pantalla siguiente, que muestra un controlador de vista que contiene un botón:
Algunos controles, como las etiquetas que contienen texto estático, se pueden agregar al controlador de vista y dejarse solos. Sin embargo, con más frecuencia, los controles deben personalizarse mediante programación. Por ejemplo, el botón agregado anteriormente debe hacer algo al pulsar, por lo que se debe agregar un controlador de eventos en el código.
Para acceder y manipular el botón en el código, debe tener un identificador único. Proporcione un identificador único seleccionando el botón, abriendo el Panel de propiedades y estableciendo su campo Nombre en un valor como "SubmitButton":
de propiedades 
Ahora que el botón tiene un nombre, se puede acceder a él en el código. ¿Pero cómo funciona esto?
En el Panel de solución, vaya a ViewController.cs y haga clic en el indicador de divulgación revela que la definición de clase del ViewController controlador de vista abarca dos archivos, cada uno de los cuales contiene una definición de clase parcial :
ViewController.cs debe rellenarse con código personalizado relacionado con la
ViewControllerclase . En este archivo, laViewControllerclase puede responder a varios métodos de ciclo de vida del controlador de vista de iOS, personalizar la interfaz de usuario y responder a la entrada del usuario, como pulsaciones de botón.ViewController.designer.cs es un archivo generado, creado por el Designer de iOS para asignar la interfaz construida visualmente al código. Dado que los cambios en este archivo se sobrescribirán, no se debe modificar. Las declaraciones de propiedad de este archivo permiten que el código de la
ViewControllerclase acceda, por Nombre, a los controles configurados en el Designer de iOS. Al abrir ViewController.designer.cs , se muestra el código siguiente:
namespace Designer
{
[Register ("ViewController")]
partial class ViewController
{
[Outlet]
[GeneratedCode ("iOS Designer", "1.0")]
UIKit.UIButton SubmitButton { get; set; }
void ReleaseDesignerOutlets ()
{
if (SubmitButton != null) {
SubmitButton.Dispose ();
SubmitButton = null;
}
}
}
}
La SubmitButton declaración de propiedad conecta toda ViewController la clase ( no solo el archivo ViewController.designer.cs ) al botón definido en el guión gráfico. Dado que ViewController.cs define parte de la ViewController clase , tiene acceso a SubmitButton.
En la captura de pantalla siguiente se muestra que IntelliSense ahora reconoce la SubmitButton referencia en ViewController.cs:
En esta sección se ha mostrado cómo crear un botón en el Designer de iOS y acceder a ese botón en el código.
En el resto de este documento se proporciona información general sobre el Designer de iOS.
Conceptos básicos de iOS Designer
En esta sección se presentan las partes del Designer de iOS y se ofrece un recorrido por sus características.
Iniciar el Designer de iOS
Los proyectos de Xamarin.iOS creados con Visual Studio para Mac incluyen un guión gráfico. Para ver el contenido de un guión gráfico, haga doble clic en el archivo .storyboard en el Panel de solución:
Características de Designer de iOS
El Designer de iOS tiene seis secciones principales:
- Superficie de diseño: área de trabajo principal de iOS Designer. Se muestra en el área de documento, permite la construcción visual de interfaces de usuario.
- Barra de herramientas restricciones : permite cambiar entre el modo de edición de fotogramas y el modo de edición de restricciones, dos maneras diferentes de colocar elementos en una interfaz de usuario.
- Cuadro de herramientas : enumera los controladores, objetos, controles, vistas de datos, reconocedores de gestos, ventanas y barras que se pueden arrastrar a la superficie de diseño y agregarse a una interfaz de usuario.
- Panel de propiedades: muestra las propiedades del control seleccionado, incluidos la identidad, los estilos visuales, la accesibilidad, el diseño y el comportamiento.
- Esquema del documento : muestra el árbol de controles que componen el diseño de la interfaz que se está editando. Al hacer clic en un elemento del árbol, se selecciona en el Designer de iOS y se muestran sus propiedades en el Panel de propiedades. Esto es útil para seleccionar un control específico en una interfaz de usuario profundamente anidada.
- Barra de herramientas inferior: contiene opciones para cambiar cómo el Designer de iOS muestra el archivo .storyboard o .xib, incluido el dispositivo, la orientación y el zoom.
Diseño del flujo de trabajo
Adición de un control a la interfaz
Para agregar un control a una interfaz, arrástrelo desde el Cuadro de herramientas y colóquelo en la superficie de diseño. Al agregar o colocar un control, las directrices verticales y horizontales resaltan las posiciones de diseño usadas habitualmente, como el centro vertical, el centro horizontal y los márgenes:
.
.La línea de puntos azules del ejemplo anterior proporciona una guía de alineación visual central horizontal para ayudar con la colocación del botón.
Comandos del menú contextual
Hay un menú contextual disponible tanto en la superficie de diseño como en el esquema del documento. Este menú proporciona comandos para el control seleccionado y su elemento primario, lo que resulta útil al trabajar con vistas en una jerarquía anidada:
Barra de herramientas restricciones
La barra de herramientas de restricciones se ha actualizado y ahora consta de dos controles: el modo de edición de fotogramas o el modo de edición de restricciones alterna y el botón actualizar restricciones /marcos de actualización.
Alternancia modo de edición de fotogramas/modo de edición de restricciones
En versiones anteriores del Designer de iOS, al hacer clic en una vista ya seleccionada en la superficie de diseño alternada entre el modo de edición de fotogramas y el modo de edición de restricciones. Ahora, un control de alternancia en la barra de herramientas de restricciones cambia entre estos modos de edición.
- Modo de edición de fotogramas:
- Modo de edición de restricciones:
restricciones
restricciones Botón Actualizar restricciones o marcos de actualización
El botón restricciones de actualización o marcos de actualización se encuentra a la derecha del modo de edición de fotogramas o del modo de edición de restricciones.
- En el modo de edición de fotogramas, al hacer clic en este botón se ajustan los fotogramas de los elementos seleccionados para que coincidan con sus restricciones.
- En el modo de edición de restricciones, al hacer clic en este botón se ajustan las restricciones de los elementos seleccionados para que coincidan con sus marcos.
Barra de herramientas inferior
La barra de herramientas inferior proporciona una manera de seleccionar el dispositivo, la orientación y el zoom usados para ver un archivo storyboard o .xib en el Designer de iOS:
de 
de Dispositivo y orientación
Cuando se expande, la barra de herramientas inferior muestra todos los dispositivos, orientaciones o adaptaciones aplicables al documento actual. Al hacer clic en ellos, se cambia la vista que se muestra en la superficie de diseño.
Tenga en cuenta que la selección de un dispositivo y la orientación solo cambia cómo iOS Designer previsualiza el diseño. Independientemente de la selección actual, las restricciones recién agregadas se aplican en todos los dispositivos y orientaciones a menos que se haya usado el botón Editar rasgos para especificar lo contrario.
Cuando se habilitanlas clases de tamaño, el botón Editar rasgos aparecerá en la barra de herramientas inferior expandida. Al hacer clic en el botón Editar rasgos , se muestran las opciones para crear una variación de interfaz en función de la clase de tamaño representada por el dispositivo y la orientación seleccionados. Considere los siguientes ejemplos:
- Si se selecciona iPhone SE / Portrait, la ventana emergente proporcionará opciones para crear una variación de interfaz para la clase de tamaño de alto normal y ancho compacto.
- Si se selecciona iPad Pro 9.7" / Horizontal / full Screen , la ventana emergente proporcionará opciones para crear una variación de interfaz para la clase de tamaño de alto normal y ancho normal.
Controles de zoom
La superficie de diseño admite el zoom a través de varios controles:
Los controles incluyen lo siguiente:
- Zoom hasta ajustar
- Alejamiento
- Acercamiento
- Tamaño real (tamaño de 1:1 píxel)
Estos controles ajustan el zoom en la superficie de diseño. No afectan a la interfaz de usuario de la aplicación en tiempo de ejecución.
Panel de propiedades
Use el Panel de propiedades para editar la identidad, los estilos visuales, la accesibilidad y el comportamiento de un control. En la captura de pantalla siguiente se muestran las opciones del Panel de propiedades para un botón:
Secciones del Panel de propiedades
El Panel de propiedades contiene tres secciones:
- Widget : las propiedades principales del control, como el nombre, la clase, las propiedades de estilo, etc. Las propiedades para administrar el contenido del control se suelen colocar aquí.
- Diseño : las propiedades que realizan un seguimiento de la posición y el tamaño del control, incluidas las restricciones y los marcos, se enumeran aquí.
- Eventos : aquí se especifican eventos y controladores de eventos. Resulta útil para controlar eventos como touch, tap, drag, etc. Los eventos también se pueden controlar directamente en el código.
Edición de propiedades en el Panel de propiedades
Además de la edición visual en la superficie de diseño, el Designer de iOS admite la edición de propiedades en el Panel de propiedades. Las propiedades disponibles cambian en función del control seleccionado, como se muestra en las capturas de pantalla siguientes:
Importante
La sección Identidad del Panel de propiedades muestra ahora un campo Módulo . Es necesario rellenar esta sección solo al interoperar con clases Swift. Úselo para escribir un nombre de módulo para las clases Swift, que están espacio de nombres.
Valores predeterminados
Muchas propiedades del Panel de propiedades no muestran ningún valor ni un valor predeterminado. Sin embargo, el código de la aplicación todavía puede modificar estos valores. El Panel de propiedades no muestra los valores establecidos en el código.
Controladores de eventos
Para especificar controladores de eventos personalizados para varios eventos, use la pestaña Eventos del Panel de propiedades. Por ejemplo, en la captura de pantalla siguiente, un HandleClick método controla el evento Touch Up Inside del botón:
Una vez especificado un controlador de eventos, se debe agregar un método del mismo nombre a la clase de controlador de vista correspondiente. De lo contrario, se producirá una unrecognized selector excepción cuando se pulse el botón:
de Tenga en cuenta que después de especificar un controlador de eventos en el Panel de propiedades, el Designer de iOS abrirá inmediatamente el archivo de código correspondiente y ofrecerá insertar la declaración del método.
de Para obtener un ejemplo que usa controladores de eventos personalizados, consulte la Guía de Introducción Hello, iOS.
Vista Esquema
El Designer de iOS también puede mostrar la jerarquía de controles de una interfaz como esquema. El esquema está disponible seleccionando la pestaña Esquema del documento , como se muestra a continuación:
El control seleccionado en la vista esquema permanece sincronizado con el control seleccionado en la superficie de diseño. Esta característica es útil para seleccionar un elemento de una jerarquía de interfaz profundamente anidada.
Revertir a Xcode
Es posible usar indistintamente las Designer de iOS y Xcode Interface Builder. Para abrir un guión gráfico o un archivo .xib en Xcode Interface Builder, haga clic con el botón derecho en el archivo y seleccione Abrir con > Xcode Interface Builder, como se muestra en la captura de pantalla siguiente:
Después de realizar modificaciones en Xcode Interface Builder, guarde el archivo y vuelva a Visual Studio para Mac. Los cambios se sincronizarán con el proyecto de Xamarin.iOS.
Compatibilidad con .xib
El Designer de iOS admite la creación, edición y administración de archivos .xib. Estos son archivos XML que representen vistas personalizadas únicas que se pueden agregar a la jerarquía de vistas de una aplicación. Un archivo .xib generalmente representa la interfaz de una sola vista o pantalla en una aplicación, mientras que un guión gráfico representa muchas pantallas y las transiciones entre ellas.
Hay muchas opiniones sobre qué solución – archivos .xib, guiones gráficos o código – funciona mejor para crear y mantener una interfaz de usuario. En realidad, no hay una solución perfecta, y siempre vale la pena considerar la mejor herramienta para el trabajo a mano. Dicho esto, los archivos .xib suelen ser más eficaces cuando se usan para representar una vista personalizada necesaria en varios lugares de una aplicación, como una celda de vista de tabla personalizada.
Puede encontrar más documentación sobre el uso de archivos .xib en las siguientes recetas:
- Uso de la plantilla View .xib
- Creación de un objeto TableViewCell personalizado mediante un .xib
- Creación de una pantalla de inicio con un .xib
Para obtener más información sobre el uso de guiones gráficos, consulte introducción a guiones gráficos.
Esta y otras guías relacionadas con iOS Designer hacen referencia al uso de guiones gráficos como enfoque estándar para crear interfaces de usuario, ya que la mayoría de las plantillas de proyecto nuevas de Xamarin.iOS proporcionan un guión gráfico de forma predeterminada.
Resumen
En esta guía se ha proporcionado una introducción a la Designer de iOS, donde se describen sus características y se describen las herramientas que ofrece para diseñar hermosas interfaces de usuario.
Vínculos relacionados
- Introducción a guiones gráficos
- Tutorial de controles que se pueden diseñar de iOS
- Hello, iOS
- Hello, iOS Multiscreen
- Introducción a Android Designer
- Clases y métodos parciales
- Profundización en el Designer de Xamarin para iOS: Evolución 2014 (vídeo)
- Uso del Designer de iOS para crear una pantalla de inicio (vídeo)