Como fazer uma Scroll View pelo Storybard

Maria Eduarda Senna
Apple Developer Academy | UFPE
3 min readAug 20, 2020

Essa semana eu decidi que iria tentar implementar uma Scroll View. Tive um pouco de dificuldade para encontrar algum conteúdo ou tutorial explicativo e quando achei, eram todos em inglês (link do que eu me baseei mais). Por isso, decidi fazer esse tutorial de como fazer uma Scroll View pelo Storyboard em português, esperando que ele possa ajudar outros programadores que venham a passar por isso futuramente.

Passo 1: Colocar a Scroll View na ViewController e definir constraints.

Primeiro, colocar a Scroll View na ViewController:

Posicionar e definir as constraints:

Passo 2: Colocar uma View dentro da Scroll View e definir constraints.

Adicionar a View dentro da Scroll View:

Selecionar a View e, pressionando control, arrastar até a Content Layout Guide. Quando a seleção de constraints abrir, pressionar shift e selecionar as constraints leading, top, trailing e bottom:

Editar os valores das constraints criadas para 0:

Selecionar a View e, pressionando control, arrastar até a Frame Layout Guide, então selecionar Equal Widths:

O Xcode pode criar o valor da constraint de largura proporcional para você, caso isso aconteça, editar o valor multiplicador da constraint para 1 para que as larguras fiquem iguais:

Definir um valor explícito para a constraint de altura da View (nesse caso, 1000):

Agora é possível dar scroll na Scrow View no Storyboard:

Se você deseja ver toda a área de conteúdo rolável, pode alongar a altura da View Controller configurando-a para "freeform"com altura maior da seguinte forma:

  1. Selecione a View Controller
  2. Selecione “Size Inspector”
  3. Para “Simulated Size”, selecione “Freeform”
  4. Defina “1100” como sua altura

Passo 3: Posicionar UI Elements dentro da View.

Você pode começar a colocar elementos dentro da View, como labels, botões, imagens, etc. Em seguida, adicione constraints. Lembre-se de que as constraints devem estar entre cada elemento da UI e a View, não a Scroll View:

Remover o valor explícito definido para a constraint de altura da View:

E está pronto! Agora é só rodar :)

--

--