Меняем цвет иконок в iOS и WatchKit: tintColor для новичков

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Почему иконки не хотят менять цвет? Знакомство с tintColor

Представьте: вы пишете приложение для iPhone или Apple Watch. Дизайнер прислал красивый набор черных иконок. Вы ставите их в UIImageView, применяете tintColor — и… ничего не происходит. Иконка как была черной, так и осталась. Знакомо? Этот вопрос — один из самых частых на Stack Overflow, и сегодня мы разберем его на молекулярном уровне.

Проблема в том, что tintColor работает только с изображениями, которые находятся в режиме Template Image. Если просто установить цвет для обычной картинки (Original Image), система проигнорирует ваш запрос. Давайте научимся управлять этим механизмом.

Что такое Template Image и зачем он нужен?

В iOS и WatchKit все изображения делятся на два типа:

Original Image — обычная картинка со всеми своими цветами. Она не поддается окрашиванию через tintColor.
Template Image — изображение, где цветом считается только альфа-канал (прозрачность). Все видимые пиксели становятся «пустыми» — они готовы принять любой цвет, который вы зададите.

Когда вы применяете tintColor к Template Image, система заливает все непрозрачные области указанным цветом. Это идеально для иконок, кнопок и элементов интерфейса, которые должны адаптироваться под тему приложения.

Способы изменения tintColor в iOS (Swift)

1. Самый простой способ: через Interface Builder

Если вы работаете в Storyboard или XIB:

Выберите ваш UIImageView или UIButton.
В инспекторе атрибутов найдите поле Render Mode.
Установите его в Template Image.
Теперь свойство Tint в инспекторе будет работать.

2. Программный способ: код на Swift

Вот как это делается правильно:

// Загружаем изображение
let originalImage = UIImage(named: "myIcon")

// Преобразуем в Template
let templateImage = originalImage?.withRenderingMode(.alwaysTemplate)

// Применяем к UIImageView
imageView.image = templateImage
imageView.tintColor = UIColor.systemBlue

Ключевой метод — withRenderingMode(.alwaysTemplate). Он говорит системе: «Не обращай внимания на оригинальные цвета, я сам все покрашу».

3. Изменение цвета для UIButton

Для кнопок процесс похож, но есть нюанс:

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

Обратите внимание: мы применяем withRenderingMode прямо к изображению, которое устанавливаем для кнопки.

Особенности tintColor в WatchKit

Разработка для Apple Watch имеет свои ограничения. В WatchKit нет UIImageView — вместо него используется WKInterfaceImage. И тут tintColor работает иначе.

Правильный подход для WatchKit

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

override func awake(withContext context: Any?) {
    super.awake(withContext: context)
    
    // Устанавливаем изображение
    watchImage.setImage(UIImage(named: "watchIcon"))
    
    // Применяем цвет
    watchImage.setTintColor(UIColor.green)
}

Важно: метод называется setTintColor(_:), а не просто tintColor. И да, изображение должно быть в формате Template Image. В WatchKit это делается через атрибут Render As в каталоге ассетов.

Практический пример: создаем адаптивную иконку

Давайте соберем все вместе. Предположим, у нас есть приложение с переключением темной и светлой темы. Иконка настроек должна менять цвет в зависимости от темы.

class SettingsViewController: UIViewController {
    
    @IBOutlet weak var settingsIcon: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupIcon()
    }
    
    func setupIcon() {
        // Загружаем иконку как Template
        let icon = UIImage(named: "gear")?.withRenderingMode(.alwaysTemplate)
        settingsIcon.image = icon
        
        // Применяем цвет в зависимости от темы
        updateIconColor()
    }
    
    func updateIconColor() {
        if traitCollection.userInterfaceStyle == .dark {
            settingsIcon.tintColor = UIColor.white
        } else {
            settingsIcon.tintColor = UIColor.black
        }
    }
    
    // Обрабатываем смену темы в рантайме
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        updateIconColor()
    }
}

Этот код автоматически реагирует на системные изменения темы. Попробуйте переключить режим в симуляторе — иконка послушно поменяет цвет.

Частые ошибки и их решения

Ошибка: tintColor не применяется
Проверьте, что вы используете .withRenderingMode(.alwaysTemplate). Без этого изображение останется оригинальным.
Ошибка: изображение исчезло
Если после применения Template Image иконка стала невидимой, значит, у вашего исходного изображения нет альфа-канала. Убедитесь, что иконка имеет прозрачный фон.
Ошибка: цвет не меняется в WatchKit
Проверьте, что в ассетах для WatchKit выставлен режим Render As: Template Image. В WatchKit это обязательное условие.
Ошибка: цвет меняется, но не тот
Убедитесь, что вы не переопределяете tintColor где-то еще в коде или через storyboard.

Продвинутые техники: градиенты и анимация

Знаете ли вы, что tintColor можно анимировать? Попробуйте плавно менять цвет иконки:

UIView.animate(withDuration: 1.0) {
    self.imageView.tintColor = UIColor.systemPink
}

А если вам нужен градиент? Тут придется использовать CAGradientLayer как маску:

let gradient = CAGradientLayer()
gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
gradient.frame = imageView.bounds

imageView.image = UIImage(named: "star")?.withRenderingMode(.alwaysTemplate)
imageView.layer.mask = gradient

Это уже уровень джедая, но результат выглядит потрясающе.