Apple продолжает радовать нас с каждым обновлением iOS, и iOS 18 не стала исключением. В новой версии системы появилась возможность кастомизации иконок и виджетов на домашнем экране. Пользователи могут сделать их тёмными или перекрасить в любимый цвет.

Для пользователей это настоящая находка в плане персонализации своего iPhone. Но что насчёт разработчиков, которым приходится оперативно адаптировать свои приложения к новому API? В этой статье я расскажу, как команда Clover подготовила виджеты под iOS 18, которые после обновления системы вдруг перестали выглядеть привлекательно.

Трудности с тонированием виджетов

Виджеты приложения, собранного в Xcode 15, система тонирует самостоятельно. Фон выкрашенный в цвет корректно заменяется на чёрный с градиентом, а все цветные элементы принимают оттенок, выбранный пользователем. При этом виджеты не становятся монохромными. Если вы используете изображения для фонова, вероятно, виджет будет выглядеть не так удачно.

После обновления Xcode мы заметили, что наши виджеты перестали быть читаемыми при выборе оттенка. Все элементы, расположенные в виджете, система окрасила в белый цвет.

Пример виджетов до и после обновления на Xcodе 16

В iOS 18 все элементы виджета при отображении в акцентном режиме распределяются по двум группам. Первая группа default — отображается с альфа-каналом (белым цветом с прозрачностью). Вторая группа accentedтонирует альфа-канал в выбранный пользователем цвет. После обновления все элементы нашего виджета попали в дефолтную группу и стали белыми 😨

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

Итак, после перехода на новое окружение Apple не оставляет нам выбора: мы должны определить, как системе следует работать с цветами элементов виджета. Если вы уже следуете гайдлайнам Apple, это может не потребовать больших усилий, и этот материал поможет справиться с задачей самостоятельно без значительных изменений. Однако если ваши виджеты такие же многоцветные, как в Clover, придется подготовить новый монохромный вид виджета.

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

Apple предоставляет несколько инструментов для работы с тонированием:

Модификатор для View, указывающий необходимость акцентирования: widgetAccentable(_:)
Рекомендуется акцентировать важную и актуальную информацию. Например, выделять текущий день, ближайшее событие или отслеживаемый параметр.
Определение текущего режима отображения виджета: widgetRenderingMode
Позволяет гибко подбирать цвета и иконки под текущее отображение. К примеру, можно выбрать альтернативный цвет, если полноцветная версия не должна содержать альфа-канал, в отличие от монохромной.
Настройка тонирования для изображений: widgetAccentedRenderingMode(_:)
При использовании изображений в виджете (например, обложек контента или фотографий) можно запретить системе применять к ним тонирование или указать конкретный способ его применения.
На примере системных виджетов понимаем, что то что раньше имело свой уникальный цвет – утрачивает его при тонировании. При этом изображения можно оставить в полноцветном виде

Группы для акцентирования

По-умолчанию все элементы виджета не акцентируются, именно по этому в нашем примере номера дней в календаре слились с фоном выделенных групп в календаре.

Для того чтобы система начала применять акцентирование, необходимо указать какие именно элементы нужно выделить цветом, выставив модификатор widgetAccentable(_:). Главное — правильно определить, какие элементы тонировать, а какие оставить нетронутыми 😀

Применение widgetAccentable() помещает саму view и все её дочерние элементы в группу для акцентирования, а widgetAccentable(false) — в группу для отображения белым цветом с альфа-каналом.

Circle()
    .fill(model.isCurrent ? .white : .clear)
    // No need for widgetAccentable(false) as it's not accentable by default

Text("21")
    .font(.system(size: 15))
    .foregroundColor(model.isCurrent ? .black : .white)
    .widgetAccentable(model.isCurrent) // Accent only the current day

Совет: располагайте модификатор widgetAccentable() как можно ближе к элементу, который нужно акцентировать. Применение widgetAccentable(false) к его внутренним элементам не будет иметь эффекта.

Управление ресурсами с помощью widgetRenderingMode

Apple предоставляет свойство окружения WidgetRenderingMode. Это свойство помогает узнать, как система показывает виджет — в режиме полноцветного отображения (fullColor) или в режиме одноцветной тонировки (vibrant, accented).

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

struct PeridoDayView: View {
  @Environment(\\.widgetRenderingMode) 
  private var widgetRenderingMode
    
  var body: some View {
    DayRangeView()
      .foregroundStyle(
        widgetRenderingMode == .fullColor ? .periodColor : .white60Color
      )
  }
}

В Clover виджеты были разработаны еще в 2020 году и с тех пор не обновлялись. Тогда мы просто использовали ту же палитру и способ отображения календаря, что и в основном приложении. Цвета должны были отображать разные фазы менструального цикла, но теперь нам нужно как-то сделать их монохромными 😤 и при этом понятными для наших пользовательниц 🤯🤯

В нашем случае мы решили пересобрать виджет, используя различные уровни прозрачности для элементов. К традиционным цветам мы добавили их белые альтернативы с разной степенью прозрачности: 20%, 30%, 60% и 100%.

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

Поддержка тонирования для изображений

Если в вашем виджете используются изображения, вам пригодится модификатор widgetAccentedRenderingMode(_:). Он применим к Image начиная с iOS 18. Когда виджет отображается в акцентном режиме, система использует установленное правило:

accented — помещает изображение в группу тонируемых элементов. Оно будет показано в своих цветах, но с наложением акцентного цвета поверх;
accentedDesaturated — обесцвечивает изображение и применяет акцентный цвет;
desaturated — преобразует изображение в черно-белое;
fullColor— оставляет изображение в его исходном полноцветном варианте без применения тонирования.

Image("userAvatar")
	.resizable()
    .widgetAccentedRenderingMode(.fullColor)

Очевидно, что полноцветные изображения подходят для ситуаций, когда важно сохранить узнаваемость объектов: обложки альбомов, изображения товаров или аватары пользователей. Обесцвеченные черно-белые изображения отлично смотрятся в качестве фона виджета, как это реализовано в приложении Photos. На мой взгляд, акцентные варианты стоит использовать во всех остальных случаях, когда информация с изображения хорошо считывается и без сохранения цвета.

Пример тонирования изображений в системных виджетах

Ключевые советы:

Проверьте отображение виджетов при сборке из разных версий Xcode.
Создайте монохромные макеты виджета — это поможет выделить наиболее важные элементы для акцентирования.
Установите насыщенность accent tint на устройстве в ноль: в полностью монохромном виджете легче обнаружить ошибки наложения элементов из групп default и accented.
Избегайте использования цветов для передачи информации — её будет сложно интерпретировать при изменении акцентного цвета.

Заключение

Адаптация виджетов под новые требования iOS 18 — непростая задача, особенно если изначально отступили от гайдлайнов Apple. Тем не менее, следуя рекомендациям, вы сможете сделать свои виджеты столь же стильными и современными, как и виджеты от самой Apple.

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

Дополнительные материалы:

Gist с примерами из текста
widgetAccentable(_:)
WidgetRenderingMode
WidgetAccentedRenderingMode и widgetAccentedRenderingMode(_:)
Apple Human Interface Guidelines: Акцентированные виджеты
Библиотека системных виджетов iOS 18 в Figma Community

Виджеты iOS 18: добавляем поддержку tint color