Construindo uma UIScrollView programaticamente

Sofia Ribeiro
Apple Developer Academy | UFPE
4 min readSep 30, 2022

(e celebrando as pequenas grandes vitórias)

Recentemente participei de um projeto na Apple Developer Academy UFPE que foi o pioneiro em muitas questões: primeira vez trabalhando em grupo, primeira vez aprendendo e utilizando ViewCode e primeira vez que um challenge durou mais do que o comum até então. Foram 9 semanas pensando constantemente em inovação, design e programação e elas resultaram em um app muito massa chamado "Ecopiticos", que ajuda pessoas a se engajarem com a vida ambiental do Recife (o projeto completo poder ser encontrado no GitHub).

Desde o começo desse challenge, a ansiosa em mim só pensava em uma coisa: ser a única não-programadora em uma equipe com 3 codeiros. Minha mente pensava sobre as semanas de programação e entrava em parafuso ao cogitar tentar fazer coisas sozinha e fracassar o projeto inteiro 💀.

Um pequeno adendo sobre o mundo dos ansiosos: a gente pensa 2 meses no futuro e nunca existem bons cenários.

6 semanas se passaram e enfim chegou o famigerado bloquinho da programação 🎭. Fiquei responsável por algumas telinhas e era a hora de botar a mão na massa. Foi aí que eu me deparei com ela que seria a minha inimiga por vários dias: a scrollView 🤡.

Para aqueles que acham que UIScrollView é algo automático e que "é claro que a tela vai scrollar se eu colocar coisas que ultrapassam o tamanho dela", eu tenho uma péssima notícia pra vocês: não é e não vai. O processo para a criação da bonita tem algumas etapas que comem o seu juízo e eu vou falar um pouco sobre cada uma delas.

1. ScrollView não é solitária, ela precisa da sua melhor amiga: a contentView

A scrollView não se contenta (rsrs content, humor e piadas) em brincar com os nossos corações sozinha, ela chama a amiga pra ajudar. A primeira coisa que você tem que fazer na sua classe é declarar sua scrollView E uma contentView, a qual vai ser muito importante nos próximos passos.

Print do começo do projetinho, momento das declarações own 😍

2. HIERARQUIA!!

Não é só na família real que a dita cuja está presente, a posição em que você coloca as coisas na hierarquia do seu projeto influencia muito no andar da carruagem. Por exemplo:

Na logica de construção que segui no meu projeto, a minha scrollView está dentro da minha view e a contentView dentro da scrollView. A partir daí, tudo, literalmente tudo, que eu quiser colocar na tela vai ter que ser adicionado à contentView.

3. As belas e complicadas: constraints

Chuva de constraints passando pela sua telaa

Se tem uma coisa que eu definitivamente aprendi com esse projeto, foi que constraints são irritantemente importantes (aff). Se você acha que algo está errado no seu código e não sabe o que é, eu apostaria um 7Belo que é problema de constraints 🤝.

Como dá pra ver na imagem acima, até a scrollView e a contentView precisam de constraints, essa encaixada na scroll e aquela na view. A ordem de declaração dessas paradas importa, então sempre lembre de colocar tudo em ordem bonitinho do começo ao fim da tela.

Constraints dos primeiros elementos

Tudo que tiver na sua tela vai precisar de constraints, não tem jeito, o segredo é sempre declarar de uma forma que o fim da coisa antecedente coincide com o começo da próxima. Tipo nesse exemplo aí de cima: o topAnchor da famosinhosLabel tem que se relacionar com o bottomAnchor da label que vem antes, a firstLabel.

Isso vai acontecer para tudo, é o jeito que o xcode tem de entender que as coisas seguem uma ordem de construção vertical e é nossa obrigação ajudar o bichinho, que é meio lesinho às vezes e precisa que tudo esteja muito bem detalhado 😬.

Por fim, um último detalhe: o elemento final da sua tela tem que se relacionar com o bottomAnchor da contentView e a altura, caso necessária, tem que vir por último (eu não faço a menor ideia do quanto isso é verdade ou não, mas eu passei horas tentando descobrir o porquê do scroll não funcionar e era justamente porque essas duas linhas estavam trocadas).

Constraints do último elemento da tela

E pronto! Se der tudo certo, e eu espero que dê, você agora tem uma tela cheirosa que scrolla. ✨

Bem, acho que esse texto já ficou longo demais então aqui vai uma tentativa de conclusão:

Às vezes, tudo o que você precisa é de uma pequena vitória. Construir uma UIScrollView (e entender!) programaticamente, por mais bobo que isso seja, me deixou mais feliz do que muita coisa ultimamente. Perceber que eu consigo aprender e desenrolar sozinha coisas de programação (e que levar meu grupo ao fundo do poço era um mero devaneio ansioso), esquentou meu coraçãozinho machucado e me deu um gás pros próximos desafios dessa vida de quem quer virar desenvolvedor.

Quem sabe na próxima postagem eu fale sobre algo ainda mais desafiador pra mim e avance na minha jornada codeira… Só sei que, por ora, estou bem feliz com a minha pequena grande vitória scrollante 🐳.

--

--