Otimizando seu código com componentes em Swift — Componente short list

É muito comum em algumas telas o desenvolvedor precisar exibir uma lista curta com um pequeno número de items estáticos, fixos no seu código, ou mesmo fornecidos por alguma API.

Por exemplo, uma lista de benefícios para a contratação de um produto, ou uma lista com 4 ou 5 opções para o usuário selecionar como no exemplo abaixo.

Criar uma lista estática na sua tela com 4 ou 5 subviews idênticas, simplesmente coladas uma embaixo da outra e amarradas com constraints, parece prático em um primeiro momento. Mas não é uma opção sustentável.

Quem trabalha com tecnologia sabe que as definições de um projeto mudam com frequência e é grande a probabilidade (em um futuro mais próximo do que você imagina) de surgir a necessidade de remover ou adicionar mais um item nessa lista.

E aí quando isso acontece, você perde mais tempo do que gostaria ajustando xibs, constraints e testando o layout para garantir que tudo ainda funciona corretamente.

Como podemos otimizar a construção dessa lista, de forma ágil, e ainda sim, possibilitar qualquer manutenção futura de forma rápida e segura ?

O básico : Table e Collection Views

Usar uma table view ou collection view é uma solução padrão para esses casos.

Esses dois componentes padrão do sistema são indispensáveis para a exibição de listas de tamanho indeterminado e que contam com um mecanismo de reuso de células que garante sua boa performance. Porém para seu funcionamento, você precisa criar uma estrutura adicional :

- criar um protótipo de célula (mesmo que seja uma simples UILabel ou UIButton)

- registrar a célula para uso com sua table/collection

- implementar datasource e delegate

Por mais que seja um código bem padrão que você já fez um milhão de vezes e sabe de cabeça, vai tomar um tempinho precioso do seu dia.

Para 3 ou 4 items que provavelmente cabem em uma tela, parece um pouco trabalhoso, não ?

Mais rápido ? Stack views

Outra possibilidade muito interessante, é o uso de stack views, que permitem que você adicione e remova subviews sem nenhuma estrutura adicional.

Importante mencionar nesse ponto que as stack views não tem o mecanismo de reuso das table/collection views e não são adequadas para uma lista muito longa de items que vai gerar muito scroll ok ? Por isso nosso componente se chama short list.

A stack view colocada diretamente na sua view já vai te ajudar a inserir e remover subviews contendo dados fixos com mais velocidade e segurança.

Mas e para o caso onde os dados não são exatamente fixos ?

Rápido e dinâmico — Componente Short List

Nesse caso, a melhor opção é a criação de um componente baseado em stack views.

O componente que tenho usado é construído 100% em código e contém uma stack view vertical que recebe uma lista de subviews. Dessa forma ele mantém a flexibilidade de poder exibir uma lista de qualquer view, inclusive de views mistas.

A propriedade “body views” conta com um mecanismo de atualização. Toda vez que recebe uma nova lista de views, a stack tem todo seu conteúdo removido e é reconstruída com as novas views. Refletindo assim qualquer alteração vinda da sua API.

Você pode passar para essa propriedade uma lista de views de qualquer tipo, pode ser uma simples lista de UILabel por exemplo, uma lista de UIButton formatados como “tags” como o nosso exemplo. Ou uma lista de qualquer views customizadas com labels, imagens, botões, etc.

O componente ainda tem a possibilidade de adicionar um título para nomear a sua lista, separadores para adicionar mais estilo e ainda é possível estende-lo com facilidade para receber um subtítulo ou outros elementos para complementar a sua lista.

Conclusão

O uso de stack views para a apresentação de listas curtas possibilita ao desenvolvedor criar telas com conteúdo fixo ou dinâmico com mais agilidade e com um código mais limpo e direto, sem a necessidade da criação de estrutura extra. E ao mesmo tempo garantindo a manutenção rápida e segura do código.

Espero que essa técnica ajude a otimizar e agilizar o desenvolvimento das suas telas.

Projeto Demo

Você pode encontrar o código completo desse componente com todos os detalhes do seu desenvolvimento no projeto de exemplo que eu disponibilizei no Github.