Collection View Responsivo

com células de mesmo tamanho

Durante a criação do meu jogo Bubble Wrap — Stress Relieving que pode ser encontrado na App Store, encontrei um sério problema para criação da responsividade do plástico bolha na tela dos mais diversos dispositivos iOS que ainda recebem suporte da Apple. Meu maior problema era em como fazer todas as telas dos dispositivos terem bolhas de tamanhos iguais, sendo que o tamanho da tela só iria interferir na quantidade de bolhas em cada linha, evitando as bolhas de se deformarem e ficarem gigantes ou minúsculas.

Sendo assim, neste tutorial irei ensinar vocês como criar um Collection View responsivo em termos de tamanho, para que se adapte em todas as telas disponíveis e que funcione em todos dispositivos atualmente suportados. Vale-se lembrar que essa técnica é utilizada para quando você não tem um número determinado de células dentro da sua coleção.

Criação do Projeto e Introdução.

Primeiramente abram o Xcode e criem um Simple Application Project e coloquem um nome a escolha de vocês. No meu caso, irei colocar CollectionResponsiva pois essa é a ideia do tutorial.

Após criar o seu projeto, seleciona o Main.storyboard e substitua o View Controller padrão por uma Collection View Controller. (Não se esqueça de colocar este Controller como inicial, selecionando a opção a ser grifada na foto).

Uma vez criado o controlller, vamos adicionar uma imagem centralizada , que ocupe 80% de altura e largura da célula, isso nos ajudará a manter a imagem proporcional ao tamanho, independente da quantidade ou tamanho da célula.

Para fazer isso, selecione a célula da Collection e altere seu tamanho para 100, tanto na altura quanto na largura. (LEMBRE-SE: Esse tamanho não é o verdadeiro tamanho dá célula) . Após isso ser realizado, insira uma imagem dentro da célula e aplique 4 constraints, conforme a foto a seguir. Uma vez que as constraints estejam presentes, basta alterar o multiplicador da largura e altura para 0.8

Após realizada a etapa acima, crie um novo CollectionViewController.swift que em nosso caso chamaremos de TutorialViewController.swift

Uma vez criado o arquivo, volte no Storyboard e atribua o arquivo Swift criado para a Collection View Controller, e também selecione a célula desta collection e troque seu identifier para mainCell.

Quando o arquivo estiver conectado ao Storyboard, nossa sessão de código irá começar. Nosso código é bem simples e somente tomará espaço em um arquivo, por isso, irei copiar o código para este painel e detalhar o funcionamento de cada comando, para assim haver pleno entendimento de cada método dentro da classe.

Minha sugestão é que você copie o código primeiramente e acompanhe a explicação conforme resumida a seguir.

A princípio, importamos o UIKit, pois utilizaremos de suas classes criadas para alterar as funcionalidades da Collection View.

Em seguida, declaramos uma classe chamada TutorialViewController, que herda suas propriedades e métodos da classe UICollectionViewController e possui uma implementação do protocolo UICollectionViewDelegateFlowLayout.

Nossa classe só irá possuir um atributo, tamanhoCell, que definirá o tamanho da célula que desejamos ter, esse valor não pode ser igual ou menor a 0, e de preferencia deve ser menor que a menor tela disponível (275 pixels).

No método numberOfSections, declaramos uma variável screenHeight, que possui a altura da tela do dispositivo. Após isso, declaramos outra variável com o nome statusHeight, que possui a altura da statusbar do iOS. Por fim, criamos uma variável chamada secCount , onde subtraímos o valor da altura da tela e da altura da status bar e dividimos pelo tamanho das células, retornando esse valor no método.

No método sizeForItemAt, retornamos um CGSize com o valor de altura (height) e largura (width) com valores iguais aos do tamanho da célula, no nosso caso, tamanhoCell.

No método numberOfItemsInSection, irá ser realizada uma simples conta, onde iremos pegar a largura do dispositivo sendo utilizado, transformaremos este número em um Int e dividiremos pelo tamanhoCell, que seria o tamanho da célula.

Por fim, mantemos o cellForItemAt, retornaremos a célula cujo identificador é mainCell, este identificador deve ser igual ao colocado acima.

Com o código finalizado existe um último detalhe que deve ser alterado antes de finalizarmos. Vá no seu storyboard, selecione a Collection View e coloque 0 nos campos de Min Spacing. Isso garantirá que a responsividade fique certa para os dispositivos.

Para efeitos de teste, adicione uma imagem qualquer no Assets.xcassets , e atribua ela a imagem no storyboard.

O resultado do seu projeto deve ter ficado algo parecido com as imagens a seguir:

Obrigado por terem acompanhado este tutorial e espero que o resultado seja útil para vocês e suas ideias.