Реализуйте темный режим и несколько тем с помощью 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
. Для него будет настроена новая тема (темная или светлая) в зависимости от того, что вы установили локально для своего приложения.
Спасибо за чтение.
Надеюсь, эта статья поможет вам реализовать темный режим в вашем приложении. Поделитесь своими ценными отзывами.