Como criar um layout de Cards com Collection View no Storyboard

Já sabemos que o Storyboard ajuda muito na hora de desenvolver seu app. Sabemos também que é possível fazer coisas bem legais e de certa forma rápidas com ele. Nesse tutorial você vai aprender a fazer um layout simples de cards no Storyboard do Xcode para que você possa melhorar o visual dos seus apps e ter mais um recurso no seu arsenal.

Após abrir o Xcode e criar um projeto, vamos começar criando uma Collection View Controller no Storyboard para que possamos trabalhar nela.

Após arrastarmos a Collection View Controller para o Storyboard vamos ter uma tela em branco com um pequeno quadrado no canto, esse quadradinho é a nossa célula (Collection View Cell). Antes de mais nada nós devemos ajustar o tamanho da nossa célula para que possamos colocar um conteúdo nela e futuramente ser nosso card. Você pode ajustar o tamanho clicando e arrastando em seu canto inferior direito, na borda direita ou na borda inferior. A célula irá centralizar automaticamente e ficará distante da margem de acordo com seu ajuste.

Para que nossa célula possa começar a parecer mais com um card podemos alterar a cor dela ou a cor do fundo. Nesse caso vamos alterar a cor do fundo para o Hex #F0F0F7 e deixar a cor da célula branca.

Vamos começar a popular nosso card, e para esse tutorial vamos fazer um layout de card mais parecido com um perfil contendo foto, nome, telefone e email, mas fique á vontade para experimentar fazer como desejar.

Ok, devemos agora começar pela parte superior do card, nessa região vamos colocar uma imagem. Um componente de Image View é o ideal para isso, vamos arrastá-lo e colocá-lo dentro de nosso card. Você pode ajustá-lo dentro do card como desejar mas sem colocar as constraints ainda.

No nosso exemplo eu escolhi respeitar as margens interiores do card e coloquei a Image View ocupando praticamente a metade superior da célula.

Nesse momento nós devemos colocar as constraints para nossa imagem, lembrando que é mais fácil fazer isso se nossa Image View já possuir uma imagem dentro. Você pode colocar qualquer imagem como um placeholder mesmo.

Agora é só colocar as constraints, vou deixar a foto a uma distância de 12 em cima, na direita e na esquerda, desmarcando a opção "Constraints to margin".

Uma boa dica é sempre deixarmos o conteúdo dentro do card a uma distância igual de todas as margens em todos os lados, fica visualmente mais atraente e é uma boa prática em termos de design.

O próximo passo é organizarmos o resto do conteúdo. Teremos nome, telefone e email, então talvez seja mais interessante se colocarmos essas informações em forma de lista, para isso usaremos uma estrutura de uma Vertical Stack View para organizar melhor nossas informações que receberá 3 Views e uma label dentro de cada View.

Comecemos pela Vertical Stack View. Vamos colocá-la abaixo da imagem.

Sem colocar as contraints ainda, vamos colocar 3 Views dentro da nossa Vertical Stack View.

Na imagem eu colori as Views apenas para que fique mais fácil de visualizar, não é necessário que você faça o mesmo. Não tem problema se as Views acaberem ficando com tamanhos diferentes, vamos arrumar isso nas cofigurações da Vertical Stack View agora.

Para que as Views se distribuam igualmente dentro da Vertical Stack View é necessário que você mude a opção Distribution para "Fill Equally" nas configurações dela. Logo após isso iremos mexer nas constraints da Vertical Stack View, colocando 0 na parte de cima para que fique próxima da imagem e 12 nos outros lados respeitando as margens que definimos antes.

Uma vez que já definimos a Vertical Stack View e organizamos seu conteúdo podemos mexer no conteúdo das Views onde ficará as informações do perfil da pessoa. Vamos colocar uma Label dentro de cada uma das nossas 3 Views, nesse caso vamos inserir manualmente mesmo, apenas para teste.

Agora precisamos colocar um texto em cada uma das Labels que servirá de placeholder apenas para testarmos o tamanho delas e colocar suas constraints.

Iremos começar centralizando as Labels verticalmente dentro de suas respectivas Views e, após isso, colocaremos suas contraints laterais e o alinhamento do texto para o centro.

(Para que a opção de centralizar verticalmente a Label dentro da View fique habilitado é necessario selecionar ambas.)

Vamos colocar as contraints laterais em 0 pois as Views já fazem o trabalho de garantir a margem do card.

Dessa forma se tirarmos as cores das Views o nosso card simples está pronto!

Para visualizar melhor como ficaria sua Collection View com mais cards você pode selecioná-la e aumentar a quantidade de Items.

Vale a pena lembrar que a Collection View já possui um scroll, a única coisa que você precisa se preocupar é com os itens dentro dela e o sentido do scroll, vertical ou horizontal.

Agora você já tem uma ideia de como trabalhar com cards em uma Collection View. Esse foi um tutorial simples com dicas e uma base pra você começar a experimentar e brincar com esse tipo de layout.

Espero que tenham gostado. Até mais!