Реализуйте темный режим и несколько тем с помощью propertyWrapper

Темный режим и iOS

Все мы знаем, что темный режим очень популярен среди пользователей. Кроме того, мы не можем игнорировать преимущества батареи вашего устройства в виде OLED-дисплеев и ваших глаз.

iOS 13 предоставляет API системных цветов, который автоматически меняет цвета представления, когда мы переводим систему в темный режим. Но при реализации этого для своего приложения у меня было очень много сомнений.

Как настроить собственные цвета для темного и светлого режима?

Что ж, для этого у нас есть каталог цветных ресурсов. Мы можем добавить цвета для темного и светлого режима.

Что, если мы захотим добавить больше тем?

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

А как насчет приложений, поддерживающих версию iOS 10?

Что ж, iOS 10 не поддерживает каталог цветных ресурсов. UIColor.init(named: “”) поддерживается только начиная с iOS 11, поэтому мы должны отказаться от этой идеи и перейти к программному подходу.

Мы должны создать нашу собственную UIColor оболочку, чтобы дать нам цвета для разных режимов / тем. При создании этих оболочек мы должны следить за тем, чтобы синтаксис был таким же, как у Apple API для UIColor (например, для вызова UIColor.red).

Этого можно добиться с помощью propertyWrapper.

propertyWrapper спешит на помощь

Давайте создадим Theme структуру с propertyWrapper с количеством переменных, равным количеству поддерживаемых тем.

Теперь давайте создадим несколько цветов. Мы создадим расширение UIColor и создадим цветной объект с помощью Theme. Посмотрите на синтаксис и создание объекта. У этого есть много преимуществ:

  • Простота синтаксиса
  • Гибкость для добавления или удаления поддержки тем
  • Вызов API в стиле Apple
  • Простота обслуживания и читаемость кода
  • Группировка расширений по вашим характеристикам
  • Обратная совместимость

Вот и все. Теперь вы можете установить цвет своих компонентов пользовательского интерфейса, используя тот же синтаксис, что и у Apple (например, установка цвета для текста метки будет UIColor.primaryText), и после этого ваше приложение изменит свои цвета в зависимости от выбранного вами темного / светлого режима. установили.

Окончательный результат в iOS 13

Ниже приведены результаты созданного мной образца приложения. Смотрите полный проект на GitHub.

А как насчет более старых версий?

Нам нужно проделать дополнительную работу, чтобы добавить темы на старые устройства. В нашем сообществе есть много решений, и я делюсь только одним простым. У вас может быть собственная реализация в соответствии с потребностями вашего проекта.

Сначала мы создадим ThemeProtocol с реализацией метода addThemeChangeObserver по умолчанию, чтобы любой объект, реализующий этот протокол, просто должен был вызвать этот метод. Затем мы реализуем от ThemeProtocol до ViewController, вызываем addThemeChangeObserver в viewDidLoad и реализуем configureSubviewsColors, где мы настроим все цвета наших подвидов.

Подведение итогов

Я добавил левую UIBarButton для переключения темного режима на старых устройствах и добавил цель toogleDarkMode для обработки изменений в ThemeManager. Вот и все. Мы успешно реализовали его для более старых версий.

// Implement this method only for iOS version less than 13
 @objc func toogleDarkMode() {
 // Toggle Theme Logic
  ThemeManager.isDarkModeEnabled = !ThemeManager.isDarkModeEnabled
  NotificationCenter.default.post(name: NSNotification.Name(rawValue:  “themeChange”),
                                 object: nil)
 }

Ниже приведены результаты для более старого устройства:

Примечание. Если вы не хотите выполнять весь этот дополнительный код для старых версий, вы можете просто сбросить AppDelegate window.rootViewController . Для него будет настроена новая тема (темная или светлая) в зависимости от того, что вы установили локально для своего приложения.

Спасибо за чтение.

Надеюсь, эта статья поможет вам реализовать темный режим в вашем приложении. Поделитесь своими ценными отзывами.