Блог

Как и зачем создавать виджеты экрана блокировки в iOS 16 и усложнения для watchOS 9

Создавайте виджеты для экрана блокировки на iPhone и усложнения для циферблата Apple Watch и используйте их для повышения популярности ваших приложений.

На июньской конференции для разработчиков WWDC корпорация Apple представила долгожданные операционные системы iOS 16 и watchOS 9. Одним из крупных обновлений платформ стало появление дополнительных возможностей экрана блокировки на iPhone и циферблата Apple Watch. Теперь пользователи «яблочных» устройств могут кастомизировать циферблат часов, цвета установленной фотографии и добавлять полезные виджеты в стиле Apple Watch на экран блокировки смартфона.

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

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


О чем идёт речь


В операционных системах iOS 16 и watchOS 9 можно создавать виджеты в платформе WidgetKit для повышения охвата приложения. Виджеты отображаются на обновленном  экране блокировки на iPhone и циферблате  Apple Watch как полезное расширение. Они позволяют увидеть главную информацию из избранных приложений, не запуская их, и персонализировать домашний экран.

Расширения постоянно видны пользователям. С их помощью можно мгновенно просмотреть на экране актуальный и полезный контент и, если потребуется, перейти в приложение. 

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


В виджетах экрана блокировки и усложнений для Apple Watch используются WidgetKit и представление SwiftUI. 


Это позволяет:
  • обновлять код домашнего экрана iOS и представления «Сегодня» для поддержки виджетов экрана блокировки на iPhone,
  • создавать усложнения для приложения на watchOS в WidgetKit, заменять усложнения для ClockKit и обмениваться данными между приложениями на iOS и watchOS,
  • одновременно создавать усложнения для часов и виджеты для экрана блокировки,
  • добавлять поддержку iOS или watchOS в приложение и создавать виджеты или усложнения для Apple Watch.  

Подход к созданию виджетов экрана блокировки и усложнений для WidgetKit зависит от проекта. Изучите доступные варианты и тщательно спланируйте процессы разработки.
Больше информации о создании виджетов экрана блокировки и усложнений для watchOS вы получите, посмотрев сессии WWDC22  10050: Complications and widgets: Reloaded и 10051: Go further with complications in WidgetKit.

Обзор виджетов для экрана блокировки и усложнений WidgetKit


Виджеты экрана блокировки и усложнения для Apple Watch создаются с помощью платформы WidgetKit и SwiftUI. В iOS и watchOS используется большинство типов виджетов из WidgetFamily, как это показано в таблице:


О чем важно помнить при работе с виджетами для экрана блокировки и усложнениями в Apple Watch:

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

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

  • Отредактируйте конфиденциальную информацию. 
Экран блокировки iPhone и циферблат часов всегда на виду, и пользователи могут настраивать виджеты и расширения, чтобы скрыть конфиденциальные данные, если устройство заблокировано или поддерживает функцию Always On. Изучите данные, отображаемые в виджете или усложнении для часов, и убедитесь, что пользователи смогут отредактировать личные данные.

Создайте новое приложение, в котором есть виджеты и усложнения для Apple Watch


Если вы разрабатываете новое приложение, обеспечьте его доступность на iOS и watchOS и предусмотрите в нём создание виджетов для iOS и расширений для watchOS. Вы сможете сразу написать единую базу кода и снизить затраты на разработку в дальнейшем.


С чего начать:
  1. Запустите Xcode и создайте в нём новый проект.
  2. Используйте шаблон приложения для watchOS и выберите Watch App with New Companion iOS App на странице “Выберите параметры для нового проекта”.
  3. Добавьте к таргетам проекта новое расширение для watchOS.
  4. Добавьте новое расширение виджета iOS к таргетам вашего проекта.
Добавьте код для приложений на iOS и watchOS, а далее с помощью SwiftUI и платформы WidgetKit одновременно создайте виджеты для iOS, включая виджеты для экрана блокировки и усложнения для watchOS.

Узнать больше о разработке виджетов и приложений с SwiftUI можно из материала Creating a Widget Extension и SwiftUI. Также вы можете посмотреть статью о разработке приложений для watchOS.


Добавьте виджеты для экрана блокировки в существующее приложение на iOS


Если ваше приложение на iOS app поддерживает виджеты для отображения на домашнем экране или в представлении «Сегодня», обеспечьте поддержку виджетов для экрана блокировки, добавив подходящее семейство в заявленный список поддерживаемых виджетов из supportedFamilies(_:) или supportedFamilies(_:) API.

Если вы не используете виджеты в приложении, добавьте расширение виджета в ваше приложение и его поддержку для экрана блокировки изначально. Как это сделать, описано в этой статье.  

Рассмотрите возможность обеспечить поддержку работы watchOS с усложнениями WidgetKit, добавив в watchOS таргет приложения и таргет расширения виджета.

Подробнее об этом рассказано в разделе watchOS Apps.

Добавьте усложнения для WidgetKit в

приложение на watchOS 


Если в вашем действующем приложении на watchOS отсутствуют усложнения, добавьте расширение виджета на watchOS в ваш проект на Xcode и создайте усложнения через платформу WidgetKit. Больше информации об этом доступно здесь: Creating a Widget Extension.

Если ваше приложение для watchOS имеет усложнения для ClockKit, продолжайте использовать их для поддержки watchOS 8 и более ранних версий. Запланируйте перенос усложнений для ClockKit в WidgetKit, как это описано в статье Migrating ClockKit complications to WidgetKit.

Обратите внимание, что, как только вы создаете усложнение на основе виджетов, система перестает вызывать API ClockKit. Например, он больше не вызывает методы объекта CLKComplicationDataSource для запроса данных временной шкалы. При этом система может по-прежнему отправлять запросы на перенос данных в вашу базу данных.

Также вы можете подумать о том, чтобы добавить таргет  iOS-проект в ваш проект на Xcode, если ваше приложение на watchOS не сопровождается аналогичным для iOS.

Укажите поддерживаемые семейства виджетов


Добавьте расширение для виджета и код, позволяющий указать, какие виджеты поддерживаются в приложении. Если приложение работает на нескольких платформах, убедитесь, что во всех случаях указаны поддерживаемые семейства виджетов. Следующий пример из раздела Adding widgets to the Lock Screen and watch faces показывает, как вы можете указать поддержку определенных семейств виджетов на экране блокировки iOS и циферблате часов в watchOS. 

Приложение поддерживает WidgetFamily.accessoryRectangular и WidgetFamily.accessoryRectangular одновременно в watchOS и iOS, усложнения WidgetFamily.accessoryCorner в watchOS, WidgetFamily.systemSmall и WidgetFamily.systemMedium виджеты на iOS. Используйте макрос #if os(watchOS), чтобы гарантированно указать поддерживаемые семейства виджетов для каждой платформы.


Создание представлений для дополнительных виджетов


Разработка виджетов для экрана блокировки и усложнений для WidgetKit происходит также, как создание виджетов для домашнего экрана, представления «Сегодня» или Центра уведомлений macOS. В следующем примере вы можете увидеть сокращенный фрагмент кода из раздела Adding widgets to the Lock Screen and watch faces. В нем используется значение среды widgetFamily, которое позволяет SwiftUI обеспечить правильное представление для каждого семейства виджетов. 

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

Убедитесь, что текст виджета не занимает много места



Виджеты экрана блокировки и уведомления расширений для часов имеют меньший размер, чем виджеты домашнего экрана. Обратите внимание на объем текста на экране.

Настройте API SwiftUI sizeThatFits(_:) и масштабируйте текст, чтобы он компактно размещался на доступном пространстве. 

Если вы используете виджет WidgetFamily.accessoryInline, он может включать изображение и текст. Количество символов зависит от контекста, в котором появляется виджет. В Apple Watch размер встроенного расширения зависит от размера циферблата. Используйте sizeThatFits(_:), чтобы убедиться, что текст масштабируется корректно.

Протестируйте новые виджеты на каждом языке,  поддерживаемом в приложении. Особенно это касается языков, в которых много символов, например, немецкого языка.

Обеспечьте поддержку виджетов в разных режимах визуализации данных


В виджетах, добавляемых пользователями на домашний экран, в представление «Сегодня» или в Центр уведомлений macOS, обычно используются яркие цвета и насыщенные изображения. Это позволяет обратить внимание на бренды и побудить людей использовать ваши решения на личных устройствах. На контрасте с этим для виджетов экрана блокировки и усложнений в WidgetKit применяются сдержанные цвета. Виджеты меньше по размеру и всегда находятся в центре внимания пользователя.
Платформа WidgetKit поддерживает три режима визуализации:

1.vibrant (яркий)
iOS обесцвечивает текст, изображения и датчики для экрана блокировки, превращая их в монохромный. Создает яркий эффект, окрашивая содержимое соответственно фону экрана блокировки. Также пользователи могут выбрать для экрана блокировки определенный цвет.

2. fullColor (полноцветный)
WidgetKit не позволяет изменить цвет представления расширений в этом режиме. Здесь используются градиентные и полноцветные изображения, текст и датчики. Этот режим недоступен для виджетов блокировки экрана на iPhone.

3. accented (акцентный)
Когда пользователь настраивает часы, чтобы использовать определенный цвет экрана блокировки или конкретный циферблат, WidgetKit отображает усложнения в режиме цветового акцента. В watchOS иерархия представлений для виджета включает в себя группу акцентного цвета и цветовую группу по умолчанию (предустановленные цвета). В каждой группе применяется сплошной цвет. 
Используйте модификатор представления .widgetAccentable(), чтобы сгруппировать представления по группам цветовых акцентов. Обратите внимание, что этот режим отображения недоступен на платформе iOS.
Примечание
Гайд для дизайнеров об использовании цвета в усложнениях для часов можно найти в разделе Complications в HIG (документе Human Interface Guidelines).
Общие рекомендации по проектированию виджетов доступны в тематическом разделе Human Interface Guidelines.


Изучите значение среды widgetRenderingMode в коде, чтобы создать представление SwiftUI для каждого из режимов визуализации, как в примере:


Если вы создаете усложнения для приложения на watchOS, убедитесь, что используете значение среды SwiftU LuminanceReduced environment, чтобы виджеты выглядели хорошо как в обычных условиях, так и при пониженной яркости экрана.

Установите постоянный цвет фона


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


Обеспечьте защиту конфиденциальных данных


Виджеты для экрана блокировки и усложнения для watchOS всегда на виду. Изучите информацию, отображаемую через виджет, и скройте конфиденциальные данные, которые будут показываться при блокировке устройства или показе контента с низкой яркостью на Apple Watch. Почитать об этом можно здесь: Display a Placeholder Widget and Hide Sensitive Data.

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

  1. максимальное легкое взаимодействие. Информация должна просматриваться просто и быстро и зависеть от контекста, в котором находится владелец смартфона или часов.  Помните, что длительность взаимодействия с часами и экраном блокировки зачастую не превышает пары секунд.
  2. Информация на виджете должна регулярно обновляться, а не быть статичной, иначе пользователи потеряют интерес.
  3. Нужно понять, что является полезным в вашем приложении, и вынести эту информацию на виджет. Он отображает главную идею, а не просто переводит пользователей в приложение. Ответьте себе на вопрос: чего хотят пользователи, открывая мое приложение?
  4. Помните об ограниченном пространстве экрана смартфона или циферблата часов и создайте виджеты разных размеров. Величина виджета влияет на объём текста, показываемого пользователю.
  5. Виджет не должен быть тяжеловесным, иначе возникнут проблемы с его использованием. Почитайте рекомендации по ограничениям объёма памяти, занимаемой виджетом.
  6. Виджет должен создаваться с учетом гайдлайнов Apple.


Возможность кастомизировать экран блокировки  для iPhone и выбрать подходящие усложнения для Apple Watch создаст больше возможностей персонализации личных устройств для пользователей. 

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