Улучшенная поддержка темной темы с 1.15.3.0
Entry posted by Yaroslav Brovin in Общая
1,513 views
Добрый день, уважаемые разработчики.
В этой статье мы поговорим о поддержке темной темы в FGX Native приложении, о том, как ее добавить, как сделать автоматическое переключение и о том, что добавлено в 1.15.3.0 в этой области.
Введение
Тема - это набор цветов и способов отрисовки компонентов. В светлой теме метка использует черный цвет текста и светлый фон, а в темной теме - наоборот, белый текст на темном фоне. Используя это правило, несложно настроить параметры отображения компонентов так, чтобы добавить темную тему.
Для того, чтобы добавить темную тему буквально в один клик, мы предлагаем генератор темной темы в дизайнере ресурсов (Project -> FGX Assets Manager).
Выбрав темный тип темы, дизайнер автоматически создаст базовые цвета, используемые в компонентах FGX Native, для темной темы. Позже вы можете их подстроить под себя и под свой дизайн.
Дальше данные цвета используются по умолчанию в свойствах компонентах. Такие значения мы выводим бледным цветом, показывая, что значение берется по умолчанию из ресурса темы с указанным именем.
Далее, если вы хотите использовать темную тему в вашем приложении, вы указываете ее название (имя, которое вы задали в дизайнере ассетов) в настройках формы через свойство ThemeName.
Если вы хотите переключиться на светлую тему, то либо создаете аналогично отдельно светлую тему или же просто убираете присваивание темной темы для формы. И все казалось бы выглядит отлично. Однако, есть нюансы. И их здесь два:
- Не все нативные компоненты предоставляют настройки, при помощи которых можно полностью подстроить отображение компонента под темную тему.
- Нет возможности выполнить автоматическое переключение темы на основании системной темы.
Если с настройками цвета текста все просто и очевидно, то с отрисовкой не все так однозначно. Операционная система самостоятельно рисует свои родные компоненты и умеет их отображать в зависимости от текущей системной темы. Сравните два скриншота окна выбора даты для темной и светлой темы.
Если у кнопок и у меток вы можете поменять цвет шрифта, то с самим барабаном возникают вопросы, так как iOS не дает возможности для изменения цвета. А значит вы не можете его корректно отобразить только при помощи цветов в FGX Native. И даже если вы примените темную тему FGX Native барабан у вас будет или с темным текстом или же он будет светлый для светлой темы, в результате чего стилизация будет некорректной.
Темная тема на уровне системы
Темная тема появилась в операционных системах довольно недавно, а значит возникает вопрос, а что делать с поддержкой темной темы в старых приложениях, которые не обновляются? И тут в iOS/Android поступают немного по разному.
iOS
Все новые приложения для iOS, которые нацелены на свежие версии iOS, где была уже добавлена тема, автоматически получают поддержку темной темы. Это значит, что система при старте приложения автоматически рисует нативный компонент согласно текущей системной темы приложения и также выбирает соответствующие системные цвета.
Если разработчик не готов или не хочет использовать темную тему, то он явно указывает в настройках проекта UIUserInterfaceStyle = light. В этом случае, iOS рисует родные компоненты в светлой теме и игнорирует темную тему. Мы используем этот режим в FGX Native, так как у нас не было полноценной поддержки темной темы. Поэтому все приложения FGX Native содержат этот флаг:
Android
Поддержка темной темы в Android более сложная. Она чем-то похожа на iOS, за исключением того, что некоторые производители Android устройств добавляют "свою" поддержку темной темы для старых версий. Например MIUI. В этом случае, производитель автоматом принудительно пытается применить темную тему и вычислить цвета на основании текущих (сделать их автоматический реверс). В результате кто-то из вас мог столкнуться с некорректным отображением приложения. Чтобы избежать этого мы принудительно отключаем все подобные попытки при помощи специального атрибута в стиле андроид приложения
<!-- MIUI automatically recolors UI in dark mode, it uses emulation mode. --> <item name="android:forceDarkAllowed">false</item>
Выбор же темной темы в Android приложения строится на основании используемой темы приложения в файле styles.xml. По причинам отсутствия полноценной поддержки темной темы, мы так же используем строго светлую тему для Android приложения
<!-- Basic theme for all Android versions --> <style name="BaseAppTheme" parent="Theme.AppCompat.Light">
Как добавить темную тему в FGX Native?
Добавление темной темы состоит из нескольких шагов:
1. Разрешаем FGX Native приложению автоматически использовать темную системную тему (Важно! FGX Native приложения не включают темную тему по умолчанию, поэтому требуется делать этот шаг).
- iOS: Удаляем ключ UIUserInterfaceStyle из настроек проекта: Project -> Options -> Version Info (для iOS конфигураций)
-
Android: Меняем базовую тему в файле styles.xml (расположен в корне вашего приложения) cо значения "Theme.AppCompat.Light" на "Theme.MaterialComponents.DayNight"
<style name="BaseAppTheme" parent="Theme.MaterialComponents.DayNight">
Эти правки позволят приложению автоматически менять отрисовки нативных компонентов при смене системной темы.
2. Добавляем светлую/темную темы в FGX Native через дизайнер ресурсов при помощи генератора тем:
3. Отлавливаем изменение системной темы и применяем к форме тему из ресурсов. Для этого используем новое событие TfgForm.OnSystemAppearanceChanged, которое содержит параметры текущей системной темы и которое вызывается каждый раз при смене системной темы.
procedure TFormMain.fgFormSystemThemeChanged(Sender: TObject; const AAppearance: TfgSystemAppearance);
begin
case AAppearance.ThemeKind of
TfgSystemThemeKind.Dark:
ThemeName := 'Theme Dark';
TfgSystemThemeKind.Light:
ThemeName := 'Theme Light';
end;
end;
Для того, чтобы при старте не накатывать тему из ресурсов еще раз, мы автоматически вызываем это событие каждый раз при открытии формы. Это позволяет ограничиться заданием темы только в данном обработчике.
Если по каким-то соображениям, вы хотите узнать параметры системной темы, вы можете это сделать при помощи нового свойства FGX.SystemInfo.TfgSystemInfo.Appearance.
Результат работы представлен ниже:
Планы на будущее
В будущем мы будем стараться упростить этот процесс, чтобы темная тема на стороне FGX Native создавалась автоматически, если разработчик не использует темы в своем приложении, и она автоматически переключалась при смене системной темы.
-
5
-
3
1 Comment
Recommended Comments