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 AutoresizingMask propiedades. Esto permitirá que un control se delimite en 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 : una característica, introducida en iOS 6 que permite un control específico sobre las relaciones de los controles de interfaz de usuario. Permitirá controlar las posiciones de los elementos en relación con otros elementos en la superficie de diseño. En este tema se describe con más detalle el diseño automático con la guía de Designer de Xamarin iOS.

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 AutoresizingMask propiedad de UIView o en el Panel de propiedades del Designer 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 estruendos en el control de ajuste automático para definir la relación de vista seleccionada con su elemento primario:

El ajuste de un muelle hará que la vista cambie el tamaño en función del ancho o alto de su vista primaria. El ajuste de un strut hará que la vista mantenga una distancia constante entre sí misma 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 Designer. La selección de los struts tal como se muestra a continuación hará que la imagen permanezca alineada a la derecha sin ser recortada de la parte inferior de la vista:

Estas capturas de pantalla muestran cómo los controles cambian el tamaño o se cambian de posición 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 FlexibleWidth configuración. 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. Normalmente, los diseños complejos requieren una combinación de estas opciones de configuración en cada control visible para mantener la coherencia de la interfaz de usuario y evitar que los controles se superponga cuando cambien los límites de la vista (debido a la rotación u otro evento de cambio de tamaño).

Vínculos relacionados

• Controles (ejemplo)