Mobits

Auto Layout

O Auto Layout tem uma participação importante nesta solução. Sem ele, teríamos todo o código de gerência da altura do formulário e controle do contentSize do ScrollView.

Conseguimos eliminar todo esse código configurando corretamente o Auto Layout no Interface Builder. Vamos ao exemplo:

Trata-se de um ViewController que contem uma ScrollView e dentro dele diversos componentes do nosso formulário. Na verdade, esses componentes não estão diretamente na ScrollView, mas sim em uma View que, por sua vez, é a única subview da ScrollView. Eu uso essa técnica pois simplifica bastante a configuração do Auto Layout como você verá a seguir. Coloquei a View em amarelo para que você consiga distinguir.

Repare também que meu ViewController está dentro de um NavigationController e um TabBarController. Essa configuração não é necessária para a solução, mas coloquei assim para demonstrar que ela suporta modelos mais complexos (diferentemente de várias soluções que encontrei - inclusive da Apple).

Vamos agora configurar o Auto Layout. O primeiro passo é selecionar a View que contém os componentes do formulário. Clique no botão para adicionar Constraints, veja abaixo.

Configure as Constraints de tamanho (width e height) de acordo com o conteúdo. No exemplo, eu deixei que o tamanho fosse fixo, pois meu formulário não muda de tamanho. Foi essa a facilidade que mencionei mais acima. Com a View englobando todos os componentes não há necessidade de definir Constraints para todos os componentes. OBS: Ainda assim, caso você queira definir Constraints para eles - se o seu formulário variar de tamanho por causa do conteúdo, por exemplo - você ainda pode fazê-lo contanto que no final a View amarela tenha seu tamanho definido em função dessas variações (assumo aqui que você tem o conhecimento de Auto Layout necessário, caso contrário, fique com o meu exemplo).

Agora, vamos configurar as Constraints entre a View e a ScrollView. Com a View ainda selecionada, clique no botão para adicionar Constraints, caso não esteja mais visível.

Marque todas as Constraints de espaçamento com valor zero e, muito importante, clique na setinha ao lado de cada valor e garanta que esteja selecionada a ScrollView e não qualquer outro elemento da tela. É provável que, ao selecionar a ScrollView, o valor seja automaticamente alterado para a distância atual entre a View e a ScrollView. Ignore o valor sugerido e force-o novamente para zero.

Clique em Add 6 constraints e pronto! Rode o projeto e observe que, sem escrever nenhuma linha de código, você já tem o layout do formulário e a capacidade de scroll em seu conteúdo.

Mas ainda temos muito o que fazer. Repare que ao selecionar um campo qualquer, o teclado encobre o formulário e não conseguimos dar scroll para ver o resto do conteúdo.

No próximo post dessa série, eu vou ensinar como tratar a aparição do teclado e adaptar o scroll para que o campo selecionado esteja visível. Fique ligado.