Skip to content


Auto Layout

Pessoal agora estamos com algumas fragmentações nos devices da Apple, mas ela não nos abandonou, temos o Auto Layout para posicionar os objetos por referencia e não um frame fixo, então vamos falar um pouco de como funciona.

Para começarmos é requisito o xcode 4.5 e iOS 6 e confirmando o que eu havia dito, não vai ser suportado a arquitetura do iPhone 3G e lembrando que todos os demais podem rodar iOS 6.

Se você criar um novo nib ou usar algum já existente já pode habilitar o Auto Layout como nessa imagem:

Não precisaremos mais de definir os frames como faziamos no - (void)layoutSubviews, por exemplo.

Mas lembre-se de desabilitar o autoresizing maks translation para todas as views que você criou programaticamente, senão o resultado pode não ser o esperado com o Auto Layout.

[view setTranslatesAutoresizingMaskIntoConstraints:NO];

O segredo não está nos objetos ou em suas posições, mas sim nas CONSTRAINTS, elas e suas prioridades que ditam as regras, então escolha a constraint que melhor lhe servir. Vamos botar a mão na massa e ver como se faz.

Na imagem abaixo a constraint selecionada é referente ao objeto, assim como o Button tem as suas constraints que também são referidas ao tamanho do mesmo. Caso contrário são as que tanto queremos, as constraints que definem as posições e a quem elas estão se referindo, ou seja, o objeto vai se posicionar em relação a qual outro objeto.

Ao arrastar um objeto para a tela (nem preciso dizer que é com o AutoLayout habilitado, né) o IB já cria as constraints e habilita as que ele resolve, que não necessariamente são as que você quer, então habilite a que lhe melhor atende e para apagar as que você não quer é só clicar sobre ela e delete:

Vamos trabalhar em cima de uma constraint então, pois ela possui Relation, Constant e Priority.

Relation é a relação de igualdade, assim como uma equação, por exemplo se uma constraint for menor ou igual a um objeto, significa que a distância do objeto poderá ser igual à definida ou diminuir se for necessário, no caso de uma rotação onde a altura da tela fica menor, o objeto se moverá para continuar atendendo à constraint.

Constant é o valor inicial da constraint, digo inicial, pois se for menor ou igual ele vai ser o valor máximo, por exemplo e no caso de maior ou igual, será o valor mínimo, pois o mesmo poderá se extender para atender à Relation.

E mais, se um objeto em portrait, por exemplo, estiver bem em cima da borda, ao invés de definir um valor Constant, clique em Standard, com isso o objeto sempre vai manter no mínimo aquela margem que o IB já define quando você está arrastando os objetos para a tela.

Priority é a prioridade daquela constraint, pois um objeto para ser definido em uma determinada parte da tela, o mesmo precisa atender algumas regras, por exemplo, um objeto não pode definitivamente sair do lado de outro, mas em determinada posição (portrait ou landscape) ele pode se movimentar mais para a direita ou esquerda, então a constraint que define isso tem que ter uma prioridade menor do que a constraint que define a distância entre ambos objetos que têm que ficar lado a lado.

E a prioridade que não vai permitir quem um texto seja cortado, por exemplo, tem que ser a mais alta também, para que um objeto não tente o sobrepor.

Agora, se você quiser definir uma posição em relação a outro objeto é o mesmo princípio, a única diferença vai ser que para você definir tais constraints, você terá que selecionar ambos os objetos e clicar naquele icone para definir as constraints quem referencia um objeto a outro.

E pra encerrar com um slide sessão 202:

Mas como que eu vou saber se deu conflito, o primeiro passo é perceber que o layout não saiu como você esperava e para comprovar:

E isso acontece quando você não consegue satisfazer as regras da “grande equação”, composta pelas constraints que a compõe.

Bom, pessoal, eu tentei mencionar como que as constraints funcionam e não ensinar e mostrar passo a passo, mas recomendo que criem um projeto e testem o que foi dito aqui para você sentir e perceber melhor como é a relação entre todos os atributos e a repetição da palavra constraint, durante o post, foi proposital para que fique bem claro de quem estávamos falando.

Eu subi o projeto que eu criei para testar as combinações aqui no github, então fiquem a vontade para baixá-lo, mas lembre-se que ele só tem alguns casos.

Se quiserem se aprofundar no assunto e trabalhar nas constraints via código [NSLayoutConstraint], o princípio é o mesmo e na WWDC de 2012, sessões 202, 228, 232 e também na ajuda do próprio xcode você encontra mais informações.

Qualquer dúvida ou esclarecimento deixem nos comentários, obrigado e até a próxima!!

 

Posted in Dev, iOS, Mobile, tutorial.

Tagged with , , , , , , , , , , , .


0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.



Some HTML is OK

or, reply to this post via trackback.

(Spamcheck Enabled)