Opciones de diseño en Xamarin.iOS

Hay dos mecanismos diferentes para controlar el diseño cuando se cambia el tamaño de una vista o se gira:

• Ajuste automático: el inspector de ajuste automático del diseñador proporciona una manera de establecer las propiedades AutoresizingMask. Esto permitirá que un control se delimite a los bordes de su contenedor o corrija su tamaño. El ajuste automático funciona en todas las versiones de iOS. Esto se describe con más detalle a continuación
• Diseño automático: característica introducida en iOS 6 que permite un control específico sobre las relaciones de los controles de la interfaz de usuario. Permitirá el control de las posiciones de los elementos en relación con otros elementos en la superficie de diseño. Este tema se trata con más detalle en la guía Diseño automático con Xamarin iOS Designer.

Ajuste automático de tamaño

Cuando un usuario cambia el tamaño de una ventana, como cuando se gira el dispositivo y cambia la orientación, el sistema cambiará automáticamente el tamaño de las vistas dentro de esa ventana según sus reglas de ajuste automático. Estas reglas se pueden establecer en C# mediante la propiedad AutoresizingMask de UIView en el Panel de propiedades del Diseñador de iOS, como se muestra a continuación:

Cuando se selecciona un control, esto permite especificar manualmente la ubicación y las dimensiones del control, así como elegir comportamiento de ajuste automático. Como se muestra en la captura de pantalla siguiente, podemos usar los muelles y los puntales en el control de ajuste automático para definir la relación de vista seleccionada con su elemento primario:

Ajustar un muelle hará que la vista cambie el tamaño en función del ancho o alto de su vista primaria. Ajustar un puntal hará que la vista mantenga una distancia constante entre sí y su vista primaria, en ese borde concreto.

Esta configuración también se puede establecer en el código:

textfield1.Frame = new RectangleF(15, 277, 79, 27);
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleBottomMargin;

Para probar la configuración de ajuste automático, habilite diferentes orientaciones de dispositivo compatibles en las opciones del proyecto:

En el código subyacente, podemos usar el código siguiente, lo que hace que los dos controles de texto cambien el tamaño horizontalmente:

textview1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
imageview1.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleLeftMargin;

También podemos ajustar los controles mediante el Diseñador. La selección de los puntales tal y como se muestra a continuación hará que la imagen permanezca alineada a la derecha sin recortarse de la parte inferior de la vista:

Estas capturas de pantalla muestran cómo se cambia el tamaño o la posición de los controles cuando se gira la pantalla:

Observe que la vista de texto y el campo de texto se extienden para mantener los mismos márgenes izquierdo y derecho, debido a la configuración FlexibleWidth. La imagen tiene el margen superior e izquierdo flexible, lo que significa que conserva los márgenes inferior y derecho, manteniendo la imagen en la vista cuando se gira la pantalla. Los diseños complejos suelen requerir una combinación de estas opciones de configuración en todos los controles visibles para mantener la coherencia de la interfaz de usuario y evitar que los controles se superpongan cuando cambian los límites de la vista (debido a la rotación o a otro evento de cambio de tamaño).