Qu'est-ce que "Contraindre à la marge" dans Storyboard dans Xcode 6


249

Je travaille avec la mise en page automatique et les contraintes et j'ai trouvé qu'il y avait une Constrain to marginsoption dans Xcode 6 qui n'était pas présente dans Xcode 5 et qui est vérifiée par défaut.

J'ai créé un projet de test puis j'ai ajouté un UITableViewsur un ViewController avec le cadre défini à la même taille que la vue et ajouté des contraintes

Xcode 6 Vous pouvez voir ici même si tableview a le même cadre que la vue suggérée par Xcode pour ajouter -16 comme contrainte tandis que Xcode 5 suggérerait d'ajouter l'espacement 0.

Avec Contraindre à la marge cochée

Maintenant, lorsque vous décochez l'option "Contraindre à la marge", elle se comporte comme Xcode 5 et suggère d'ajouter 0 comme contrainte

Avec contrainte de marge non cochée

De plus, j'ai constaté qu'une fois que j'ajoute une contrainte avec Contrainte à la marge vérifiée, je ne suis plus en mesure d'ouvrir le fichier de storyboard dans Xcode 5, donc c'est définitivement quelque chose de nouveau dans Xcode 6

J'espère que je pourrai expliquer ma question correctement. Je voudrais comprendre ce que fait réellement "Contraindre à la marge" et quand je dois et ne dois pas l'utiliser. Je m'excuse si c'est quelque chose de très simple et évident.

ÉDITER

J'ai trouvé quelque chose sur les marges de mise en page dans la discussion ici , je me demande si c'est lié à cela.


15
Pas besoin de s'excuser - ce n'est pas évident du tout.
Ben Clayton

4
+1 pas besoin de s'excuser, je voulais aussi poser cette question. BTW: pour ouvrir le storyboard dans Xcode5, jetez un œil à: stackoverflow.com/a/25298909/529243
Olaf

1
C'est la chose la plus proche d'une explication que j'ai trouvée: stackoverflow.com/questions/25275901/…
Nathaniel

Comment désactiver cela?
orkenstein

2
Ouais c'est la vraie douleur. Je n'ai pas pu comprendre comment la décocher définitivement.
Bhumit Mehta

Réponses:


315

Je ne comprends pas du tout pourquoi les gens se plaignent que "les marges provoqueraient un crash brutal sur quoi que ce soit avant iOS 8. "

La définition de vos contraintes par rapport à la marge dans un fichier xib ou un storyboard ne fait pas planter votre application sur iOS7, et cela ne fait pas non plus de différence d'interface utilisateur sur votre appareil iOS7, tant que vous ne touchez pas aux propriétés UIView.layoutMarginset UIView.preservesSuperviewLayoutMarginsdans votre code.

Qu'est-ce que les marges dans iOS8

Les marges de mise en page représentent un remplissage autour de l' intérieur d'un UIViewque le système de mise en page peut utiliser lors de la mise en page des sous-vues - pour garantir qu'un espace est laissé entre le bord d'une vue et une sous-vue. À cet égard, elle ressemble beaucoup à la propriété padding associée aux blocs en CSS.

entrez la description de l'image ici

Par défaut, a UIViewa des marges de disposition de 8 points de chaque côté, et cela ne peut pas être modifié dans Interface Builder . Cependant, en définissant la UIView.layoutMarginspropriété dans le code, qui n'est disponible que sur iOS8, vous pouvez ajuster ces valeurs.

Vous pouvez demander à IB d'afficher les marges avec Editeur> Canevas> Afficher les rectangles de disposition: entrez la description de l'image ici

Les marges peuvent être utilisées pour aider à mettre en page vos vues et sous-vues. ChaqueUIView sont livrés avec des marges par défaut, mais ils n'affectent le placement de la vue que lorsque vous configurez une contrainte liée à une marge.

Comment utiliser les marges

La seule façon d'utiliser les marges dans Interface Builder est de cocher l' option Relatif à la marge lors de la configuration de vos contraintes. C'est ainsi que vous dirigez votre contrainte vers Utiliser des marges plutôt que des bords lors de la présentation de ma vue.

entrez la description de l'image ici

Jetons un œil à quatre façons différentes de configurer une contrainte de tête entre une vue et sa sous-vue. Pour chaque contrainte, nous passons en revue la première association décrite sera le leader de la sous-vue , et la seconde sera le leader de la vue d'ensemble . Vous devez prêter une attention particulière au statut de vérification et de désactivation de l' option Relatif à la marge de chaque extrémité de contrainte, car cela définit si la contrainte est liée à la marge ou au bord de la vue.

  1. Premier élément (décocher), deuxième élément (vérifier): dans ce cas, nous déclarons que le bord gauche de la sous-vue doit s'aligner sur la marge gauche de la vue d'ensemble (comme indiqué dans cette image).

entrez la description de l'image ici

  1. Premier élément (décocher), deuxième élément (décocher): les deux utilisent le bord, pas la marge . Dans ce cas, nous déclarons que le bord gauche de la sous-vue doit s'aligner sur le bord gauche de la vue d'ensemble.

entrez la description de l'image ici

  1. Premier élément (vérifier), deuxième élément (décocher): dans ce cas, nous déclarons que la marge gauche de la sous-vue doit s'aligner sur le bord gauche de la vue d'ensemble. Ce type de disposition fait que la sous-vue chevauche la vue d'ensemble.

entrez la description de l'image ici

  1. Premier article (chèque), deuxième article (chèque). Cela a en fait le même effet que le cas 2, car la sous-vue et la vue d'ensemble ont la même marge par défaut. Nous déclarons que la marge gauche de subview doit s'aligner sur la marge gauche de superview.

entrez la description de l'image ici

Ce qui est bien avec Margins

Cette nouvelle fonctionnalité (iOS8) n'impacte le développement de l'interface utilisateur que si vous décidez d'utiliser des marges.

En utilisant des marges, vous pouvez ajuster le placement de plusieurs sous-vues qui partagent une relation commune avec une vue d'ensemble partagée en modifiant la valeur d'une seule propriété. Il s'agit d'une victoire claire sur la définition de toutes les contraintes associées avec des valeurs fixes, car si vous avez besoin de mettre à jour tout l'espacement, au lieu de changer chaque valeur une par une, vous pouvez simultanément modifier tous les placements pertinents en mettant à jour la marge de la vue d'ensemble avec une seule ligne de code comme celui-ci:

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

Pour illustrer cet avantage, dans le cas suivant, tous les bords gauches des sous-vues sont alignés sur la marge gauche de leur vue d'ensemble. Ainsi, la modification de la marge gauche de superview affectera toutes les sous-vues en même temps.

entrez la description de l'image ici


Merci pour l'explication détaillée. Je marque cela comme une réponse acceptée car cela explique bien les choses.
Bhumit Mehta le

Merci @Bhumit, j'espère que cette réponse vous aidera.
Scott Zhu

4
"Je ne comprends pas du tout pourquoi les gens se plaignent". Eh bien, peut-être que le comportement a changé avec l'un des derniers bêtas, je n'ai pas vérifié. Mais il y a au moins quelques mois, cela a provoqué un crash même si vous n'avez pas essayé de définir les layoutMargins dans le code.
KPM

Il vaut la peine de souligner que lors de l'ajout de nouvelles contraintes, les nouvelles versions de Xcode vous permettent de décocher une case pour "Contraindre les marges" qui définit le même indicateur "Relatif aux marges". C'est utile car cela permet d'économiser quelques clics! Excellente réponse BTW, si bien expliqué et les images étaient très utiles.
EricWasTaken

J'ai noté que les photos sont hébergées sur dropbox. Ne serait-il pas préférable d'héberger les images sur SO?
test

63

Dans iOS 8, vous avez maintenant la possibilité de définir vos contraintes par rapport à une marge prédéfinie aux limites de la vue d'ensemble, au lieu des limites de la vue d'ensemble elles-mêmes. Oui, cela est totalement lié aux marges de mise en page que vous avez indiquées dans les documents. Un avantage est que vous pouvez redéfinir vos marges de manière dynamique ou différente pour chaque type d'appareil, et la disposition sera mise à jour en conséquence sans modifier les contraintes.

Quand l'utiliser: quand vous voulez profiter de cette nouvelle flexibilité.

Quand ne PAS l'utiliser: pour toute application destinée à fonctionner sur iOS 7 ou une version antérieure.


21
Ce serait une fonctionnalité intéressante si elle n'était pas activée par défaut et provoquait un crash brutal sur quoi que ce soit avant iOS 8.
TylerJames

1
Je ne pourrais pas être plus d'accord.
KPM

42

La propriété sur UIView est: layoutMargins. Voir les documents Apple . Fondamentalement, si les marges de mise en page sont 8,8,8,8 (par défaut), une contrainte avec 0 espace devant la marge du conteneur aura une position x de 8. Notez que cela n'est disponible que sur iOS8 ou version ultérieure.

Pour tous ceux qui ne veulent pas que leurs contraintes passent à la marge du conteneur:

CTRL + clic + glisser pour afficher la fenêtre contextuelle de création de contrainte.

Si le menu affiche pour créer la contrainte à la marge par défaut, maintenez l'option / alt enfoncée pour permettre à la contrainte d'être appliquée au conteneur et non à la marge du conteneur.

Maintenant, il montrera l'option de créer la contrainte PAS à la marge. C'est beaucoup plus rapide dans mon utilisation.


3
C'est probablement la meilleure solution que j'ai trouvée là-bas. Décocher "constain to margin" ne fonctionne pas toujours et semble un peu trop magique. C'est parfait.
Levi McCallum

Pourquoi diable le défaut n'est-il pas 10pt?
ZaBlanc

11
Apple a l'habitude de choisir des longueurs et des tailles en fonction de la recherche sur l'utilisabilité, et non en choisissant des chiffres que nous qui lisons le code préférerions. Par exemple, la hauteur par défaut pour beaucoup de choses est de 44 ou 35 pt. @ZaBlanc
Kyle Robson

Solution parfaite lorsque j'ajoute une contrainte sur le storyboard sans marge par défaut. Je vous remercie!
inix
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.