Como organizar cores em iOS

Renata Faria
CocoaHeads Recife
Published in
2 min readJun 19, 2020
Photo by Sharon Pittaway on Unsplash

São dicas rápidas, porém acredite, sua vida vai ser outra depois disso!

Gostaria também de agradecer ao meu professor Eric Brito que me fez aprofundar os conhecimentos sobre isso.

O problema

Quando vamos fazer uma aplicação com iOS e queremos adicionar uma cor customizada podemos fazer de vários jeitos. Abaixo temos alguns exemplos:

Toda vez que vamos usar essas cores, precisamos escrever elas sempre, podendo causar problemas. Por exemplo, caso você escreva algo errado pode ser que a cor com o color set crashe o app, ou saia com um amarelo no lugar de um vermelho. Agora se o designer trocar o tom do vermelho, imagina o trabalho você vai ter, colocando na busca o nome da cor e mudando tudo.

Começando a consertar o problema

Uma das opções que podemos fazer para consertar isso é extender UIColor (com UIKit) ou Color (em swiftUI), utilizando uma variavel estática.

Dessa forma, porém, você não pode usar as que já existem no sistema, como acima, por exemplo. Se fossemos criar um “blue” você precisaria sobrescrever o valor do sistema e isso iria bagunçar seu app (quando vamos saber se é do sistema ou customizada?

O AppColor para nos salvar

Essa struct vai nos ajudar a resolver o problema acima. Todas as cores novas serão adicionadas aqui. Assim, se quiser usar a do sistema você vai usar a UIColor.cor e se quiser usar as customizadas AppColors.cor. Muito mais organizado e fácil de entender!

Esse jeito já é beeeeem melhor, porém existe um jeito de melhorar ele, é algo bem opcional, mas eu tenho certeza que vai ajudar.

Vamos imaginar que todos os botões do seu aplicativo são azuis por causa da identidade visual da sua empresa. Porém, a empresa foi comprada e a identidade visual mudou, agora todos os botões são vermelhos. Vai dar trabalho criar uma nova cor chamada red e trocar em todos os cantos do seu app, não é?

Cores por componente

A ideia aqui é adicionar cores por componentes, de maneira que você cria uma cor atrelada a, por exemplo, um botão, um titulo etc. Se você precisar trocar a cor de um botão, você só precisa mudar em um lugar só! Muito mais prático. Isso é algo que até a Apple adota, por exempo: UIColor.systemBackground.

Para isso, vamos continuar a utilizar o AppColors e as cores que criamos. E para concluirmos nosso objetivo, vamos adicionar novos itens, que estão ligadas aos componentes, como no exemplo abaixo, com um botão:

Por hoje é só, até mais!

--

--

Renata Faria
CocoaHeads Recife

Gerente de Produtos no AllowMe. Estudante de mestrado na Universidade Federal de Pernambuco.