UI Components — UIKit

O intuito deste texto é passar algumas vivências sobre a utilização de componentes no desenvolvimento de UI. A ideia é que esse texto passe o simples, mais voltado no “processo de componentização”, além de algumas dicas técnicas de como executar isso.

Sabemos que os ganhos em modularizar qualquer recurso dentro do desenvolvimento de software sempre tende a nos levar ao objetivo de forma mais organizada e inteligente. Dentre os benefícios da componentização, está a reutilização e a centralização. Centralizando, garantimos que a mudança será feita em apenas um lugar.

A componentização também é responsabilidade do designer…

Um dos preceitos do LEAN é que sempre devemos puxar tarefas e não aguardar que as mesmas nos sejam empurradas! E no caso do desenho de interface isso continua sendo uma verdade, durante o processo de criação da interface, o desenvolvedor deve estar atento ao trabalho do UI designer para orientá-lo quanto aos pontos citados acima.

Uma boa interface começa a ser pensada de forma colaborativa e por que não os desenvolvedores atuarem nisso?

Ilustrando um pouco mais, o papel do desenvolvedor no processo de concepção da interface é auxiliar o UI a encontrar esses padrões e identificar componentes dentro do todo proposto.

O simples “falar a mesma língua” já é uma prática que tornará a componentização algo mais fluido, isso deve ser empregado tanto no código quanto no UI Guide, por exemplo: titleFont quando eu tiver no meu layout uma referência a titleFont automaticamente já saberei que devo utilizar o componente: UILabelTitleFont que já terá os pré-sets iguais aos definidos no UIGuide!!

Entenderam a importância do falar a mesma língua? Padronizar a comunicação é tão importante quanto padronizar nossos layouts!

Componentizar orientado a mudanças…

Sejamos sinceros, por mais reutilizável que um componente seja o que vai acabar realmente importando é quando seu cliente chegar e falar assim:

Olha, será que dá pra mudar a cor de todos os títulos?

Encha o peito, olhe nos olhos dele e diga: "Sim"

Essa proposta de componentização visa, acima de tudo, criar componentes a prova de clientes indecisos.

Que fique claro, não existe bala de prata neste nosso mundo! O que existem são formas menos sofredoras de se fazer as coisas.

Mas afinal, o que é componentizar orientado a mudanças? Pra mim, é ter a segurança que em algumas situações você não terá que mudar a mesma coisa em 50 lugares diferentes, ou seja, fazer um trabalho mecânico e repetitivo. Eu até complementaria, componentizar orientado a mudanças, em alguns casos, é ter a segurança de que não existiram efeitos colaterais.

Partindo para a prática então

Componetizando cores

Normalmente o que faço para componentização das cores é criar uma extension (Category em Objective-c). Dentro desta extension crio funções estáticas que retornam objetos UIColor.

Importante: sempre nomear os métodos com o prefixo de seu projeto, isso é imprescindível pois como estamos definindo funções para uma extension precisamos diferenciar o que é "nosso" e o que é da "UIColor" assim sendo, a forma mais rápida e fácil é colocar o prefixo no nome da função.

Quando estamos definindo uma constante para aquela cor, devemos garantir a seguinte afirmação: "Este é o vermelho da minha aplicação!"

Componentizando fontes

A implementação da componentização das fontes é bem parecida com a das cores. Também criamos uma extension para definirmos as funções estáticas com as fontes possíveis.

Normalmente o que faço é conversar com o UI Designer para definirmos quais os tamanhos possíveis para as fontes daquela aplicação, qual o range de fontes que o mesmo poderá colocar nos seus layouts!

Definido isso, conseguimos criar métodos estáticos que representam estes tamanhos e suas respectivas fontes.

Note no código abaixo que defino os tamanhos como constantes e também, caso tenhamos uma fonte não nativa (que não vem com o pacote de desenvolvimento) costumo criar um enum para representar suas variações.

Os nomes dos métodos também seguem o padrão definido pelas fontes: "Esta é a fonte BOLD PEQUENA da minha aplicação"

Componentizado UIButtons, UILabels…

Aqui é onde ligamos tudo! Fontes com cores, tamanhos e etc! Não necessariamente podemos fazer a componentização somente com botões, labels,… fica a cargo do desenvolvedor optar por onde ele quer aplicar essas propriedades.

Imaginamos que no nosso layout, existem 2 tipos de labels e 2 tipos de botões. Vamos inicialmente dar foco às labels. Depois de conversar com o UI Designer, identificamos que existem essas duas categorias de labels: Título e Texto. Veja como é importante que a comunicação e o “falar a mesma língua” fazem com que a definição destes componentes fique fácil e fluida.

Definindo portanto uma especialização de UILabel para representar um Título, como mostrado abaixo:

Portanto, o tamanho da fonte será sempre BRBig e sua cor, sempre BRed.

O mesmo temos para a label do tipo Texto:

A mesma ideia serve para UIButton, UISwitch, UITextField… O importante é sempre deixar a especialização para o UIComponent, nunca para as constantes.

Conclusão

Muito bem, podemos portanto concluir que a utilização de componentes além de deixarem o código mais elegante, nos economizam algumas horas extras… O foco do nosso trabalho como desenvolvedores deve sempre ser: estar o mais preparados possível para mudanças de escopo pois elas VÃO ACONTECER, aceitemos isso!

Dúvidas, críticas elogios são sempre bem vindas! Quanto mais fizermos para evitarmos sofrimento de colegas, maior qualidade nosso trabalho terá!

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.