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

Primeiros Passos com Auto Layout no Xcode 5

by
Difficulty:BeginnerLength:MediumLanguages:

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

Introdução

Criar aplicativos com layout flexível se tornou essencial, especialmente desde o lançamento do Iphone 5 com 4" de tela e a introdução da Dynamic Type no iOS7, permitindo aos usuários a alteração do tamanho do texto através do sistema operacional. Layouts flexíveis também são úteis com internacionalização.

1. O que é?

Auto Layout, que foi introduzido no iOS6, habilita que você crie layouts flexíveis. Isto é uma ótima alternativa para redimensionamento ou inserir manualmente a interface do usuário do aplicativo.

O Auto Layout habilita que você adicione restrições na view e defina relacionamento entre as views. O relacionamento pode ser entre uma view e sua superview, um de seus irmãos, ou em relação a si mesma.

Ao invés de especificar explicitamente um quadro da view, o Auto Layout permite que você defina o espaçamento e o posicionamento relativo de duas views usando restrições. O Auto Layout usa essas restrições para calcular em tempo de execução a posição dos elementos da interface do usuário.

Você tem que definir diversas restrições na view para evitar ambigüidade no layout. Também é possível definir muitas restrições, que podem causar conflitos e fazer o aplicativo dar crash.

No Xcode 4, tanto faz você definir uma restrição incompleta ou invalida na view, o Interface Builder substituirá com uma nova restrição que em sua maioria não lhe dará o efeito desejado. Isto rendeu frustração significantes aos desenvolvedores. No Xcode 5, no entanto, é muito mais fácil usar Auto Layout. O Xcode já não obriga a ter restrições em uma view, em vez disso você obtém sugestões e advertências quando as restrições de uma view são inválidas.

Apesar de ser possível trabalhar com Auto Layout por meio de programação, este tutorial será focado em como usar o Interface Builder para criar layouts usando o Auto Layout.

2. Básico de Auto Layout

Para uma simples demonstração do que o Auto Layout pode fazer por você, criaremos um simples aplicativo e definiremos algumas restrições na sua view. Crie um novo projeto no Xcode, escolha o template Single View Application e defina Devices para iPhone.

Os Storyboards e arquivos XIB criados com Xcode 4.5 ou posterior tem o Auto Layout ativos por padrão. Você pode desativar-lo no File Inspector a direita deselecionando o checkbox rotulado Use Auto Layout.

Uma boa razão para desabilitar o Auto Layout é suportar o iOS5 ou anterior. O Auto Layout é suportado apenas pelo iOS 6 ou posterior. Mas ao contrário disso, a Apple recomenda o uso do Auto Layout uma vez que torna a criação da interface de usuário flexível, rápida e fácil.

Abra o storyboard principal do projeto, Main.storyboard, adicione um text view na View Controller Scene e o posicione como mostrado abaixo.

Não há restrições definidas no text view e isso gerá algumas implicações. Quando você executar o aplicativo, o text view será posicionado exatamente como no Interface Builder. Entretanto, quando o aparelho for rodado para o modo landscape, o text view continua a manter a borda esquerda da view e sua largura será fixa.

Em tempo de execução, as restrições são geradas automaticamente para as views que não tem restrições, o que explica o comportamento que estamos vendo. As restrições adicionadas ao text view, por exemplo, é uma restrição no topo esquerdo que fixa o text view no canto superior esquerdo e uma restrição de largura e altura que fixa o tamanho da text view.

Uma vez que você começou a definir restrições, entretanto, cabe a você certificar-se de que as restrições para a view não causam conflitos. Na próxima seção, vamos adicionar algumas restrições no text view para ajustar sua posição e seu tamanho quando o aparelho for rodado ou quando executarmos o aplicativo em, por exemplo, um iPhone 5 que tem uma tela maior.

3. Adicionando Restrições

Existem várias maneiras de adicionar restrições de layout a uma view.

Control e Arrastar

Segure a tecla Control e arraste da view que você quer adicionar a restrição de layout para a outra view. Quando você soltar o mouse, um menu com opções deve aparecer. As opções  dependem da direção e da view que você arrastou.

Para ilustrar isto, arraste do text view para o topo da view de sua view controller. O Xcode destacará ambas as views para indicar que a restrição de layout inclui ambas as views. Quando você soltar o mouse, o menu mostrará as restrições de layout que podem ser adicionadas entre a view fonte e o text view. Para centralizar o text view horizontalmente na view da view controller, selecione Center Horizontally In Container no menu. Uma linha laranja ira aparecer como resultado, identificando a restrição de layout que você acabou de adicionar.

Menu Auto Layout

Você também pode adicionar e editar restrições de layout usando o menu Auto Layout na parte de baixo da área de trabalho do Interface Builder.

Começando pela esquerda, o menu permite você alinhar e fixar views, resolver erros do Auto Layout, e redimensionar o comportamento da view selecionada. Deixe me explicar cada uma das opções:

  • Alinhar (Align) cria restrições de alinhamento que permitem centralizar a vista em seu recipiente ou alinhar as bordas de dois modos de exibição.
  • Fixar (Pin) cria restrições de espaçamento. Você pode definir tamanho e altura da view selecionada ou especificar a distância da view para outra view.
  • O menu Resolvendo Erros do Auto Layout (Resolving Auto Layout Issues) adiciona a habilidade para resolver erros do Auto Layout, por exemplo atualizando a estrutura da view ou adicionando restrições ausentes.
  • O menu de Redimensionamento (Resizing) permite a você especificar o comportamento de redimensionamento da view selecionada e como seus irmãos e descendentes são afetados.

Menu Editor

Cada uma das opções do menu acima mencionadas também pode ser encontrada no menu Editor do Xcode.

Adicionando Restrições

Para adicionar restrições de layout para o text view, selecione a view no Xcode, segure a tecla Control e arraste do text view para o topo da view da view controller. Selecione Center Horizontally In Container no menu que aparecer. Isto adiciona uma restrição de layout que garante que o text view estará sempre centralizada na view da view controller, independente da orientação do aparelho.

Você deve ter notado que o text view tem um contorno laranja. O Xcode nos diz que a restrição de layout do text view está invalida ou incompleta. Temos especificado que o text view deve ser centralizada horizontalmente na sua view pai, mas o sistema do Auto layout não sabe qual tamanho o text view deve ter. Vamos adicionar mais algumas restrições até o contorno do text view se torne azul para indicar que a restrição de layout do text view é valido.

Note que é possível ignorar a advertência e executar um aplicativo com a restrição de layout incompleta. Entretanto, você nunca deve enviar um aplicativo com restrições de layout ambíguas, porque você não sabe ao certo como parecerá na interface do usuário do aplicativo em diferentes dispositivos em diferentes orientações.

Com o text view selecionado, segure o Control e arraste do text view para o top da view da view controller e selecione Top Space to Top Layout Guide. Isto define um espaço vertical de restrição do topo do layout da view controller para o topo da text view.

Em seguida, segure o Control e arraste do text view para a view da view controller e selecione Leading Space to Container para definir a distância da view pai para a esquerda do text view. Segure o Controle e arraste do text view para a view da view controller e selecione Bottom Space to Bottom Layout Guide para definir uma restrição de espaço vertical da parte de baixo da view controller para a parte de baixo do text view.

A borda do text view deve ficar azul, indicando que as restrições de layout do text view são validas e estão completas. Rode o aplicativo no Simulador iOS e mude a orientação para verificar o resultado.

Note que não precisamos adicionar uma restrição de espaço horizontal para especificar a distância da borda direita do text view e sua superview, por que especificamos o espaço principal do text view e centralizamos o text view horizontalmente na sua superview. O sistema do Auto Layout tem informação suficiente para exibir corretamente o text view. Podemos conseguir o mesmo resultado especificando quatro restrições de espaço e omitir as restrições de alinhamento.

Este exemplo mostrou como definir uma restrição de layout entre uma view e sua view pai. Vamos olhar outro exemplo em que definimos restrições de layout entre elementos irmãos.

Comece deletando o text view. Isso também irá deletar as restrições de layout do text view. Adicione um text field, um slider, e um segmented control na view da view controller como mostrado abaixo.

Quando você roda o aplicativo sem definir algumas restrições, os três elementos irão ficar na borda esquerda de sua view pai em landscape.

Entretanto, queremos que os elementos preencham toda a largura da tela como mostrado abaixo. O text field deve expandir na horizontal e o slider também deve expandir para tirar proveito da largura da tela. O segmented control, entretanto, deve ter sua largura mantida.

Selecione o text field e clique no botão Pin do menu de Auto Layout na parte inferior. Na seção Spacing to nearest neighbor no topo do menu, clique nas linhas acima, direita e esquerda que cerca o quadrado. As linhas devem ficar vermelhas como resultado. Em seguida, clique no botão na parte de baixo chamado Add 3 Constraints para adicionar as restrições de espaço especificadas.

Selecione o slider e repita os mesmos passos definindo uma restrição de espaço acima, a esquerda e a direita. Isto garante a distância entre o slider e o text field, e o slider e o segmented control seja fixa.

Repita os mesmos passo para o segmented control, mas apenas adicione uma restrição de espaço acima e a direita. Como adicional, selecione o Width no checkbox e clique no botão Add 3 Constraints na parte de baixo. Não queremos que o segmented control se expanda quando o tamanho da tela mudar, por isso fixamos a largura.

4. Corrigindo Erros de Auto Layout

Corrigindo Erros

Quando o Xcode nos traz erros ou advertências sobre a falta ou restrições de layout invalidas, ele nem sempre é claro em quais restrições precisam ser adicionadas ou atualizadas. O Xcode nos ajuda mostrando quais restrições estão faltando no Document Outline.

Quando um layout é invalido ou incompleto, uma flecha vermelha é visível no Document Outline. Quando você clica na flecha, uma janela desliza na direita mostrando quais restrições estão faltando ou invalidas. Isso lhe dá uma pista de como consertar o layout.

Na direita de cada erro ou advertência tem um circulo vermelho (erro) ou um triângulo amarelo (advertência). Quando você clica no erro ou na advertência, um menu aparece com sugestões de como corrigir o problema.

Você também pode usar o menu Resolve Auto Layout Issues para adicionar restrições faltantes, resetar as restrições de uma view ou para limpar restrições. O Xcode irá adicionar automaticamente restrições para a view selecionada para você. Isto pode fazer você ganhar tempo, mas note que também pode resultar em um layout que você não deseja.

View Deslocada

Se você adicionou algumas restrições de layout em uma view e alterou o seu tamanho ou posição, o Xcode destacará a view em laranja para indicar que a posição e/ou tamanho atual não é correspondendo com suas restrições de layout.

Se você executar o aplicativo, você verá que o sistema de Auto Layout força as restrições de layout da view e ignora o novo tamanho ou posição da view que você definiu. Isto é chamado de view deslocada (misplaced view). O screenshot a seguir demonstra um botão que eu movi depois de ter especificado suas restrições de layout.

Para corrigir isto, você pode deletar a restrição do layout e definir algumas novas, ou você pode deixar o Xcode corrigir para você. Você tem duas opções para corrigir o deslocamento da view.

  • Você pode mover e redimensionar a view para ficar em ordem com as restrições de layout, selecionando Resolve Auto Layout Issues > Update Frames no menu Editor do Xcode.
  • Ou você pode atualizar suas restrições de layout para ficar em ordem com o novo tamanho e posição da view, selecionando Resolve Auto Layout Issues > Update Constraints no menu Editor do Xcode.

No exemplo acima, escolhemos Update Constraints para atualizar as restrições de layout para o novo tamanho e posição do botão, por que queremos preservar o novo tamanho e posição do botão.

Conclusão

O sistema de Auto Layout torna a definição da interface de usuário muito mais simples e rápida. Antes da introdução do Auto Layout, desenvolvedores tinham que codificar uma interface de usuário de aplicação, definindo quadros de view e redimensionamento. Com o Auto Layout, isto não é mais necessário.

Definindo corretamente algumas restrições de layout de uma view, sua posição é automaticamente atualizada independente do tamanho da tela ou orientação. Outra área onde o Auto Layout é útil é na localização do aplicativo. Palavra e sentenças tem tamanhos diferentes em diferentes línguas. Isso também pode ser resolvido com Auto Layout.

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

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