Programação Workshop iOS

Desmistificando constraints e auto layout

April 1, 2017

 

Sabe aquela sensação ruim quando você abre um site no celular e ele fica todo torto, não cabe na tela e as letras ficam miúdas? Isso é tão verdadeiro quanto para aplicativos mobile. Como resolver esse problema? Constraints!!!

AutoLayout é uma ferramenta mágica que permite a criação de “regras” para as posições dos componentes e os organiza em cada tamanho diferente de tela mantendo as proporções. Essas “regras” são chamadas de constraints e você pode adicioná-las em todos os lados do componente (top, bottom, leading, trailing), nas métricas de altura e largura ( height, width) e em posicionamentos (x, y). Cada constraints representa uma relação entre elementos de interface.

Leading é o mesmo que left/esquerda e trailing é o mesmo que right/direita, porém essas constraints possibilitam o espelhamento do layout para um ambiente right-to-left.

Vou ensinar passo a passo como fazer a tela de login da imagem acima que apesar de bem simples cobre o conteúdo básico e pode ser replicado em uma diversa gama de layouts. Vamos começar pelo botão de login, #partiu ?!

Passo 1: no canto inferior direito do Xcode, selecione o ícone “show objects library” e procure por button. Arraste o componente até o ViewController.

Passo 2: na barra inferior, ao lado de onde você selecionou o botão, clique no segundo botão da direita para a esquerda “Add New Constraints”. Selecione as duas constraints laterais (esquerda e direita) e a constraint de bottom. Não esqueça de desmarcar a opção “Constrain to margins”*. Clique em “Add 3 constraints”.

*a opção “constrain to margins” adiciona 16pt ao valor que você determinar para a constraint.

 

WOW! Você acabou de criar seu primeiro componente com constraints! Nicely done!

Caso apareçam linhas pontilhadas em amarelo, clique no primeiro botão, na mesma barrinha onde você adicionou as constraints. Esse botão reposiciona os componentes de acordo com as constraints.

Vamos continuar construindo essa tela de login, adicionando agora os componentes de entrada de texto. Os campos de email e password são contidos de um UITextField e uma UIView para fazer essa linha abaixo do texto. Para criar esses dois campos siga os passos abaixo:

Passo 3: da mesma forma que você pesquisou por um botão, pesquise por um textfield, no cantinho inferior direito, dentro da opção “show objects library”. Arraste o componente até o ViewController, mais ou menos no centro da tela.

 

Passo 4: clique no TextField e da mesma forma que fizemos para o botão, adicione constraints na esquerda, direita e dessa vez usaremos altura (height). Clique em “Add 3 constraints”

 

Passo 5: para centralizar um componente, precisamos indicar qual outro componente será sua referência. Neste caso centralizaremos o textfield à content view. No menu à esquerda, selecione o textfield e segurando a tecla⌃ (control) arraste até o componente “View”, abaixo de “Bottom Layout Guide”. No popup, selecione a opção “center vertically in container”.

Passo 6: para criar a linha abaixo do UITextField, usaremos uma UIView. Pesquise por “view”, no cantinho inferior direito, dentro da opção “show objects library”. Arraste o componente até o ViewController, mais ou menos abaixo do textfield.

Passo 7: No menu à esquerda, selecione a view que você acabou de adicionar e segurando a tecla⌃ (control) arraste até o componente UITextField, aquele que adicionamos no passo 3. No popup, segure a tecla shift e selecione as opções “Vertical Spacing”, “Leading” e “Trailing”, isso adicionará uma constraint do topo da view para o bottom do text field e alinhará os dois componentes tanto na esquerda quanto na direita.

Passo 8: selecione a UIView, no canto inferior direito clique no segundo botão da direita para a esquerda “Add New Constraints” e selecione a opção altura (height) com valor 1. Clique em “Add 1 constraints”.

 

Se aparecerem linhas amarelas, selecione a setinha circular que já usamos lá no começo. Para adicionar o textfield onde o usuário digitará a senha é só repetir os passos de 3 a 8. O resultado final será o da foto no topo deste post, com a diferença das cores.

Constraints são chatinhas de aprender no começo, mas uma vez que você pega jeito essa ferramenta se tornará uma mão na roda. Dá até um estranhamento usar xml depois de usar Auto Layout com Interface Builder kkk. E não pare por aqui, pegue um aplicativo como referência e tente reproduzi-lo, não precisa ser nenhum bicho de sete cabeças, baby steps :]

Se você tem alguma dúvida/sugestão, deixe um comentário e continue seguindo o blog, não posto em dia certo ainda, mas toda semana estou tentando publicar alguma dica ou tutorial.

Cheers!

 

 

 

You Might Also Like

No Comments

Leave a Reply