Como criar cards personalizados usando Table View
Uma Table View pode ser muito útil no desenvolvimento de um aplicativo, ainda mais personalizando suas células de acordo com o nosso design. Nesse tutorial, veremos como fazer cards a partir das células de uma Table View.
Criando a Table View
Para começar, vamos seguir alguns passos no Storyboard. Como base, inserimos no Storyboard uma Table View Controller, a qual deve pertencer a uma classe que herda de UITableViewController; através dessa classe, podemos controlar a exibição dos dados nas células e as operações sobre a Table View. Sendo assim, começamos com o seguinte esquema:
Uma vez que já temos nossa classe instanciada no Storyboard, podemos configurar as células. Para isso, nossas células também deverão pertencer a uma classe personalizada. Através dessa classe, poderemos inserir elementos na célula e configurá-la conforme a necessidade.
Construindo cards
Agora podemos começar a construção dos cards em si. Observando a hierarquia da Table View no Storyboard, observamos que existe uma view dentro de cada célula, porém, para fazer os cards, precisaremos inserir dentro da célula uma segunda view, que será o card em si. Para configurá-la, devemos indicar que ela faz parte das células, para isso, vamos criar um outlet dentro da classe que fizemos para a célula. Na imagem a seguir, podemos observar que o tamanho da célula foi aumentado no Storyboard e a cor da view foi alterada.
Agora deixe a criatividade fluir! Insira os elementos desejados para o seu card dentro da view que criamos. Nesse caso, vamos imaginar um aplicativo que controle eventos e apresente, em cada card, a data e o nome de cada um; além disso, vamos inserir sombras e um gradiente no fundo. Inserindo e referenciando os elementos corretamente, observamos o seguinte resultado:
A fim de observar o desenvolvimento dos cards, foi criada uma classe “Event”, que será o modelo de dados dessa aplicação. Alguns eventos foram instanciados e, através dos métodos nativos da Table View Controller, são acessados e exibidos na tela. Ao executar o código, observamos o seguinte:
Vemos que os cards ainda parecem sem forma; vamos, então, acrescentar detalhes para melhorá-los. Vamos começar arredondando as bordas dos cards; para isso, acessamos a propriedade “didSet” da variável "containerView" e trabalhamos com a propriedade “cornerRadius” através do seguinte código:
Agora os cards estão começando a tomar forma, mas ainda faltam alguns detalhes. Algo interessante de se acrescentar em cards são sombras, então vamos colocá-las. Assim como o arredondamento das bordas, as sombras são inseridas assim que a View é configurada, no “didSet”. Nesse caso, vamos trabalhar com algumas características das sombras:
- Opacidade: quanto maior esse valor, mais intensa é a cor da sombra;
- Raio: quanto maior esse valor, maior o alcance da sombra;
- Cor: por padrão, a sombra é preta, mas esse atributo, do tipo CGColor, pode ser facilmente alterado;
- Direção, ou “Offset": atributo do tipo CGSize.
No código abaixo, essas propriedades foram tratadas e os resultados podem ser observados na imagem que se segue:
Os cards estão quase prontos, mas ainda faltam alguns detalhes. Algo que pode incomodar a vista são as linhas nativas da Table View que aparecem separando as células. Felizmente, remover essas linhas é muito simples e pode ser feito no próprio storyboard: basta configurar o separador de células da Table View para "None".
Agora sim temos cards! Os elementos que fizemos até então podem ser adaptados para construir diferentes tipos de cards, com imagens, botões e labels que se adaptem ao problema em questão.
Detalhes adicionais
O que mais pode ser feito para enfeitar os cards? Já temos bordas arredondadas e sombras, vamos também inserir gradiente ao fundo.
Em Swift, o gradiente é, na verdade, uma camada que pode ser acrescentada a uma view. O gradiente, que é do tipo "CAGradientLayer", possui alguns atributos, como: cores, localizações, ponto de início, ponto de término, quadro e outros atributos pertencentes a objetos do tipo "layer".
O gradiente pode ser inserido no card dentro do "didSet", assim como a sombra e o arredondamento das bordas. O código a seguir exemplifica como isso pode ser feito:
É importante fazer algumas considerações sobre o código acima. As cores do gradiente são do tipo CGColor, é importante levar isso em consideração ao programar. Os atributos "startPoint" e "endPoint" indicam o ponto de início e fim da linha que serve de direção para o gradiente. O atributo "locations" indica os pontos em que as cores devem ser posicionadas no gradiente. Por fim, nesse caso, foi necessário também indicar o arredondamento das bordas do gradiente, para que este acompanhasse o desenho do card.
A "containerView", ao final, parece-se com isso:
Os cards estão prontos! Ao executar o código, podemos observar o resultado:
Conclusão
Os cards apresentados nesse tutorial são apenas exemplos do que se pode fazer através das Table Views, eles podem ser adaptados para diferentes situações conforme a necessidade. As Table Views, apesar de parecerem simples, são muito versáteis e podem ser aplicadas de diversas formas, os cards são apenas um exemplo das muitas possibilidades que as Table Views nos oferecem.
