Guiones gráficos en Xamarin.Mac: inicio rápido
Como introducción rápida al uso de Guiones gráficos para definir la interfaz de usuario de una aplicación de Xamarin.Mac, vamos a iniciar un nuevo proyecto de Xamarin.Mac. Seleccione Mac>Aplicación>Cocoa App y haga clic en el botón Siguiente:
Use el Nombre de la aplicación de MacStoryboard y haga clic en el botón Siguiente:
Use los valores predeterminados de Nombre del proyecto y Nombre de la solución y haga clic en el botón Crear:
En el Explorador de soluciones, haga doble clic en el archivo Main.storyboard para abrirlo y editarlo en Interface Builder de Xcode:
Como puede ver arriba, el Guion gráfico predeterminado define tanto la barra de menús de la aplicación como su ventana principal con su controlador de vista y su vista. Para nuestra aplicación de muestra, vamos a crear una interfaz de usuario que tenga una Vista de contenido principal en un lado y una Vista de inspector en el segundo.
Para ello, primero tendremos que eliminar el controlador de vista y la vista predeterminada que vienen con el Guion gráfico seleccionándolos en Interface Builder y pulsando la clave Eliminar:
A continuación, escriba split en el área Filtro, seleccione el controlador de vista dividida vertical y arrástrelo hasta la Superficie de diseño:
Observe que el controlador incluyó automáticamente dos controladores de vista secundarios (y sus vistas relacionadas), conectados a los lados izquierdo y derecho de la vista dividida. Para vincular la vista dividida a su ventana principal, pulse la tecla Control, haga clic en el controlador de la ventana (el círculo azul en el marco del controlador de la ventana) y arrastre una línea hasta el controlador de la vista dividida. Seleccione contenido de la ventana en la ventana emergente:
Esto vinculará los dos elementos de interfaz mediante segue:
Queremos colocar una Vista de texto en la parte izquierda de la Vista dividida y que ocupe automáticamente el área disponible cuando se cambie el tamaño de la ventana o de la Vista dividida. Arrastre una Vista de texto al Controlador de vista superior unido a la Vista dividida y haga clic en la restricción de diseño automático de Anclar (el segundo icono desde la derecha en la parte inferior de la Superficie de diseño).
Desde aquí haremos clic en los cuatro iconos de I-Beam alrededor del cuadro delimitador en la parte superior del desplegable de restricciones y haremos clic en el botón Agregar 4 restricciones en la parte inferior para agregar las restricciones necesarias.
Si volvemos a Visual Studio para Mac y ejecutamos el proyecto, observe que la Vista de texto cambia automáticamente de tamaño para ocupar el lado izquierdo de la Vista dividida a medida que se cambia el tamaño de la ventana o de la división:
Como vamos a usar la parte derecha de la vista dividida como área de Inspector, queremos que tenga un tamaño más pequeño y que permita colapsarla. Vuelva a Xcode y edite la vista de la derecha seleccionándola en la Superficie de diseño y haciendo clic en el Inspector de tamaño. Desde aquí escriba un Ancho de 250:
A continuación, seleccione el elemento de división que representa el lado derecho, establezca una Prioridad de retención más alta y haga clic en la casilla El usuario puede contraer:
Si volvemos a Visual Studio para Mac y ejecutamos el proyecto ahora, observe que la parte derecha mantiene su tamaño más pequeño y que la ventana cambia de tamaño:
Definir un segue de presentación
Vamos a diseñar el lado derecho de la vista dividida para actuar como inspector para las propiedades del texto seleccionado. Arrastraremos algunos controles a la vista inferior para diseñar la interfaz de usuario del inspector. Para el último control, queremos mostrar una ventana emergente que permita al usuario seleccionar entre cuatro estilos de caracteres preestablecidos.
Agregaremos un botón al Inspector y un Controlador de vista a la Superficie de diseño. Cambiaremos el tamaño del controlador de vista para que tenga el tamaño que queremos que tenga nuestro elemento emergente y le agregaremos cuatro botones. A continuación, haremos clic con la tecla Control en el botón de la vista del Inspector y lo arrastraremos hasta el Controlador de vista que representará nuestro elemento emergente:
En el menú emergente, seleccionaremos Emergente:
Por último, seleccionaremos el Segue en la Superficie de diseño y estableceremos el Borde preferido en Izquierda. Después, arrastraremos una línea desde la Vista de anclaje hasta el Botón al que queremos que se adjunte el elemento emergente:
Si volvemos a Visual Studio para Mac, ejecutamos la aplicación y hacemos clic en el botón Ninguno del Inspector, aparecerá la ventana emergente:
Crear preferencias de aplicación
La mayoría de las aplicaciones estándar de macOS ofrecen un Diálogo de preferencias que permite al usuario definir varias opciones que controlan diversos aspectos de la aplicación, como la apariencia o las cuentas de usuario.
Para definir una Ventana de diálogo de preferencias estándar, arrastre primero un Controlador de vista de pestaña a la Superficie de diseño:
De nuevo, esto incluirá automáticamente dos Controladores de vista secundarios. Por ejemplo, agregaremos una etiqueta a cada vista que se centrará dentro de ella:
A continuación, queremos mostrar la ventana de Preferencias cuando el usuario seleccione el elemento de menú Preferencias.... En la barra de menús, seleccione el elemento del menú de preferencias, haga clic con la tecla Control y arrastre una línea hasta nuestro Controlador de vista de pestaña:
En el menú emergente, seleccionaremos Modal para mostrar esta ventana como un cuadro de diálogo modal:
Si guardamos nuestros cambios, volvemos a Visual Studio para Mac, ejecutamos la aplicación y seleccionamos el elemento de menú Preferencias..., aparecerá nuestro nuevo cuadro de diálogo Preferencias:
Puede que note que esto no parece una ventana de diálogo de preferencias estándar de una aplicación macOS. Para solucionarlo, incluya dos archivos de imagen en la carpeta Resources de la aplicación de Xamarin.Mac en el Explorador de soluciones y vuelva a Interface Builder de Xcode.
Seleccione el Controlador de vista de pestaña y cambie su Estilo por Barra de herramientas:
Seleccione cada pestaña, asígnele una Etiqueta y seleccione una de las imágenes para representarla:
Si guardamos nuestros cambios, volvemos a Visual Studio para Mac, ejecutamos la aplicación y seleccionamos el elemento de menú Preferencias..., el cuadro de diálogo se mostrará ahora como en una aplicación estándar de macOS:
Para más información, consulte nuestra documentación sobre Trabajar con imágenes, Menús, Ventanas y Diálogos.