Articles

UIScrollView autolayout em um storyboard. Um guia passo-a-passo.

  1. Comecemos por adicionar um UIScrollView à vista principal (que pode ser a vista inteira ou alguma outra vista pequena, que você tenha). De qualquer forma, a partir de agora vou me referir a isso como a ‘vista principal’) e adicionar restrições superior, inferior, esquerda e direita.
  2. >

>

Correntes superiores, inferiores, esquerdas e direitas (em relação à vista principal)

2. Depois disso, adicionamos uma vista UIV dentro do UIScrollView (esta vista é um passo essencial para ter o autolayout funcionando corretamente). Eu a chamei de ‘Content View’ e adicionei restrições superior, inferior, esquerda e direita em relação à vista de rolagem. Além disso, também adicionei alturas e larguras iguais em relação à vista principal.

Top, Bottom, Restrições Esquerda e Direita (em relação à vista de rolagem)

Largura e Altura iguais (em relação à vista principal)

3. O próximo passo depende se você quer ter um deslocamento vertical ou horizontal. Se você precisar de um deslocamento vertical, você precisará definir a prioridade ‘Equal Heights Constraint’ (Restrição de Altura Igual) para 250. Por outro lado, se um pergaminho horizontal é o que você procura, você terá que definir a prioridade ‘Restrição de Largura Igual’ para 250,

Permite um pergaminho vertical.

Permite um scroll horizontal.

4. A vista do scroll está agora toda configurada e pronta para ir! Agora você pode começar a adicionar seu conteúdo, mas você precisa ter em mente que a altura da ‘Vista de Conteúdo’ não pode ser ambígua. Isto significa que cada vista que você teve que ter uma restrição de altura definida (altura igual a X ou menor ou igual a X) e que todos os componentes (ou pelo menos você deve ter uma linha contínua de componentes de cima para baixo) devem ter um espaçamento vertical definido entre eles.

Outras vezes, os componentes mais altos e mais baixos devem ter um espaçamento superior e um espaçamento inferior, respectivamente, para a ‘Vista de Conteúdo’.

5a) Vertical ScrollView – Exemplo de configuração dos componentes