Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS

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

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called iOS From Scratch With Swift.
iOS From Scratch With Swift: First Steps With UIKit
iOS From Scratch With Swift: Table View Basics

Portuguese (Português) translation by David Batista (you can also view the original English article)

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.

Configuring the Project

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.

Adding Five Labels

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.

Snapping a Label Into the Corner
Snapping a Label Into the Center

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.

Setting the Destination to iPad Retina

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

The labels are not correctly positioned

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

Setting the Destination to iPhone 6

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.

The labels are not correctly positioned

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.

Opening the Pin Menu

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.

Adding Constraints to the Label

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.

Constraints of the 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.

Adding Constraints to the Bottom Right Label

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.

This is looking much better

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.

Missing Constraints

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.

Xcode Error Messages
Xcode Error Messages

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.

Adding Missing Constraints

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.

Inspecting Constraints

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.

Modifying Constraints

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.

Conflicting Constraints

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.

Overruling Constraints

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.

Collaborating Constraints

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.

Another Way to Add Constraints

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.

Adding Vertical Spacing to Top Layout Guide

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.

Adding a Constraint

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á.

Adding More Constraints

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.

Fixing the Height of the Text Field

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.

Adding a Blue Subview

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.

Add Four Constraints to the Blue View

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.

Specifying the Constrained Views

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.

Orange Means Warning

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!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.