O que é "Restringir à margem" no Storyboard no Xcode 6

249

Estou trabalhando com autolayout e restrições e descobri que há uma Constrain to marginsopção no Xcode 6 que não estava presente no Xcode 5 e está marcada por padrão.

Criei um projeto de teste e adicionei um UITableViewem um ViewController com o quadro definido para o mesmo tamanho da visualização e adicionei restrições

Xcode 6 Você pode ver aqui, embora a tableview tenha o mesmo quadro que a exibição que o Xcode sugere para adicionar -16 como restrição, enquanto o Xcode 5 sugere a adição do espaçamento 0.

Com Restringir à margem marcado

Agora, quando você desmarca a opção "Restringir à margem", ela se comporta da mesma forma que o Xcode 5 e sugere a adição de 0 como restrição

Com Restringir à margem Desmarcada

Além disso, descobri que, depois de adicionar restrição com o Restringir à margem marcada, não consigo mais abrir o arquivo de storyboard no Xcode 5, por isso é definitivamente algo novo no Xcode 6

Felizmente, sou capaz de explicar minha pergunta corretamente. Eu gostaria de entender o que "Restringir à margem" realmente faz e quando devo e não devo usá-lo. Peço desculpas se é algo muito simples e óbvio.

EDITAR

Eu encontrei algo sobre margens de layout em discussão aqui , gostaria de saber se está relacionado a isso.

Bhumit Mehta
fonte
15
Não precisa se desculpar - não é óbvio o que isso faz.
Ben Clayton
4
+1 não é necessário se desculpar, eu também queria fazer esta pergunta. Entre: para abrir o storyboard no Xcode5, dê uma olhada em: stackoverflow.com/a/25298909/529243
Olaf
1
Esta é a coisa mais próxima de uma explicação que encontrei: stackoverflow.com/questions/25275901/…
Nathaniel
Como desativar isso?
Orkenstein 3/10
2
Sim, essa é a verdadeira dor. Não consegui descobrir como desmarcá-lo permanentemente.
Bhumit Mehta

Respostas:

315

Não entendo por que as pessoas estão reclamando que "as margens causariam uma falha total em qualquer coisa anterior ao iOS 8. "

Definir suas restrições em relação à margem em um arquivo xib ou storyboard NÃO causa falha no aplicativo no iOS7 e também não faz diferença na interface do usuário no dispositivo iOS7, desde que você não toque nas propriedades UIView.layoutMarginse UIView.preservesSuperviewLayoutMarginsno seu código.

O que são margens no iOS8

As margens do layout representam o preenchimento no interior de um UIViewque o sistema de layout pode usar ao exibir subvisões - para garantir que seja deixado um espaço entre a borda de uma vista e uma subview. Nesse aspecto, é muito parecido com a propriedade padding associada aos blocos no CSS.

insira a descrição da imagem aqui

Por padrão, um UIViewtem margens de layout de 8 pontos em cada lado, e isso não pode ser alterado no Interface Builder . No entanto, configurando a UIView.layoutMarginspropriedade no código, disponível apenas no iOS8, você pode ajustar esses valores.

Você pode obter o IB para exibir as margens em Editor> Tela> Mostrar retângulos de layout: insira a descrição da imagem aqui

As margens podem ser usadas para ajudar a organizar suas visualizações e subvisões. Todos UIViewvêm com margens por padrão, mas eles só afetam o posicionamento da vista quando você configura uma restrição relacionada a uma margem.

Como usar margens

A única maneira de usar margens no Interface Builder é marcar a opção Relativo à margem enquanto configura suas restrições. É assim que você direciona sua restrição para Usar margens em vez de arestas ao exibir minha visão.

insira a descrição da imagem aqui

Vamos dar uma olhada em quatro maneiras diferentes de configurar uma restrição principal entre uma exibição e sua subvisão. Para cada restrição, revisamos a primeira associação descrita como líder da subvisão e a segunda liderança da superview . O que você deseja prestar muita atenção é o status de verificação e desmarcação da opção Relativo à margem de cada extremidade da restrição, pois isso define se a restrição está vinculada à margem ou à borda da visualização.

  1. Primeiro item (desmarque), segundo item (verificação): neste caso, estamos declarando que a borda esquerda da subvisão deve se alinhar à margem esquerda da supervisão (como mostrado nesta imagem).

insira a descrição da imagem aqui

  1. Primeiro item (desmarque), segundo item (desmarque): ambos usando borda, não margem . Nesse caso, estamos declarando que a borda esquerda da subvisão deve se alinhar à borda esquerda da superview.

insira a descrição da imagem aqui

  1. Primeiro item (marcar), segundo item (desmarcar): neste caso, estamos declarando que a margem esquerda da subvisão deve se alinhar à borda esquerda da superview. Esse tipo de layout faz com que a subvisão se sobreponha à superview.

insira a descrição da imagem aqui

  1. Primeiro item (cheque), segundo item (cheque). Na verdade, isso tem o mesmo efeito do caso 2, pois a subview e a superview têm a mesma margem padrão. Estamos declarando que a margem esquerda da subview deve estar alinhada com a margem esquerda da superview.

insira a descrição da imagem aqui

O que há de bom nas margens

Esse novo recurso (iOS8) afeta apenas o desenvolvimento da interface do usuário se você decidir usar margens.

Usando margens, você pode ajustar o posicionamento de várias subvisões que compartilham uma relação comum com uma super visão compartilhada alterando o valor de uma única propriedade. Essa é uma vitória clara sobre a definição de todas as restrições associadas com valores fixos, porque se você precisar atualizar todo o espaçamento, em vez de alterar cada valor um por um, poderá modificar simultaneamente todo o posicionamento relevante, atualizando a margem da superview com uma única linha de código como este:

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

Para ilustrar esse benefício, no caso a seguir, as bordas esquerdas de todas as subvisões estão alinhadas à margem esquerda da superview. Assim, a alteração da margem esquerda da super visão afetará todas as sub visões ao mesmo tempo.

insira a descrição da imagem aqui

Scott Zhu
fonte
Obrigado pela explicação detalhada. Estou marcando isso como uma resposta aceita, pois isso explica bem as coisas.
Bhumit Mehta
Obrigado @Bhumit, espero que esta resposta ajude.
Scott Zhu
4
"Não entendo por que as pessoas estão reclamando". Bem, talvez o comportamento tenha mudado com um dos últimos betas, eu não verifiquei. Mas, pelo menos há alguns meses, causou uma falha mesmo que você não tentasse definir o layoutMargins no código.
KPM 25/02
Vale ressaltar que, ao adicionar novas restrições, as versões mais recentes do Xcode permitem desmarcar a caixa "Restringir às margens", que define o mesmo sinalizador "Relativo às margens". Isso é útil porque economiza alguns cliques! Ótima resposta BTW, tão bem explicada e as imagens foram muito úteis.
precisa saber é o seguinte
Observei que as imagens estão hospedadas no dropbox. Não seria melhor hospedar as imagens no SO?
testando
63

No iOS 8, agora você tem a opção de definir suas restrições em relação a uma margem predefinida para os limites da superview, em vez dos próprios limites da superview. Sim, está totalmente relacionado às margens do layout que você apontou nos documentos. Uma vantagem é que você pode redefinir suas margens de forma dinâmica ou diferente para cada tipo de dispositivo, e o layout será atualizado de forma correspondente sem modificar as restrições.

Quando usá-lo: quando você quiser tirar proveito dessa nova flexibilidade.

Quando NÃO usá-lo: para qualquer aplicativo direcionado para execução no iOS 7 ou abaixo.

KPM
fonte
21
Este seria um bom recurso se não foi ativado por padrão e ainda causa um acidente de imediato em qualquer coisa antes do iOS 8.
TylerJames
1
Não poderia concordar mais.
KPMD
42

A propriedade em UIView é: layoutMargins. Veja o Apple Docs . Basicamente, se as margens do layout forem 8,8,8,8 (o padrão), uma restrição com 0 espaço à margem do contêiner terá uma posição x igual a 8. Observe que isso só está disponível no iOS8 ou posterior.

Para todos que não desejam que suas restrições atinjam a margem do contêiner:

CTRL + clique + arraste para mostrar o pop-up de criação de restrição.

Se o menu mostrar para criar a restrição para a margem por padrão, mantenha pressionada a opção / alt para permitir que a restrição seja feita no contêiner e não na margem do contêiner.

Agora ele mostrará a opção de criar a restrição NÃO na margem. Esta é WAY mais rápido em meu uso.

Kyle Robson
fonte
3
Esta é provavelmente a melhor solução que encontrei por aí. Desmarcar "considere as margens" nem sempre funciona e parece um pouco mágico demais. Isto é perfeito.
Levi McCallum
Por que diabos o padrão não é 10pt?
ZaBlanc 31/01
11
A Apple tem um histórico de escolher comprimentos e tamanhos com base na pesquisa de usabilidade, e não escolhendo números que preferimos ler os códigos. Por exemplo, a altura padrão para muitas coisas é 44 ou 35 pt. @ZaBlanc
Kyle Robson
Solução perfeita ao adicionar restrição no storyboard sem margem por padrão. Obrigado!
inix 28/03