Como criar Collection Views sem storyboard: guia para iniciantes em Swift
Por que resolvi escrever um artigo?
Neste universo, são poucas as certezas que realmente podemos ter. Na verdade, há quem diga que só existem duas. A primeira é que um dia vamos todos morrer. E a segunda é que, trabalhando com desenvolvimento de apps, alguma hora teremos que usar uma Collection View.
Pra mim não foi diferente. Aluno da Apple Developer Academy (UFPE), tive que fazer uma collection view logo no meu segundo projeto. Mas havia aí um detalhe importante de se ressaltar: o projeto era um playground, e isso significava que eu não podia usar storyboard. A princípio, nenhum problema — não fosse o fato de que 99,9% dos materiais disponíveis sobre o assunto usavam o maldito storyboard no processo. E eu, que não sabia quase nada sobre código e nunca antes tinha feito isso, fiquei a ver navios.
Foi por essa razão que decidi compartilhar meu aprendizado, listando passo a passo como criar uma Collection View sem storyboard, apenas com código. Se você não é o mestre dos magos da tecnologia, não se preocupe: este artigo foi pensado exatamente para você. Está dividido em passos pequenos, para que você compreenda cada um deles. Sem mais delongas, é hora de irmos ao que importa. Vamos juntos?
Passo a passo
P.S.: no final, todo o código estará disponível em formato de texto para que você possa ver na íntegra!
Passo 0: começaremos abrindo um arquivo novo de playground no Xcode. A razão é simples: através do playground, podemos testar e identificar erros com muito mais facilidade. Abra o Xcode, clique em playground, selecione a opção de arquivo vazio (blank) e configure-o para exibir sua tela da seguinte maneira:
Passo 1: como fizeram os deuses quando criaram os dias e as noites, vamos criar uma variável para armazenar a nossa Collection View. Este é um pequeno passo para você, mas um grande salto para o código. Assim:
Passo 2: a seguir, abriremos a tradicional loadView, e nela criaremos uma variável qualquer para receber as características do nosso layout. O layout é a maneira como a Collection View (CV) organiza e exibe suas informações — em outras palavras, é a cara dela. A princípio, isso parece contraintuitivo (como vamos criar um layout para uma CV que nem existe ainda?), mas já explico. O que acontece é que, por padrão, as Collection Views já precisam ser inicializadas recebendo um layout como parâmetro. É por isso que criaremos ele desde já!
Existe um layout padrão, que é o mais comum e se chama UICollectionViewFlowLayout. Usando ele, nossa CV terá uma cara bem comum (parecida com a galeria de fotos do IPhone), mas funcionará direitinho.
Nossas modificações do código vão da linha 9 à 19. Perceba que ainda fizemos pequenas alterações a partir do layout padrão. Nesse caso, mudamos as margens da CV (sectionInset) e o tamanho de cada item que será exibido (itemSize). Existem outros aspectos similares que podemos modificar, como o espaço mínimo entre os itens (minimumInteritemSpacing), o espaço mínimo entre as linhas (minimumLineSpacing) e similares. Você pode encontrar mais sobre isso nos tópicos da documentação da Apple.
Passo 3: é hora de inicializar nossa Collection View! Passaremos como parâmetros o tamanho dela e seu layout. Assim, nosso código ganhará a linha 19.
(Nesse ponto, talvez você se pergunte: qual a diferença do tamanho da CV para o tamanho do layout? Para entender, pense em uma fazenda com uma casa no meio. Apesar da área da fazenda ser grande, a casa não precisa ocupar todo o seu terreno! Da mesma forma, os itens de CV, que serão exibidos dentro do layout, não precisam ocupar todo o espaço reservado para a CV).
Voltando ao código, uma vez que a Collection View for inicializada e passar a existir, chegará a hora de desenharmos o esqueleto das células que a nossa CV irá criar. Para isso, usamos a propriedade register, que recebe como parâmetros 1) a classe da célula que queremos criar e 2) uma string, que será o seu identificador.
Antes de prosseguir, precisamos falar um pouco sobre o register.
É ele quem registra quais são os tipos de célula que teremos em nossa CV e como iremos nos referir a cada uma. É mais fácil compreender isso pensando em uma CV com diversos tipos de célula. Como a da imagem ao lado.
Percebe que as células possuem tamanhos diferentes? Cada uma pertence a um certo tipo, e talvez você queira atribuir características e funcionalidades diferentes a eles.
Os identificadores servem para diferenciar quais tipos de célula receberão determinadas modificações. É através deles que nos referimos a células de um mesmo tipo ao longo do código.
No nosso código, teremos células de um único tipo, e eu chamarei células desse tal tipo de "id".
De volta ao nosso código, configuramos as células para serem da classe UICollectionViewCell. Essa é uma classe padrão de células que as permite exibir uma imagem. Note que, além de configurar as células-padrão, também configuramos a background color e o dataSource. Esse último elemento serve para dizer à CV de onde as informações que ela irá exibir serão extraídas (nesse caso, de exemploDeViewController).
(Posteriormente, iremos adicionar um conjunto de informações que nos servirá de insumo, além de especificar quais dessas informações vamos exibir na CV, então não se preocupe, ok?)
Terminamos a configuração da loadView como sempre, com view.addSubview para colar a CV na view padrão (linha 24).
Passo 4: agora, iremos adicionar as informações que nos servirão de insumo. Imagine, por exemplo, que estamos criando um aplicativo sobre cachorros. Para isso, vou 1) criar uma classe para representar o cachorro e 2) um array com objetos desse tipo.
Você pode encontrar as imagens que usei aqui :)
Passo 5: chegou a grande hora! Vamos agora juntar todos os elementos e dar vida à nossa CV! Isso é mais simples do que parece, especialmente porque usaremos um protocolo.
Vamos adicionar, a exemploDeViewController, o protocolo UICollectionViewDataSource. Ele irá exigir de nós duas funções: uma querendo saber quantos itens nossa CV terá, e outra querendo saber o que cada célula irá exibir. Assim que você adicionar o protocolo, o próprio Xcode solicitará as funções, que podem ser adicionadas com o fix da mensagem de erro!
Para organizar o código de uma maneira mais lógica e fácil de entender, vou recortar o bloco marcado e cola-lo no fim do nosso view controller.
Passo 6: agora, diremos quantos elementos nossa CV terá! Isso é feito através da função numberOfItemsInSection, que nos permite definir quantos itens cada seção terá.
As seções são como as divisões por mês na galeria de fotos: grandes agrupamentos que organizam os itens da CV de acordo com características em comum. Os itens, por sua vez, são os elementos individuais que exibimos na Collection View, como as próprias fotos da galeria de fotos. São esses itens individuais que, tecnicamente, chamamos de "células" :)
Como só temos uma seção aqui, tudo tranquilo! Daremos como número de itens a quantidade de objetos que estão dentro do array.
Passo 7: Chegamos na última e, talvez, mais importante etapa de todas. Já temos a estrutura da CV, as informações que nos servirão de insumo e o esqueleto das células que vamos criar. Finalmente chegou a hora de preencher essas células com conteúdo! Para isso, usaremos outro protocolo de Collection View, mas antes precisamos de uma breve explicação.
Imagine que tenhamos 10.000 itens para exibir na CV. Se continuássemos implementando o código normalmente, iríamos criar uma célula para cada um dos 10.000 itens, mesmo que nem todos eles coubessem na tela de uma só vez. Isso nos traria um grande problema, porque usaria uma quantidade absurda de memória. Para evitar que isso aconteça, podemos usar uma solução mais esperta: em vez de criar 10.000 células, criamos somente o necessário para preencher nossa tela, e damos a todas elas a capacidade de mudar seu conteúdo à medida que rolamos para baixo. Com isso, exibimos tudo que queremos sem sobrecarregar a máquina!
Essa solução deveras engenhosa pode ser aplicada com uma função chamada dequeueReusableCell, que recebe como parâmetro principal o identificador (lembra dele?) das nossas células. Com isso, todas as células que possuírem aquele identificador terão a capacidade de serem reutilizadas. Nosso código ficará da seguinte forma:
Acima, fizemos duas coisas. Primeiro, permitimos que nossas células pudessem ser reutilizadas (linha 53). Em seguida, atribuímos uma imagem à nossa célula, usando a propriedade backgroundView, que recebeu como parâmetro os componentes imagemSIlhueta do array "cachorros" (linha 55).
E… Voilá! Quando rodarmos o código, o resultado será este:
Perceba que, como configuramos o layout da CV para que ele não ocupe toda a tela, ainda temos um pedaço da view inicial (que é verde) aparecendo.
Em resumo, os passos para criar uma collection view são:
1. Configurar um layout
2. Inicializar uma CV com esse layout, registrar os tipos de célula que ela apresentará e definir de onde os dados virão com o data source
3. Implementar o protocolo UICollectionViewDataSource e suas funções
4. Configurar quantas células serão exibidas e o que cada célula exibirá
Abaixo está o código completo que usei nesse exemplo. Você pode copia-lo para o XCode e testar por conta própria :)
A história por trás da minha Collection View
Já fazia algum tempo que eu era envolvido com impacto social. Uma das razões que me motivaram a entrar na Apple Developer Academy, na verdade, havia sido descobrir como a tecnologia pode ser usada para melhorar a qualidade de vidas das pessoas que mais precisam (ou seja, da base da pirâmide).
Um mês de Academy ainda não tinha me feito especialista em tecnologia, mas decerto me fez mais sonhador. Imaginar as possibilidades do futuro, de como poderia direcionar meu conhecimento em programação para causar impacto social, para ajudar pessoas, me motivava muito! Foi por isso que decidi, em meu segundo projeto, trabalhar com o ODS 2: Fome Zero e Agricultura Sustentável. A ideia era simples: criar um banco de alimentos que listasse o que não foi vendido a cada dia por restaurantes e supermercados, de tal maneira que pessoas em necessidade pudessem saber, ir até o local e adquirir os alimentos.
Em poucas palavras, eu queria criar um catálogo. E catálogos significam exibir coisas ordenadamente. Considerando que "exibir coisas ordenadamente" é quase a definição de Collection View… Bem… A minha hora havia chegado.
Criei uma collection view similar à do exemplo. A diferença era que, na CV que fiz, as bordas eram arredondadas e havia um nome sobre cada imagem exibida.
Nesse caso, a ideia era que supermercados locais listariam quais os legumes disponíveis no dia, por exemplo, e eles apareceriam como itens da Collection View. O esquema dentro do app é o mesmo para várias outras categorias: frutas, carnes, pratos de restaurantes e por aí vai. Você pode encontrar o código desse meu aplicativo aqui.
Enfim, terminamos! Espero muito que o artigo tenha sido útil. Apesar de parecerem complexas, Collection Views são elementos simples de implementar, e basta fazermos algumas poucas vezes para estarmos adaptados a elas.
E caso você queira conversar comigo ou saber mais sobre o que faço, podes me encontrar aqui.
Have a nice day!
