Guia de Sobrevivência iOS: Storyboard e suas constraints

O Storyboard pode ser uma ferramenta muito útil quando começamos a construir nosso aplicativo pois permite adicionar e visualizar componentes em tela de uma maneira simples e fácil, ajudando a salvar muito tempo quando construímos uma interface. Ele permite prototipar e fazer o design de multiplas telas dentro do mesmo arquivo e criar as transições entre view controllers. Parece maravilhoso, não?

Mas como nada na vida de um Dev é tão simples, quando pensamos em uma interface, além de nos preocuparmos com a posição dos elementos na tela e onde colocar cada item, temos que pensar no mais importante: como manter esse elemento lá independente do device que o nosso querido usuário use?

Para fazer isso, contamos com a ajuda de constraints para manter as coisas no lugar. Mas o que são essas constraints, para que servem e do que se alimentam?

Constraints são “regras” para as posições dos componentes e os organiza em cada tamanho diferente de tela mantendo as proporções. Essas “regras” podem ser adicionadas 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.

No Storyboard você tem recursos visuais que te ajudam a montar todas as telas e colocar cada uma dessas contrains. Se você já se aventurou por esse caminho e não consegue parar de ver aquelas linhas vermelhas não importa o que você faça, ou se essa é a primeira vez que você ouviu falar de constraints, nada tema jovem Padawan! Estou aqui para te ajudar a não sucumbir para o lado negro da força.

Vamos criar uma interface com cinco botões, três em cima e dois em baixo e fazer com que eles estejam alinhados e fiquem bons em qualquer dispositivo!

Adicionando um item ao Storyboard

A primeira coisa para criar nossa maravilhosa interface é adicionar componentes na tela. Para adiciona-los, use o botão + no canto superior direito, que abrirá a Library com todos os componentes que podem ser adicionados. A Library tem essa cara:

Você consegue pesquisar qualquer elemento que precisar e ainda ver uma descrição de cada elemento. Para adicionar qualquer um deles na view controller basta clicar no elemento da lista, segurar e soltar dentro da view controller. Isso mesmo, pequeno gafanhoto, você pode construir toda a interface do seu app com um simples “drag and drop”.

Adicione cinco botões na sua view controller como a imagem abaixo. Quando você clicar em um deles, você verá que do lado direito tem um menu com um mundo de possibilidades de configurações que podem ser feitas.

Eu vou colocar um background color diferente em cada e aumentar o tamanho deles para fácil visualização, mas personalize-os como você quiser. Vá ao infinito… e além!

Constraints para objetos iguais

Com a view controller com todos elementos necessários e do jeito que queremos que fique no final, podemos colocar as constraints!

Quando lidamos com objetos que queremos que fiquem com proporções iguais como no caso desses botões, precisamos criar constraints iguais para todos eles. Podemos adicionar constraints individualmente em cada um (o que levará tempo, mas funciona), ou podemos criar um “objeto mestre”. Como funciona?

Falamos para os nossos botões seguirem as proporções de um só botão, assim independente de qual device o usuário usar, os botões serão sempre proporcionais entre si. Mas como criamos o nosso mestre?

Se você clicar em um botão e segurar control, uma segue (linha azul) irá aparecer saindo do botão. Essa linha representa a conexão de dois elementos, e o elemento que muda de cor é o objeto que está sendo referenciado. Com isso você consegue ligar todos os botões a um só ou usar a Safe Area como referência. Nesse caso, vou usar o botão azul (superior, centro) como meu mestre Jedi e ligar todos os botões a ele.

Quando soltar o control em cima do botão, verá uma lista de opções de constraints que você pode usar. No nosso caso, queremos que o tamanho interno seja igual, portanto usaremos o equal widths e equal heights.

Dica: se segurar shift, você consegue marcar mais de uma opção ao mesmo tempo.

Constraints vermelhas

Depois de ter ligado todos os botões ao seu mestre Jedi, você verá que todas as constraints ficaram vermelhas. Ó não! Será que fiz algo de errado?

Não se preocupe jovem Padawan, é normal que isso aconteça!

Como só ligamos um objeto no outro e nenhum deles tem uma referência a view controller, é como se eles estivessem passeando pelo espaço sem uma localização ou tamanho exato. Para resolver isso, temos que criar constraints em relação a view controller.

Para isso, podemos usar essa barra de ferramentas no canto inferior se quisermos colocar uma distância fixa entre os elementos. No espaço superior as constraints se referem ao objeto mais próximo do objeto selecionado. Nesse caso, estou colocando constraints no botão rosa (superior, esquerda) em relação a Safe Area, que nada mais é do que a área considerada segura para colocar elementos em tela, e ao botão azul (superior, meio) pois quero que eles sempre mantenham uma distância entre si.

Logo abaixo você consegue configurar um tamanho padrão interno. O que significa que não importa o device, o objeto sempre terá o mesmo tamanho. Se o objetivo é se adaptar ao tamanho da tela, não faça constraints internas, mas ao invés disso utilize o Aspect Ratio. Esse carinha permite que o tamanho interno mude de acordo com o device. Bem legal, não?

Mas não se apresse e vá colocando isso em todos os botões. Lembra do nosso mestre Jedi? Se utilizarmos apenas nele, como os outros botões vão seguir as proporções dele, os outros irão se ajustar sozinhos! Esse é o poder da Força!

Agora que colocamos constraints em um dos botões, algumas constraints azuis apareceram, mas ele não ficou do jeito que eu queria. E agora?

Tenha calma pequeno gafanhoto. Os botões irão se ajustar automaticamente as constraints, então você precisará ajustar mais de um elemento para todos se comportarem do jeito que você quer.

Vamos ajustar o segundo botão, nosso mestre Jedi e querido botão azul e ver o que acontece. Quero que esse elemento, independente da tela, fique sempre no meio. Para isso, usamos o control e ligamos ele a view controller. Você verá que uma das opções é centraliza-lo horizontalmente na Safe Area.

E simples assim, temos nosso botão centralizado e os elementos se movimentando em tela por causa dele. Como já fizemos uma constraint em relação a distância do botão rosa ao azul, não é necessário fazer uma inversa (do azul para o rosa). As constraints valem para os dois botões.

Por outro lado, nós alinhamos o botão azul ao meio, mas não dissemos onde, exatamente, ele tem que ficar. Por isso, é importante colocar uma constraint top alinhada a Safe Area.

Dica: Você pode ver todas as constraints do botão e altera-las no menu direito, icone da régua.

Vamos configurar o botão amarelo (superior, direito) usando os mesmos valores de constraints utilizados de Top, Leading (distância do lado esquerdo) e Trailing (distância do lado direito) do botão rosa (superior, esquerdo), para manter a simetria.

Obs: Só não se esqueça de inverter os valores de leading e trailing, já que a posição da safe area e botão azul são invertidos.

Ufa! A parte de cima já foi. Mas como posso ter certeza que não esqueci nada e tudo está funcionando como deveria?

Quando clicamos no nosso metre Jedi podemos ver que o os botões superiores estão com as constraints azuis, o que significa que a view controller já sabe onde posicionar cada um desses elementos. Os botões da parte de baixo estão com as constraints vermelhas, o que significa que ainda estão perdidos no espaço.

Se eu configurei o botão azul, porque ele ainda tem constraints vermelhas? Fiz algo de errado?

Nosso mestre Jedi se preocupa com os discípulos e só terá todas as constraints azuis quando todos os elementos ligados a ele estiverem certos, então é normal se mesmo depois de configurado ele continuar assim.

Stack View e um mundo de possibilidades

Agora temos esses dois lindos botões para serem configurados. Um problema que podemos encontrar é manter esses objetos alinhados tanto entre si quando com os de cima. Pode se tornar uma grande dor de cabeça se você tiver vários elementos em tela, mas há algo que pode facilitar a sua vida, e esse algo se acha Stack View. A Stack View cria e gerencia as constraints necessárias para criar uma “pilha” horizontal ou vertical. Vamos ver como funciona.

Adicione uma Horizontal Stack View a sua View Controller. Ela terá essa cara. Não parece nada demais, não é mesmo?

Coloque os botões da fileira de baixo dentro da Stack View para começarmos. Eles ficarão desse jeito, mas não se desespere pequeno gafanhoto! Vai dar tudo certo no final.

Ajuste a stack view para ficar no local em que os botões estavam e ajuste a distancia entre os elementos, aumentando o tamanho da stack view.

Vamos criar as constraints da stack view primeiro. Queremos que ela fique no meio da tela e tenha uma distancia fixa do botão azul de cima. Ligamos, com o control, a stack com a view controller e alinhamos ao meio como fizemos com o botão azul.

Depois, iremos criar uma constraint com o botão azul de cima, mas como temos vários elementos acima, fica dificil saber se estamos ligando ao elemento certo, por isso se clicarmos na seta ao lado do número podemos ver todos os elementos que conseguimos usar como referência para a contraint.

A constraint pode ser criada com referencia ao elemento errado, como consertar?

Se clicamos na constraint (linha azul na view), o menu direito no item da régua, permite fazer configurações da constraint selecionada. Assim você consegue colocar o elemento você quer como referência e qual relação quer estabelecer com ele. Eu tinha feito uma constraint para o botão rosa, mas troquei para o botão mestre Jedi só para manter um padrão.

O próximo passo é refazer as constraints feitas nos botões inferiores pois terão desaparecido, então precisamos ligar os botões novamente ao mestre Jedi e colocar o equal height e equal width.

Depois de configura-los, os botões continuarão pequenos. Isso acontece porque ele usará uma referência de tamanho para que o botão roxo (inferior, esquerdo) só cresça proporcionalmente ao tamanho do botão azul. Ou seja, ele nunca será do mesmo tamanho.

Para consertarmos isso, vamos clicar nas constraints dos botões inferiores e iremos mudar algo chamado Multiplier.

O multiplier se refere a porcentagem do tamanho do elemento, então se mudarmos para 1, os botões terão o mesmo tamanho.

E assim configuramos todos os botões e nosso pequeno projeto finalmente está pronto. Teste em quantos devices quiser e você veja que o tamanho dos botões vão se adequar as diferentes telas, é bem legal!

E assim, jovem Padawan, encerramos nosso treinamento de constraints por hora. Foram muitos conceitos, mas espero que tenha gostado!

O caminho para se tornar um mestre Jedi em iOS não é fácil, mas torço para que esse conhecimento te deixe um passo mais perto de desenvolver uma interface maravilhosa para o seu app e contribua para sua jornada.

“Thanks for the adventure. Now go have a new one.” — Up

Até a próxima!