¿Qué es "Restringir al margen" en Storyboard en Xcode 6


249

Estoy trabajando con autolayout y restricciones y descubrí que hay una Constrain to marginsopción en Xcode 6 que no estaba presente en Xcode 5 y está marcada por defecto.

Creé un proyecto de prueba y luego agregué un UITableViewen un ViewController con el marco establecido en el mismo tamaño que la vista y agregué restricciones

Xcode 6 Puede ver aquí aunque la vista de tabla tiene el mismo marco que la vista Xcode sugiere agregar -16 como restricción, mientras que Xcode 5 sugeriría agregar un espacio 0.

Con Restringir al margen marcado

Ahora, cuando desmarca la opción "Restringir al margen", se comporta igual que Xcode 5 y sugeriría agregar 0 como restricción

Con Restringir al margen Sin marcar

Además, descubrí que una vez que agrego la restricción con Restringir al margen marcado, ya no puedo abrir el archivo del guión gráfico en Xcode 5, por lo que definitivamente es algo nuevo en Xcode 6

Con suerte, puedo explicar mi pregunta correctamente. Me gustaría entender qué hace realmente "Restringir al margen" y cuándo debería y no debería usarlo. Me disculpo si es algo muy simple y obvio.

EDITAR

Encontré algo sobre los márgenes de diseño en discusión aquí , me pregunto si está relacionado con esto.


15
No es necesario disculparse, no es obvio lo que eso hace.
Ben Clayton

44
+1 no es necesario disculparse, también quería hacer esta pregunta. Por cierto: para abrir el guión gráfico en Xcode5 eche un vistazo a: stackoverflow.com/a/25298909/529243
Olaf

1
Esto es lo más parecido a una explicación que he encontrado: stackoverflow.com/questions/25275901/…
Nathaniel

¿Cómo deshabilitar esto?
orkenstein

2
Sí, ese es el verdadero dolor. No he podido averiguar cómo desmarcarlo permanentemente.
Bhumit Mehta

Respuestas:


315

No entiendo en absoluto por qué la gente se queja de que "los márgenes causarían un colapso total en cualquier cosa antes de iOS 8 ".

El establecimiento de sus limitaciones relativas a los márgenes en un archivo de guión gráfico o xib NO hacer su aplicación en accidente iOS7, y que NO hacer una diferencia en su dispositivo de interfaz de usuario ni iOS7, siempre y cuando no se toca el UIView.layoutMarginsy UIView.preservesSuperviewLayoutMarginspropiedades en el código.

¿Qué son los márgenes en iOS8?

Los márgenes de diseño representan el relleno alrededor del interior de un UIViewsistema que el sistema de diseño puede usar al diseñar subvistas, para garantizar que quede un espacio entre el borde de una vista y una subvista. A este respecto, es muy similar a la propiedad de relleno asociada con bloques en CSS.

ingrese la descripción de la imagen aquí

Por defecto, a UIViewtiene márgenes de diseño de 8 puntos en cada lado, y esto no se puede cambiar en Interface Builder . Sin embargo, al configurar la UIView.layoutMarginspropiedad en el código, que solo está disponible en iOS8, puede ajustar estos valores.

Puede hacer que IB muestre los márgenes con Editor> Lienzo> Mostrar rectángulos de diseño: ingrese la descripción de la imagen aquí

Los márgenes se pueden usar para ayudar a diseñar sus vistas y subvistas. Todos UIViewvienen con márgenes de forma predeterminada, pero solo afectan la ubicación de la vista cuando configura una restricción relacionada con un margen.

Cómo usar los márgenes

La única forma de usar márgenes en Interface Builder es marcar la opción Relativo al margen mientras configura sus restricciones. Así es como dirige su restricción para usar márgenes en lugar de bordes al diseñar mi vista.

ingrese la descripción de la imagen aquí

Echemos un vistazo a cuatro formas diferentes de configurar una restricción principal entre una vista y su subvista. Para cada restricción que revisamos, la primera asociación descrita será la principal de la subvista , y la segunda será la principal de la supervista . A lo que debe prestar mucha atención es al estado de verificación y desmarcación de la opción Relativo al margen de cada final de restricción, porque eso define si la restricción está vinculada al margen o al borde de la vista.

  1. Primer elemento (desmarcar), segundo elemento (verificar): en este caso, estamos declarando que el borde izquierdo de la subvista debe alinearse con el margen izquierdo de la supervista (como se muestra en esta imagen).

ingrese la descripción de la imagen aquí

  1. Primer elemento (desmarcar), segundo elemento (desmarcar): ambos usan borde, no margen . En este caso, estamos declarando que el borde izquierdo de la subvista debe alinearse con el borde izquierdo de la supervista.

ingrese la descripción de la imagen aquí

  1. Primer elemento (marcar), segundo elemento (desmarcar): en este caso, estamos declarando que el margen izquierdo de la subvista debe alinearse con el borde izquierdo de la supervista. Este tipo de diseño en realidad hace que la subvista se superponga con la supervista.

ingrese la descripción de la imagen aquí

  1. Primer ítem (cheque), segundo ítem (cheque). Esto realmente tiene el mismo efecto que el caso 2, ya que tanto la subvista como la supervista tienen el mismo margen predeterminado. Estamos declarando que el margen izquierdo de la subvista debe alinearse con el margen izquierdo de la supervista.

ingrese la descripción de la imagen aquí

Lo bueno de los márgenes

Esta nueva característica (iOS8) solo afecta el desarrollo de la interfaz de usuario si decides usar márgenes.

Mediante el uso de márgenes, puede ajustar la ubicación de varias subvistas que comparten una relación común con una supervista compartida cambiando el valor de una sola propiedad. Esta es una clara victoria sobre la configuración de todas las restricciones asociadas con valores fijos, porque si necesita actualizar todo el espacio, en lugar de cambiar cada valor uno por uno, puede modificar simultáneamente todas las ubicaciones relevantes actualizando el margen de la supervista con una sola línea de código como este:

self.rootView.layoutMargins = UIEdgeInsetsMake(0, 50, 0, 0);

Para ilustrar este beneficio, en el siguiente caso, todos los bordes izquierdos de las subvistas están alineados con el margen izquierdo de su supervista. Por lo tanto, cambiar el margen izquierdo de la supervista afectará a todas las subvistas al mismo tiempo.

ingrese la descripción de la imagen aquí


Gracias por la explicación detallada. Estoy marcando esto como una respuesta aceptada ya que esto explica muy bien las cosas.
Bhumit Mehta

Gracias @Bhumit, espero que esta respuesta ayude.
Scott Zhu

44
"No entiendo en absoluto por qué la gente se queja". Bueno, tal vez el comportamiento cambió con una de las últimas versiones beta, no lo he comprobado. Pero al menos hace unos meses, causó un bloqueo, incluso si no trataste de configurar los márgenes de diseño en el código.
KPM

Vale la pena señalar que al agregar nuevas restricciones, las versiones más nuevas de Xcode le permiten desmarcar una casilla para "Restringir a los márgenes" que establece el mismo indicador "Relativo a los márgenes". ¡Esto es útil porque ahorra unos pocos clics! Gran respuesta, por cierto, tan bien explicado y las imágenes fueron muy útiles.
EricWasTaken

Noté que las imágenes están alojadas en Dropbox. ¿No sería mejor alojar las imágenes en SO?
prueba

63

En iOS 8 ahora tiene la opción de definir sus restricciones en relación con un margen predefinido a los límites de la supervista, en lugar de los límites de la misma. Sí, está totalmente relacionado con los márgenes de diseño que señaló en los documentos. Una ventaja es que puede redefinir sus márgenes dinámicamente o de manera diferente para cada tipo de dispositivo, y el diseño se actualizará correspondientemente sin modificar las restricciones.

Cuándo usarlo: cuándo quieres aprovechar esta nueva flexibilidad.

Cuándo NO usarlo: para cualquier aplicación destinada a ejecutarse en iOS 7 o inferior.


21
Esta sería una buena característica si no se habilita de manera predeterminada y, sin embargo, causa un bloqueo absoluto en cualquier cosa anterior a iOS 8.
TylerJames

1
No podría estar más de acuerdo.
KPM

42

La propiedad de UIView es: layoutMargins. Ver los documentos de Apple . Básicamente, si los márgenes de diseño son 8,8,8,8 (el valor predeterminado), una restricción con 0 espacios iniciales al margen del contenedor tendrá una posición x de 8. Tenga en cuenta que esto solo está disponible en iOS8 o posterior.

Para todos los que no quieren que sus restricciones vayan al margen del contenedor:

CTRL + clic + arrastrar para mostrar la ventana emergente de creación de restricciones.

Si el menú muestra crear la restricción al margen de forma predeterminada, mantenga presionada la opción / alt para permitir que la restricción se realice en el contenedor y no en el margen del contenedor.

Ahora mostrará la opción de crear la restricción NO al margen. Esto es MUCHO más rápido en mi uso.


3
Esta es probablemente la mejor solución que he encontrado. Desmarcar "constain to margins" no siempre funciona y se siente demasiado mágico. Esto es perfecto.
Levi McCallum

¿Por qué demonios el valor predeterminado no es 10pt?
ZaBlanc

11
Apple tiene un historial de elegir longitudes y tamaños basados ​​en investigaciones de usabilidad, no escogiendo números que nosotros que leemos el código podríamos preferir. Por ejemplo, la altura predeterminada para muchas cosas es 44 o 35 pt. @ZaBlanc
Kyle Robson

Solución perfecta cuando agrego restricciones en el guión gráfico sin margen por defecto. ¡Gracias!
inix
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.