Mudando a cor dos ícones no iOS e WatchKit: tintColor para iniciantes

Por que os ícones não querem mudar de cor? Conhecendo o tintColor

Imagine: você está escrevendo um aplicativo para iPhone ou Apple Watch. O designer enviou um belo conjunto de ícones pretos. Você os coloca em um UIImageView, aplica tintColor — e… nada acontece. O ícone continua preto, como antes. Familiar? Esta pergunta é uma das mais frequentes no Stack Overflow, e hoje vamos analisá-la em nível molecular.

O problema é que o tintColor funciona apenas com imagens que estão no modo Template Image. Se você simplesmente definir uma cor para uma imagem comum (Original Image), o sistema ignorará sua solicitação. Vamos aprender a controlar esse mecanismo.

O que é Template Image e para que serve?

No iOS e WatchKit, todas as imagens são divididas em dois tipos:

• Original Image — uma imagem comum com todas as suas cores. Ela não pode ser colorida através do tintColor.
• Template Image — uma imagem onde apenas o canal alfa (transparência) é considerado como cor. Todos os pixels visíveis se tornam "vazios" — eles estão prontos para receber qualquer cor que você definir.

Quando você aplica tintColor a uma Template Image, o sistema preenche todas as áreas opacas com a cor especificada. Isso é ideal para ícones, botões e elementos de interface que precisam se adaptar ao tema do aplicativo.

Maneiras de alterar o tintColor no iOS (Swift)

1. A maneira mais simples: através do Interface Builder

Se você estiver trabalhando com Storyboard ou XIB:

1. Selecione seu UIImageView ou UIButton.
2. No inspetor de atributos, encontre o campo Render Mode.
3. Defina-o como Template Image.
4. Agora a propriedade Tint no inspetor funcionará.

2. Método programático: código em Swift

Veja como fazer isso corretamente:

// Carrega a imagemlet originalImage = UIImage(named: "myIcon")

// Converte para Templatelet templateImage = originalImage?.withRenderingMode(.alwaysTemplate)

// Aplica ao UIImageViewimageView.image = templateImageimageView.tintColor = UIColor.systemBlue

O método chave é withRenderingMode(.alwaysTemplate). Ele diz ao sistema: "Não se importe com as cores originais, eu mesmo vou colorir tudo".

3. Alterando a cor para UIButton

Para botões, o processo é semelhante, mas há uma nuance:

button.setImage(UIImage(named: "heart")?.withRenderingMode(.alwaysTemplate), for: .normal)button.tintColor = UIColor.red

Observe: aplicamos withRenderingMode diretamente à imagem que estamos definindo para o botão.

Particularidades do tintColor no WatchKit

O desenvolvimento para Apple Watch tem suas limitações. No WatchKit não existe UIImageView — em vez disso, usa-se WKInterfaceImage. E aqui o tintColor funciona de forma diferente.

Abordagem correta para WatchKit

// Em InterfaceController.swift@IBOutlet weak var watchImage: WKInterfaceImage!

override func awake(withContext context: Any?) {    super.awake(withContext: context)        // Define a imagem    watchImage.setImage(UIImage(named: "watchIcon"))        // Aplica a cor    watchImage.setTintColor(UIColor.green)}

Importante: o método se chama setTintColor(_:), e não apenas tintColor. E sim, a imagem deve estar no formato Template Image. No WatchKit, isso é feito através do atributo Render As no catálogo de assets.

Exemplo prático: criando um ícone adaptável

Vamos juntar tudo. Suponha que temos um aplicativo com alternância entre tema escuro e claro. O ícone de configurações deve mudar de cor dependendo do tema.

class SettingsView