iOS do princípio com Swift: Básico de Auto Layout

No artigo anterior, criamos um aplicativo simples com nada mais que uma label e um botão. Apesar da simplicidade, o aplicativo tinha vários problemas de layout. Neste tutorial, você vai aprender como resolver estes problemas usando o sistema de layout da Apple, o Auto Layout. Vamos iniciar com um novo projeto.

Introdução

Abra o Xcode e crie um novo projeto, escolhendo o template Single View Application. Chame seu aplicativo de Auto Layout e ajuste o Devices como Universal. Diga ao Xcode onde salvar o projeto e clique em Create.

Lembra-se de mais cedo nesta série, um aplicativo universal roda no iPad e no Iphone (e no iPod Touch). Isso significa que a interface do usuário precisa se adaptar ao dispositivo que ele for rodar. Vamos explorar como isso trabalha e quais problemas precisamos resolver para realizar isso.

No projeto, abra o arquivo Main.storyboard e adicione cinco labels na view da view controller. Como você pode ver no screenshot abaixo, eu posicionei uma label no centro da view e uma em cada canto.

Você provavelmente notou que o Xcode tenta ajudar você a posicionar as labels, exibindo linhas azuis quando você se aproxima dos cantos ou do centro da view. Fique com o conselho do Xcode e deixe as labels encaixados nos cantos e no centro da view.

Como estamos criando um aplicativo universal, o aplicativo deve ficar bem no iPad e iPhone. Rode o aplicativo no simulador e escolha iPad Retina (ou qualquer outro simulador do iPad) como o destino.

Eita. A interface não está boa no iPad. Apenas a label da parte superior esquerda ficou posicionada corretamente.

Altere o destino para iPhone 6 (ou qualquer outro simulador iPhone) e rode o aplicativo mais uma vez.

A interface ficou ainda pior no iPhone. Apenas duas labels estão visíveis no iPhone. Como no iPad, apenas a label superior esquerda está posicionada corretamente.

A meta deste tutorial é corrigir os problemas dessa interface com o Auto Layout. Antes de podemos usar o Auto Layout, precisamos saber o que é e como isso pode nos ajudar. 

O que é Auto Layout?

O Auto Layout foi introduzido no iOS com o lançamento do iOS 5, muitos anos atrás. O Auto Layout é um sistema de layout que é descritivo e construido sobre restrições. Isso simplesmente significa que você diz ao mecanismo de layout como você deseja que a interface seja mostrada. Em outra palavras, ao invés de dizer ao mecanismo de layout que um botão precisa ser posicionado em um local especifico, você descreve onde ele deveria estar posicionado.

Restrições são usadas para definir ou descrever um layout. Por exemplo, você diz ao mecanismo de layout que um botão precisa estar centralizado horizontalmente em sua view. O mecanismo de layout recebe um conjunto de restrições, transforma elas em equações e ajusta os frames dos elementos na interface. Para fazer esse trabalho, você deve adicionar muitas restrições para evitar qualquer ambiguidade sobre a posição de um elemento.

A vantagem do Auto Layout é simples. Graças à natureza descritiva de Auto Layout, o mecanismo de layout atualiza a interface independentemente das dimensões ou orientação do dispositivo que seu aplicativo é executado. Também faz seu aplicativo à prova de futuras atualizações. Quando a Apple introduz um novo dispositivo com uma tamanho de tela nova, seu aplicativo automaticamente ajusta a interface para caber na nova tela. Isso não acontece se você forçar via código a interface do seu aplicativo.

Agora que você sabe o que é o Auto Layout e como ele trabalho, é hora de explorar como podemos usar o Auto Layout para corrigir os erros em nosso projeto.

Adicionando Restrições

Você se lembra das linhas azuis que vimos quando adicionamos as labels à view da view controller? Essas não são as restrições que você esta procurando. Como eu falei, elas são orientações para ajuda-lo a posicionar os elementos da interface. Eles não são nada mais que dicas que o Xcode nos da de acordo com o Humam Interface Guidelines da Apple.

Há várias forma de adicionar restrições aos elementos da interface. Uma forma é usando o menu Pin na parte inferior do Interface Builder. Selecione a label superior esquerda e clique no menu Pin na parte inferior.

A label superior esquerda não tem nenhuma restrição ainda. Vamos alterar isso fixando a label na parte superior esquerda da sua view pai ou superview. Usando o menu Pin, podemos adicionar múltiplas restrições ao mesmo tempo. Também vamos adicionar restrições para ajustar a altura e a largura para fixa-lo, selecionando as caixas de seleção chamados Width e Height. Assim é como o menu Pin deve ficar. Note que a caixa de seleção Constrain to margins está desmarcada.

Na parte de baixo do menu Pin, o texto do botão agora está como Add 4 Constraints. O Xcode está nos dizendo que não adicionamos ainda as restrições. Clique no botão para adicionar as restrições que especificamos no menu Pin. A posição do Label foi definida ou descrita com quatro restrições. Isso é visível no storyboard por quatro linhas azuis em torno da label.

Antes de continuar, adicione restrições nas labels superior direita, inferior esquerda e inferior direita. É importante que você fixe cada label com à borda mais próxima da sua view pai. Por exemplo, a view inferior direita precisa ser fixada a borda inferior e a borda da direita da sua view da view controller. Assim é como o menu Pin deve ficar para a label inferior direita.

Com as restrições colocadas, rode o aplicativo no simulador. Assim é como você deve ver no simulador do iPhone 6.  Está ficando muito melhor. A label central não tem restrições ainda. Vamos adicionar algumas agora.

Selecione a label central e adiciona duas restrições para fixar a altura e a largura da label, usando o menu Pin na parte inferior. Esperava ver duas linhas azuis? Se você adicionou corretamente as restrições, você deve ver linhas de vermelhas e não azuis. Por que isso? As linhas vermelhas indicam que algo está errado. O Xcode nos diz que a label não tem restrições suficiente para evitar ambiguidades. A descrição da posição da label está incompleta no momento.

Informamos ao Xcode que a label deve ter altura e largura fixas. O que não definimos ainda é a posição horizontal e vertical da label. Você pode achar mais sobre o problema inspecionando o erro no painel à esquerda. Você deve ver uma seta vermelha a direita da View Controller Scene. Clique na seta para ler a mensagem de erro.

Os erros estão nos dizendo que as posições X e Y não foram definidas. Se você clicar no circulo vermelho perto do erro, o Xcode te da opção de corrigir o erro adicionando as restrições que faltam. Não vamos ser preguiçosos e vamos corrigir o problema nós mesmos.

Para centralizar a label, independente da dimensão e orientação do dispositivo que o aplicativo estiver rodando, não vamos usar o menu Pin. Usaremos o menu Align a esquerda do menu Pin. Com a label selecionada, abra o menu Align e adicione duas restrições para centralizar a label na sua view pai. Adicionando estas restrições, as linhas vermelhas serão substituidas por linhas azuis.

Inspecionando restrições

Está na hora de aprender mais sobre restrições. As restrições não são estáticas e certamente não são mágicas. Você pode adicionar, remover e modificar as restrições. Como exemplo, vamos dar uma olhada nas restrições da label central. Selecione a label e abra a Size Inspector na direita. A seção Constaints lista as restrições da seleção atual, a label central. Cada restrição tem um botão Edit para modificar os atributos da restrição.

Clique no botão Edit da restrição que diz Width Equal: 42. Alterando a propriedade Constant, você pode alterar o tamanho da label. Ajuste a Constant para 100 e pressione Enter ou Return para efetivar a alteração. O tamanho da label no storyboard reflitirá imediatamente a alteração que fizemos.

A propriedade Priority da restrição é importante se houver conflito entre restrições. Vamos ilustrar isso com um exemplo. Selecione a label central e adicione uma nova restrição que ajuste o tamanho da label para 200. Você já sabe como fazer isso. Quando você adiciona a nova restrição, o Xcode reclama que não pode satisfazer ambas as restrições ao mesmo tempo.

Selecione a label e abra a Size Inspector para inspecionar as restrições. Há duas restrições configurando o tamanho da label. Clique no botão Edit da restrição que diz Width Equals: 100 e atribua uma Priority alta (750). A largura da label muda para 200 no storyboard e uma linha azul muda de uma linha solida para uma tracejada, indicando que esta restrição é anulada por uma restrição com maior prioridade. A restrição tracejada ainda esta ativa, mas ela não esta sendo aplicada atualmente devido a sua baixa prioridade comparada a restrição que ajusta a largura da label para 200.

Há outra forma de resolver este problema. Ajuste a prioridade de ambas as restrições para Exigida (1000). Ao mesmo tempo, altere o = para >= para a restrição que diz Width Equals: 100. Isso também resolve o erro. Porém, o resultado não é o mesmo. Ambas as restrições estão em vigor, trabalhando juntas para ajustar a posição da label. A restrição agora define que a largura da label deve ser maior ou igual a 100.

Adicionando mais restrições

Eu já mencionei que há varias formas de adicionar restrições no interface builder. Vamos ver outra técnica popular. Abra a Object Library na direita e adicione um campo de texto á view da view controller. Para fixar o campo de texto ao topo da view, selecione o campo de texto, pressione Control e arraste do campo de texto para o topo da view. Dê uma olhada no print abaixo para esclarecimento.

No menu que aparecerá, selecione Vertical Spacing to Top Layout Guide. O layout top guide é uma guia especial, posicionado ao longo da borda inferior da barra de status e a barra de navegação. A posição da top layout guide depende da presença ou ausência de uma barra de status e a barra de navegação no topo.

O campo de texto irá se fixar no topo da view agora. Como esperado, o Xcode nos informa que o campo de texto não tem restrições suficiente para descrever sua posição.

Selecione o campo de texto, pressione Control e arraste até à label a esquerda do campo de texto. No menu, selecione Horizontal Spacing. Repita este passo para a label a direita do campo de texto. Estamos quase lá.

Para fixar a altura da label, selecione o campo de texto, pressione Control e arraste da parte superior do campo de texto para a parte inferior do campo de texto. Selecione Height no menu que aparecer. Isso define uma restrição sobre o próprio campo de texto, sua altura.

Tenho certeza que você concorda que o básico do Auto Layout é fácil de entender. Porém, as vezes pode ser um pouco complicado. O que discutimos até agora é o básico, o Auto Layout mostrando seu poder. Vamos finalizar este tutorial olhando um problema comum que pode ser resolvido facilmente com o Auto Layout.

Mais restrições

Não é incomum que você deseje que uma subview expanda a largura e a altura de acordo com sua view pai. Uma table view, por exemplo, é geralmente em o mesmo tamanho da sua view pai. Vamos ver como podemos controlar isso usando o Auto Layout.

Adicione uma view do Object Library para a view da view controller. Abra a Attibutes Inspector e mude o fundo da view para azul, para que se destaque. Rode o aplicativo em um simulador iPad para ver como estamos começando.

Você pode pressionar Command + Seta para esquerda ou Command + Seta para direita para rodar o dispositivo. Parece que a view mantém sua largura e altura, mas está presa ao canto superior esquerdo. O objetivo é expandir a largura e a altura da view de acordo com sua view pai. Selecione a view azul e adicione as seguintes restrições usando o menu Pin.

Antes de você clicar no Add 4 Constraints, certifique que você adicionou as restrições em relação a super view da view azul. O que isso significa? Uma restrição descreve uma relação entre duas views. Você está prestes a aplicar estas restrições à view azul em relação a seus irmãos mais proximos. O que nós queremos, entretanto, é adicionar restrições que definam a posição da view azul em relação a sua view pai ou a view que a mantém. Você especifica qual view a restrição está sendo definida clicando no triangulo ao lado do número (que define a constante da restrição). Dê uma olhada no print abaixo para esclarecimento.

Verifique que todas as restrições se aplicam à view azul e sua view pai. Quando você estiver pronto, adicione as quatro restrições.

Em vez de linhas azuis, você provavelmente esta vendo linhas laranjas com números. No Xcode, laranja significa atenção. As linhas laranjas avisam você que a posição atual da view azul não está alinhada com a posição que a view azul irá assumir em tempo de execução. Você notou as linhas laranja tracejadas nas bordas da view pai da view azul? Estas linhas tracejadas simbolizam a estrutura da view azul se as restrições que você aplicou estiverem em rigor. Isso acontece em tempo de execução.

Se você não acredita em mim, eu sugiro que você rode o aplicativo em um simulador iPad para ver você mesmo. A view azul se expande a mesma altura e largura da sua view pai, até se você rodar o simulador de portrait para landscape e vice e versa.

As linhas laranja desnecessariamente circula a área de trabalho e o que está vendo não é o que você está recebendo em tempo de execução. É melhor corrigir o problema, atualizando a estrutura da view azul. Isso é simples. Selecione a view azul e selecione Update Frames no menu Resolve Auto Layout Issues na parte inferior direita.

Certifique-se de que você entende o que abordamos neste tutorial, porque vamos precisar disto no restante desta série. No próximo tutorial, iremos falar sobre table views e iremos aplicar algumas técnicas discutidas neste tutorial. Para aprender mais sobre Auto Layout, veja o Auto Layout Guide da Apple.

Conclusão

Dizer que o Auto Layout é poderoso é um eufemismo. Mesmo que nós apenas olhamos sua superfície neste tutorial, agora você deve ter uma idéia do o que é o Auto Layout e o que ele pode fazer para você.

No restante desta série, iremos continuar usando o Auto Layout. Se você se sentir preso, reviste este tutorial ou deixe me uma linha nos comentários. Você pode me procurar no Twitter.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!