Criando um calendário semanal dinâmico em UIKit
Você já precisou de um calendário para seu aplicativo e não sabia por onde começar? Ou como seria possível criar uma lógica que saiba exatamente qual é o dia de hoje? Vem que eu te ajudo!
Neste artigo você aprenderá como fazer um calendário semanal (muito parecido com o calendário nativo do iOS) em UIKit.
Já adiantando, trabalharemos no início com Storyboard para criar toda a parte visual do calendário e a lógica será feita via código.
No Storyboard
Formatando a View
1. Adicione uma UIView na sua UIViewController e adicione as constraints necessárias.
Sugestão: Se quiser facilitar a visualização, coloque uma cor de background na UIView.
Adicionando os elementos
1. Adicione uma Stack View Horizontal dentro da sua UIView. Faça isso de maneira que a Stack ocupe quase toda a View.
Sugestão: Para facilitar, renomeie essa Stack para "Calendar".
2. Adicione uma Stack View Vertical dentro da Stack "Calendar".
Tenha o cuidado de verificar a hierarquia dos objetos, precisamos que uma Stack esteja dentro da outra.
Sugestão: Para facilitar, renomeie essa Stack para "Day".
3. Adicione uma UILabel e um UIButton na Stack "Day", não se preocupe com as constraints por enquanto.
Agora você pode alterar os textos dos elementos e personalizá-los do jeito que preferir. Uma sugestão:
- UILabel: System Semibold 17.0 na cor Tertiary Label Color.
- UIButton: System 15.0 na cor Default (Label Color).
4. Para não precisar fazer esse mesmo processo para os próximos dias, você irá selecionar a Stack "Day" e copiá-la 6 vezes.
Personalizando os elementos
Agora para que tudo funcione direitinho, precisamos ajustar o espaçamento dos objetos. Podemos corrigir isso selecionando o Attributes Inspector da Stack.
1. Selecione a Stack "Calendar" altere a distribuição dos elementos para Equal Spacing, isso fará com que o espaço entre elas seja igual.
2. Selecione todas as Stacks "Day" e altere a distribuição dos elementos para Fill Equally.
Você terá algo mais ou menos assim:
3. Para que o calendário fique mais parecido com o calendário nativo iOS, vamos aplicar um arredondamento nos números.
Selecionando o Identity Inspector você consegue adicionar um atributo para o botão.
O nome do atributo é "cornerRadius", exatamente desse jeito, sem espaço e com letra maiúscula. O tipo dele é "Number" e o valor fica a seu critério.
Para o arredondamento funcionar da maneira correta, é necessário que o tamanho do botão seja o mesmo para altura e largura.
Sugestão: Width = 46 e Height = 46, com cornerRadius = 23.
Agora que a parte visual está pronta, vamos tornar esse calendário dinâmico.
No Código
Iremos trabalhar somente com o arquivo ViewController.swift.
Conectando os elementos e criando variáveis
1. Adicione as referências de todos os Botões.
Não é necessário fazer esse processo com as Labels já que elas são estáticas, os únicos valores que irão mudar são os valores dos números.
Sugestão: Você pode fazer isso selecionando no objeto com o botão "control", arrastando para o código e renomeando o outlet.
2. Quando terminar, crie uma lista com todos estes botões, a sua ViewController estará assim:
3. Agora iremos criar as variáveis que irão nos ajudar a saber qual dia, mês e ano estamos. Estes valores já estão disponíveis na estrutura de Calendar na biblioteca de UIKit.
4. Para dar destaque ao dia atual no calendário, faremos uma pequena personalização nele (utilize a cor que você quiser)
Lógica do calendário
Agora, a parte mais difícil é tratar a lógica do calendário. A função a seguir realiza os seguintes passos:
Para saber os próximos dias:
Verifica se o mês atual possui 31, 30 ou 28/29 dias (Fevereiro).
- Se o mês atual possui 31 dias, ele limita os dias do mês para 31.
- Se o mês atual possui 30 dias, ele limita os dias do mês para 30.
- Se o mês atual for Fevereiro (exceção):
1. Ele verifica se o ano é bissexto.
2. Se sim, ele limita os dias do mês de fevereiro para 29.
3. Se não, ele limita os dias do mês de fevereiro para 28.
Ele faz o mesmo processo para saber os dias anteriores, porém a lógica funciona para o dia anterior, não o atual.
Não esqueça de chamar essa função no seu viewDidLoad():
Caso for necessário para o seu aplicativo, é possível criar ações para cada dia do ano (por isso utilizamos UIButtons para os números).
Agora você tem um calendário semanal dinâmico para seu aplicativo!
Você pode visualizar o projeto final no meu GitHub :)
