Build Your First iOS Widget — Part 1
During WWDC 2020, Apple announced the introduction of app widgets for iOS (as well as iPadOS and MacOS). With the new WidgetKit framework, you can build widgets that can be added to your home screen to let you see important information at a glance. While you may be familiar with widgets in other operating systems, they are a completely new addition to iOS, and developers are already starting to build very exciting widgets using WidgetKit.
So let’s go ahead and build a new widget. We’re going to create a simple app I like to call Emojibook; this app will display a list of emoji along with their names, as well as more details about the emoji whenever one of them is tapped. We will create a widget that you can add to your homescreen to display an emoji, which will be updated randomly every hour or so.
Note: You’ll need Xcode 12 Beta 2 or higher to follow this tutorial.
This is what our app will look like:
Simple List-based App
Let’s start by building our simple list-based app. Open up Xcode and create a new iOS App project called Emojibook; make sure SwiftUI is selected in the Interface options and SwiftUI App is selected in the Life Cycle options.
Most of our code will be in ContentView.swift , which we will rename to have a more descriptive name. Change the name of this file to EmojibookListView.swift , and rename the ContentView struct to EmojibookListView , making sure to update its usage wherever it’s necessary (see my Xcode tricks article to learn how to do this with one click).
In the body section of EmojibookListView we will add the content of our app. We will embed the content in a NavigationView , and inside it we will add a List , inside our List we will add…
Как создавать собственные виджеты на iPhone с помощью приложения Widgetsmith
С выходом iOS 14 Apple значительно расширила функционал виджетов на iPhone, а также разрешила создавать собственные темы оформления. Это послужило стремительному наполнению App Store сторонними приложениями, которые помогают пользователям кастомизировать главный экран iOS. В этом материале мы расскажем об одном таком приложении – Widgetsmith. Данная разработка значительно упрощает создание собственных виджетов на iPhone.
Приложение Widgetsmith создана Дэвидом Смитом, разработчиком нескольких популярных приложений для Apple Watch и iPhone, включая Watchsmith, Sleep++ и Pedometer++. Концепция программы Widgetsmith заключается в том, что она позволяет создавать настраиваемые и персонализированные виджеты для домашнего экрана iOS 14. При этом приложение еще и активно обновляется – появляются дополнительные опции, иконки и т.д. С ее помощью можно раскрасить виджеты в соответствии с вашими предпочтениями. Как это работает?
Видео:
Как с помощью Widgetsmith настроить виджеты для домашнего экрана iPhone и iPad в iOS 14
На главном экране приложения Widgetsmith (ссылка для скачивания) на вкладке Widgets предлагаются на выбор три различных размера виджетов: маленький, средний и большой. Каждый виджет может отображать различную информацию и настраиваться с использованием различных стилей и цветов шрифтов, оттенков и цветов фона.
Сам процесс невероятно прост.
1. Нажмите кнопку «Add Widget» для нужного вам размера виджета.
2. Нажмите на виджет для его настройки.
3. Выберите какого рода информацию вы хотите видеть на главном экране. Вот источники данных, доступные в Widgetsmith (ниже мы привели несколько примеров для добавления виджетов):
- Время
- Дата
- Пользовательские: фото, фотографии в альбоме.
- Пользовательские: текст, бланк
- Календарь
- Напоминания
- Погода (платно по подписке)
- Здоровье и активность
- Приливы (платно по подписке)
- Астрономия
В пределах каждого типа данных есть немало вариантов для типа отображения этой информации. Важную роль играют дополнительные параметры настройки, в том числе стиль и цвет шрифта, цвет фона. Результат можно получить как красочный и эстетичный, так и максимально информативный.
4. После того, как вы создали виджет для главного экрана iOS 14 в приложении Widgetsmith, вы можете вернуться на главный экран, нажать и удерживать палец для включения режима покачивания иконок, а затем нажать значок «+» в верхнем левом углу.
5. Найдите Widgetsmith в списке приложений, затем выберите размер созданного вами виджета и нажмите кнопку «Добавить виджет».
6. После этого на главный экран iOS будет добавлен виджет от Widgetsmith.
На главном экране iOS 14 вы можете использовать столько виджетов от Widgetsmith, сколько захотите. После того, как вы добавите элемент Widgetsmith нужного вам размера на главный экран, нажмите на него пальцем и удерживайте, затем выберите «Изменить виджет».
7. В появившемся меню выберите вариант «Widget».
Это позволит вам выбрать один из нескольких дизайнов, уже созданных в приложении Widgetsmith. Фактически, каждый виджет домашнего экрана iOS при желании может быть получен от Widgetsmith.
Widgetsmith также поддерживает временные виджеты, которые позволяют заменять виджет на главном экране в определенное время суток. Например, вы можете отображать текущую дату до окончания рабочего дня, а затем заставить Widgetsmith автоматически изменить виджет и показывать дела в календаре на следующий день.
8. Для удаления ненужного виджета в приложении Widgetsmith, проведите пальцем справа налево по выбранному и нажмите красную кнопку «Delete».
Как поставить большие красивые виджеты в iOS 14
Операционная система iOS 14 позволяет устанавливать виджеты в любом месте рабочего стола. Следует отметить, что раньше похожие виджеты были привилегией смартфонов на Android. Мы расскажем, как виджеты работают в iPhone и зачем это нужно.
Какие модели поддерживают виджеты
Чтобы пользоваться виджетами, не придется устанавливать дополнительные программы. Главное условие — это наличие iOS 14.0 и выше.
На данный момент операционную систему iOS 14.0 поддерживают следующие модели:
iPhone 6s
iPhone 6s Plus
iPhone SE
iPhone SE 2
iPhone 7
iPhone 7 Plus
iPhone 8
iPhone 8 Plus
iPhone X
iPhone XR
iPhone Xs
iPhone Xs Max
iPhone 11
iPhone 11 Pro
iPhone 11 Pro Max
iPhone 12
iPhone 12 Pro
iPhone 12 Pro Max
Чтобы узнать, какая операционная система у вас установлена, нужно зайти в настройки и выбрать пункт «Основные». Далее перейдите в пункт «Об этом устройстве». Затем кликните по «Версия ПО».
Если ваша версия iOS ниже версии 14.0, и вы хотите обновиться, нужно вернуться в пункт «Основные» и выбрать там «Обновление ПО». Смартфон проверит наличие актуальной версии. Для установки нужно выбрать пункт «Загрузить и установить», при этом загрузка обновления доступна только по Wi-Fi.
Добавление виджетов на рабочий стол
Теперь вам доступны различные виджеты приложений, но их придется настроить. На главном рабочем экране нужно войти в меню виджетов свайпом вправо. Меню виджетов было доступно пользователю и ранее, однако с iOS 14.0 можно добавлять виджеты не только в само меню, но на другие экраны рабочего стола. Для этого нужно спуститься вниз и нажать «Изменить». В верхней части экрана появится значок «плюс».
Добавление виджетов доступно и через любой экран рабочего стола. Нужно вызвать «плюс» долгим нажатием на иконку приложения или пустую область рабочего стола, после чего он появится в верхней части экрана.
На экране появятся доступные виджеты. Кроме того, их можно искать как через поиск, так и по списку.
Настройка виджетов
Устанавливая виджет, выберите один из трех размеров. Так, на рабочий стол поместится шесть маленьких или три средних виджета. Если выбрать самый большой размер, то на экран рабочего стола поместится всего один такой виджет, но останется дополнительное место, куда можно вставить еще один средний или два маленьких виджета.
Виджеты можно комбинировать в удобном для вас размере и порядке размещения. Если перетянуть один виджет на другой, создается стопка. Она призвана освободить место на экране. В стопке можно разместить до 10 виджетов. Приложения можно объединять также в смарт-стопках или виджетах быстрого просмотра, но об этом расскажем позже.
Установив виджет, вы можете его перемещать, удалять или изменять настройки. Для этого нужно вызвать настройки долгим нажатием. Меню откроется, если настройки в принципе доступны для этого виджета.
Более того, пока далеко не все приложения поддерживают установку самих виджетов. Чтобы проверить, возможно ли это, надо обновить приложения в App Store. Чем популярнее приложение, тем выше вероятность, что для него уже выпустили или в ближайшее время выпустят обновление, поддерживающее виджеты. Так, например, сделали в недавнем обновлении для Telegram Messenger.
В Telegram Messenger доступны два разных виджета среднего размера. Первый покажет два телеграмм-канала, выбранных вами. Лента будет обновляться динамически.
Во втором случае на экране покажут восемь иконок телеграм-каналов или контактов, выбранных вами.
Возможности виджетов
Виджет Смарт-стопка
Позволяет объединить до десяти различных приложений в одном виджете. На количество добавленных приложений указывают точки, которые появляются сбоку при пролистывании виджетов на экране. Можно выбрать один из трех размеров.
Переключение между приложениями внутри смарт-стопки происходит как свайпом, так и в автоматическом режиме: смарт-стопка умеет автоматически показывать информацию, которая будет наиболее актуальна для владельца смартфона в определенное время. Интеллектуальными функциями также наделен виджет «Предложения Siri». Он предложит действия в соответствии с вашим обычным распорядком дня. При этом выполнить действие можно, не открывая приложение, а лишь коснувшись виджета.
Чтобы изменить настройки «Смарт-стопки», вызовите меню долгим нажатием на виджет. Можно отключить автоматическое переключение между приложениями, отсортировать их в нужном порядке, а также удалить или добавить приложение.
Дополнительно можно настроить виджеты быстрого просмотра. Они будут отображаться, если провести по экрану вправо. Туда можно вынести самые востребованные приложения. Делается это просто: нажмите на «Изменить», выберите из списка виджетов нужный и добавьте его на экран. Изменить порядок можно, просто перетаскивая их.
Виджет «Погода»
В зависимости от настроек покажет прогноз на ближайшие несколько часов или дней. Информация будет отображаться на экране, поэтому не понадобится каждый раз открывать само приложение.
Виджет «Напоминания»
Дает быстрый доступ к одному из списков ваших напоминаний. Например, можно вывести на экран планы на день.
Виджет «Галерея фотографий»
Выводит на дисплей фотографии пользователя. Изображение будет меняться раз в час, однако нельзя указать, какие именно фото покажет виджет. Они будут выводиться случайным образом. Если вас не устраивает такой вариант, выход только один — воспользоваться другим приложением. Они уже выложены в App Store.
iOS позволяет не только использовать готовые виджеты, но и создавать собственные. Для этого загрузите из App Store специальные приложения. Например, Widgetsmith, Color Widgets или Apple Shortcuts. В результате вы сможете кастомизировать размеры виджетов, изменять цвет, шрифт и другие настройки. Например, один и тот же виджет может показывать утром прогноз погоды, в течение рабочего дня переключиться на календарь, а вечером отобразить прогресс активности.
Для планшетов iPad и операционной системы iPadOS 14.0 существуют свои виджеты. Но имеются ограничения по размещению виджетов: они ограничены боковой панелью «Сегодня». Туда можно добавить собственные виджеты и удалить то, что не востребовано. Для этого нажмите и удерживайте виджет или пустое пространство. Когда приложения начнут покачиваться, в верхнем левом углу появится кнопка «Добавить». Выберите виджет и его размер, а затем нажмите «Готово».
Виджеты — это способ упростить работу с приложениями и сделать экран смартфона более красивым и удобным, настроив его конкретно под вас.
Делаем свой Widget в iOS 14
В iOS 14 и macOS 11 Apple представили Widgets. Еще один способ взаимодействия пользователя с приложением. В данной статье рассмотрим основные принципы работы WidgetKit и интегрируем свой Widget в готовый проект.
Введение
Что такое Widget?
Widget показывает главную информацию вашего приложения, без открытия самого приложения. Так же виджеты помогают сделать ваш домашний экран более персонализированным.
Widgets галерея
Пользователи могут найти виджеты в галерее виджетов, там же они могут выбрать размер для виджета. Всего есть 3 размера для виджетов: small, medium и large.
Для того чтобы добавить виджет на экран нужно войти в режим редактирования домашнего экрана и нажать на плюсик в верхнем левом углу, откроется галерея, где будут представлены виджеты приложений, но только от тех приложений, которые их поддерживают. При нажатии на конкретный виджет можно будет выбрать его тип и его размер, например приложение Stocks имеет 2 типа виджетов Watchlist и Symbol, причем для Watchlist представлены все 3 размера, а для Symbol только один.
Основные принципы
Главное предназначение виджета это показать небольшой объем информации пользователю, актуальной в данный момент времени. Определение этого одного предназначение является первым шагом для построения хорошего пользовательского опыта. Поэтому основные принципы включают в себя
- Придерживайтесь одной идеи. Главная идея вашего приложения должна быть отображена в вашем виджете. Например приложение Weather может показывать погоду для одной локации, приложение Stocks последние котировки акций.
- Для каждого размера показывайте только ту информацию, которая прямо относится к вашей идее. Для Stocks это может быть отображение только 3-х акций для маленького размера с указанием только названия и цены, а для большого размера это будет отображение более 5 акций с более детальной информации по ним.
- Не создавайте виджет, который ничего не делает, а только открывает приложение. Пользователь ожидает возможность просмотра важной информации без открытия приложения.
- Сделайте поддержку нескольких размеров, это улучшит пользовательский опыт. Реализация одного маленького размера приведет к тому, что на бОльших размерах много свободного пространства будет не задействовано, что не придает привлекательности приложению.
- Информация показанная на виджете должна меняться в течении дня. Если информация будет статичной или будет меняться очень редко, то будет ли польза от такого виджета? Поэтому важно чтобы информация менялась в течении дня, для приложения Calendar это будут предстоящие митинги, для Weather текущая погода.
Конфигурация виджета
- Позвольте пользователю конфигурировать виджет, когда это имеет смысл. Например для Weather можно выбрать город, откуда будет показываться погода, для Stocks доступен выбор акции, котировки который вы хотите мониторить.
- Когда нажимаете на виджет, убедитесь что открывается нужный экран приложения. Если нажали на пару USD/RUB в Stocks от должен открыться экран с детальной информацией по этой паре, а не какая-то другая.
- Избегайте большого количества нажимаемых элементов на виджете. Можно иметь несколько элементов на которые можно нажать, но тут надо быть аккуратным, чтобы у пользователя не возникло проблем с попаданием пальцем на нужный элемент виджета.
- Дайте пользователю понять, что будучи залогиненным он получит больше информации. Для приложения по бронированию билетов или отелей, аутентификация пользователя в системе предоставляет ему больше информации, например номер брони, QR-код и многое другое.
Обновление виджета
- Поддерживайте обновленное состояние вашего виджета. Для того чтобы информация на виджете оставалась актуальной, его нужно периодически обновлять. Виджеты не поддерживают обновление в режиме реального времени, так же система может ограничить вас в частоте обновления виджета. Поэтому нужно подойти к этому вопросы с осторожностью, например приложение Почта России может обновлять статус посылки раз в час или в два, этого будет достаточно, а вот приложению для трейдинга обновление раз в час может быть недостаточно и нужно будет обновляться чаще.
- Позвольте системе обновлять даты и время в вашем виджете. Частота обновления виджета ограничена и поэтому переложите обязанность обновления даты и времени системе.
- Показывайте контент быстро. Когда вы определяете частоту обновления контента, помните, что вам не обязательно прятать устаревшие данные за каким-то плейсхолдером, лучшее показать что-то старое, чем какой-то пустой скелетон.
Дизайн виджета
Пройдемся кратко по дизайну.
- Если необходимо, то отобразите название или логотип вашего приложения через цвет, текст или картинку . Сделайте так, что контент виджета и брэндинг не мешались друг другу, зачастую это и не нужно, потому что название вашего приложения отображается под виджетом.
- Поддерживайте баланс плотности информации. Если на виджете будет мало информации, то тогда возникнет вопрос в необходимости иметь этот виджет, если будет слишком много информации, то пользователю будет сложно в ней ориентироваться и ее воспринимать.
- Используйте цвета разумно. Насыщенные, яркие цвета привлекают внимание пользователей, но тут нужно не перестараться, а просто придерживаться цветовой палитры приложения.
- Поддержка темной темы. Виджет должен выглядеть соответствующе на темной и светлой темах.
- Рассмотрите использование шрифта SF Pro. Согласитесь, что приятно, когда все виджеты на домашнем экране имеют одинаковый шрифт, а не когда у каждого свой.
- Используйте текстовые элементы в виджете. Убедитесь, что текст масштабируется нормально, не растрируйте его, иначе это приведет к проблем с VoiceOver.
- Проектируйте реалистичную превьюшку для отображения в галерее виджетов. Покажите какими возможностями обладает этот виджет, вы так же можете отобразить реальные данные здесь, но если загрузка этих данных занимает много времени, то может просто заменить моками.
- Используйте скелетоны, чтобы дать понять пользователю структуру виджета. Виджет показывает скелетон, когда данные все еще загружаются.
- Напишите короткое, но емкое описание для виджета. В Галереи виджетов есть описание для каждого виджета, что именно он делает. Рекомендуется начинать это писание с глагола, например «Следить за предстоящими митингами», «Посмотреть погоду в указанной местности» и т.д.
Поддержка различных размеров экранов
Виджеты масштабируются к размеру экрана на различных устройствах, начиная с iPhone 6s заканчивая iPhone 11 Pro Max.
- Убедитесь что картинки, соответствуют размерам виджета. Ниже представлена таблица с размерами виджетов.
Уравняйте скругление углов элементов в вашем виджете со скруглением углов самого виджета. Позаботесь о том, чтобы контент виджета выглядел хорошо со скругленными углами этого виджета, в этом может помочь ContainerRelativeShape.
Рекомендуется использовать стандартные отступы между элементами. Стандартный отступ это 16 поинтов, использование стандартного отступа поможет разместить элементы в читабельном виде и сделает контент более разборчивым для пользователя.
Smart Stack
Вы можете организовывать виджеты в стеки, сам по себе стек это просто список виджетов, где в данный момент показывается только один виджет.
Когда у пользователя есть стек, то он может включить Smart Rotate (включено по умолчанию), который будет перемешивать и показывать только тот виджет, который он посчитает релевантным в данный момент времени.
Встречаем WidgetKit
Определение
WidgetKit позволяет пользователю получить доступ к возможностям вашего приложения с помощью вынесения виджета на iOS Home screen или в macOS Notification Center.
С тремя различными размерами для виджета (small, medium, large) у пользователя есть выбор, сколько именно информации он хочет видеть.
Создание Widget’a
Чтобы создать свой виджет, вам нужно добавить Widget Extension к своему приложению. Сам контент виджета создается с помощью SwiftUI, чтобы настроить виджет используется Timeline Provider, он используется для того, чтобы сказать виджету когда ему обновлять свой контент.
Чтобы позволить пользователю конфигурировать виджет вы добавляете свой SiriKit intent definition, остальное сделает WidgetKit за вас и предоставит пользователю кастомизированный интерфейс.
Создаем Widget extension
Итак представим у нас есть iOS приложение и теперь мы хотим добить поддержку виджетов, рассмотрим шаг за шагом, как это можно сделать.
Определение главной идеи для виджета
Перво-наперво нужно определиться с главной идеи для виджета, какую проблему он будет решать, будет ли он полезен пользователю, также желательно соотнести вашу идею с эпловскими гайдлайнами.
Приложение
Существующий проект
Представим, что у нас уже есть готовое приложение и теперь мы хотим к нему прикрутить виджеты.
В данной статье будет рассматривается простое приложение Рейтинг Игроков, которое состоит из 2х экранов — таблицы с рейтингом профилей и детальной информации по каждому профилю. Исходный код можно найти в конце статьи.
Добавление виджета в проект
Для того чтобы добавить виджет в приложение нужно выбрать File -> New -> Target, на вкладке iOS выбираем Widget Extension, даем имя нашему виджету, например LadderWidget . В проект добавится новый таргет, также файл LadderWidget.swift, где будет сразу добавлены все необходимые классы. Уже начиная с этого моменты, можно запустить виджет, выбрав соответствующий таргет, и увидеть результат на экране симулятора.
Основные классы
Рассмотрим какие классы создал для нас Xcode.
- LadderWidget
- LadderWidgetEntryView
- Provider
- SimpleEntry
Как мы увидим, на самом деле это не классы, а структуры, кратко пройдемся по каждой из этих структур.
- SimpleEntry — слепок, который содержит данные для отображения их на виджете;
- Provider — предоставляет таймлайн из слепков для виджета;
- LadderWidgetEntryView — View для виджета, тут определяется как будет выглядеть виджет;
- LadderWidget — наследник Widget , это непосредственно и есть наш виджет.
Как данные обновляются на виджете? iOS использует механизм слепков, то есть виджету предоставляются таймлайн слепков из провайдера и он их показывает на определенном интервале времени в будущем.
Проведем небольшой рефакторинг и переименуем наши структуры.
LadderEntry
Данные для виджета определяются именно в этой структуре путем добавления соответствующих свойств.
То есть если ваш виджет будет показывать, например, погоду, то у вас скорее всего будут свойства let cityName: String , let cityTemperature: Double , ну и let date: Date , последнее свойство определяет дату когда WidgetKit обновит виджет и является обязательным, чтобы следовать протоколу TimelineEntry .
LadderProvider
Кто-то должен предоставлять LadderEntry для виджета и за это ответственен LadderProvider . Эта структура следует протоколу TimelineProvider , взлянем на определение.
- placeholder(in context: ) — возвращает слепок, который будет использоваться как отображения шаблонной версии виджета.
- getSnapshot(in context: , completion:) — возвращает слепок, который представляет текущее время и состояние виджета.
- getTimeline(in context: , completion:) — возвращает массив слепков в виде таймлайна для текущего времени и будущих случаев обновления виджета.
LadderWidgetEntryView
Это обычное View , которое определяет, как будет выглядеть наш виджет.
LadderWidget
LadderWidget — наследник Widget , если посмотреть на определение протокола Widget , то можно заметить, что оно сильно напоминает обычный View , так же через body определяется контент виджета, но тут также указывается, как виджет будет конфигурироваться статически или динамически, а также здесь указывается провайдер для виджета.
- .configurationDisplayName(_) указывает название виджета в галерее виджетов;
- .description(_) указывает описание в галерее виджетов;
- .supportedFamilies(_) указывает какие размеры будет поддерживать виджет, если не указать, то будут поддерживаться все размеры.
@main перед определением виджета обозначает «точку входа» для данного таргета, а именно то, что при запуске будет показан именно Ladder Widget.
Ladder Widget начало
Размеры виджета — .widgetFamily
Наше приложение показывает список профилей, было бы неплохо иметь виджет, который показывает данные конкретного профиля, причем для виджета с маленьким размером это будет просто текст, а для среднего размера картинка и текст.
Начнем с LadderEntry , для этого добавим соответствующую поле.
Так же надо не забыть включать файлы, классы которых используется в таргете виджета, в таргет виджета. Для Profile.swift это будет выглядеть так.
Теперь обновим как будет отображается виджет.
С помощью @Environment(\.widgetFamily) можно получить доступ к размеру виджета и в зависимости от значения показывать просто текст для маленького размера или картинку и текст для среднего размера.
Чтобы можно было сразу увидеть, как виджеты будут выглядеть для разных размеров, можно заключить их в Group .
Неплохо было бы иметь возможность как-то выбирать какой профайл показывать на виджете, это можно сделать и для этого нам понадобится убрать статическую конфигурацию и добавить динамическую.
Конфигурация виджета — IntentConfiguration
Чтобы добавить динамическую конфигурацию, нужно в LadderWidget заменить StaticConfiguration на IntentConfiguration , для этого нажимаем File -> New -> File -> SiriKit Intent Definition File. Называем файл LadderIntents.intentdefinition.
Конфигурация определяется Intent , Intent определяет некоторые свойства для виджета, их много, рассмотрим только некоторые. Но перед этим создадим модель для Intent , это будет списком профилей из которых будет выбирать пользователь.
Нажимаем на плюсик и добавляем Enum , заполняем поля этого перечисления.
Гуд, теперь создадим сам Intent , нажимаем на плюсик и кликаем New Intent, называем его ProfileSelection и конфигурируем, как показано на картинке.
Xcode под капотом сгенерирует для нас класс ProfileSelectionIntent . Теперь заменим конфигурацию в нашем LadderWidget .
Компилятор будет ругаться, что LadderProvider не следует протоколу IntentTimelineProvider , исправляем это, для этого просто следуем протоколу IntentTimelineProvider вместо TimelineProvider и обновляем сигнатуры функций соответственно.
Раз мы добавили ProfileSelectionIntent , значит пора его где-то использовать, то есть в зависимости от выбранного профиля наш провайдер должен отдавать соответствующий LadderEntry . Обновим наш getTimeline(for configuration:, in context:, completion:)
Теперь у виджета появится кнопка Edit Widget и выбор отображаемого профиля для виджета.
Показ Placeholder’a
Когда WidgetKit отображает виджет первый раз, он показывает вью виджета как placeholder. Вью Placeholder view показывает общую структуру вашего виджета, как бы давая пользователю понять, что будет отображено на виджете. WidgetKit вызывает placeholder(in:) у провайдера чтобы получить слепок для placeholder’a.
WidgetKit использует redacted(reason:) модификатор, чтобы показать вью как placeholder.
Для того, чтобы понять, как будет выглядеть наш виджет в данном случае давайте создадим LadderWidgetPlaceholderView .
То есть мы просто показываем вью нашего виджета и применяем к нему модификатор .redacted(reason: .placeholder) . Если есть необходимость не показывать какие-то отдельные элементы вью как placeholder, то можно использовать оператор .unredacted() для них.
Более подробно про работу placeholder’ов можно прочитать у Majid Jabrayilov здесь.
Данные для Ladder Widget
Данные для виджета предоставляет LadderProvider , пройдемся более подробно по его функциям.
Плейсхолдер
Тут все просто, просто возвращаем слепок для плейсхолдера.
Таймлайн
Как можно заметить этот метод ничего не возвращает, вместо этого у него есть комплишен блок, который принимает объект Timeline .
По сути таймлайн это просто структура, которая содержит массив слепков и объект полиси.
Как мы помним, слепок здесь это наша структура LadderEntry , у которой есть date и собственно данные для виджета, так вот эта date и определяет когда виджет будет обновлен в будущем.
Можно например сгенерировать таймлайн, где виджет будет обновляться каждые 3 секунды на протяжении 1 минуты.
Что будет когда закончится эта 1 минута? Это зависит от того, что указано в policy объекта структуры TimelineReloadPolicy .
- atEnd — WidgetKit запросит новый таймлайн;
- never — само приложение скажет WidgetKit’у когда обновить виджет;
- after(_ date: ) — определяет точную дату, когда WidgetKit запросит новый таймлайн.
Текущий снапшот
Осталась одна функция в провайдере, которую осталась описать.
В ней мы возвращает слепок, который представляет текущее время и состояние виджета. По сути реализация мало чем отличается от getTimeline() , но есть один момент который стоит упомянуть.
WidgetKit вызывает этот метод, когда виджет появляется в разных переходах и так же в галерее виджетов, тогда context.isPreview == true . В этом случае нужно вызвать комплишен как можно быстрее, допускается возвращать заранее приготовленные данные, если загрузка реальных данных может занять больше пары секунд.
На симуляторе, это будет выглядеть вот так
Ladder Widget больше фич
WidgetBundle
WidgetKit также предоставляет возможность иметь больше чем один виджета на приложение.
Для того, чтобы добавить еще один виджет в приложение нужно соответственно реализовать этот виджет и создать бандл виджетов, который будет входной точкой для Widget таргета.
Важный момент здесь, что точка входа может быть только одна, то есть @main должен быть только один и стоять перед WidgetsBundle .
Здесь Xcode может бросить ошибку:
Чтобы это поправить нужно пойти Edit Scheme виджет таргета и поправить значение свойства _XCWidgetKind .
Запускаем симулятор снова и видим, что теперь мы можем выбрать еще один виджет для приложения.
IntentHandler
Что если, когда мы редактируем виджет мы хотели бы иметь не статические параметры, а динамические? Которые мы могли бы, скажем, загружать с сервера?
Виджеты позволяют это сделать и для этого нужно будет создать Intents Extension таргет, создать файл .intentdefinition и в нем определить опции выбора и далее в классе IntentHandler` обработать колбек выбора опции.
Итак начнем, создаем новый таргет New -> Target -> Intents Extension и даем ему имя например LadderWidgetIntent. Далее руками создаем DynamicLadderIntents.intentdefinition. Его конфигурация будет похожа на LadderIntents.intentdefinition, но с небольшими отличиями.
Вместо Enum у нас будет конкретный тип ProfileType , сам intent будет называться DynamicProfileSelection и так же нужно проставить галочку динамически загружать опции.
Теперь везде в проекте нужно заменить ProfileSelectionIntent на DynamicProfileSelectionIntent .
Xcode автоматически для нас генерирует класс ProfileType , а также протоколы выбора конкретного профиля. Тем самым мы получаем тот самый колбек для загрузки конфигурации.
Поправляем функцию profile(for _:) в провайдере и теперь наша конфигурация подтягивается динамически.
Передача данных между виджетом и приложением
iOS предоставляет несколько способов передачи данных между виджетом и приложением.
-
— хорошо подойдет если нужно передать какой-нибудь сервер-сайд токен, ключ или любую другую сенситив информацию. — предоставляет больше возможностей, но меньше секьюрити. Можно шарить UserDefaults , а также место на диске.
Принудительное обновление виджета
Приложение может обновить свой виджет не дожидаясь, когда это сделает система, с помощью WidgetCenter.
Еще пару слов
У многих могли возникнуть вопросы по работе с виджетами, попробую ответить на некоторые из них.
Вопрос: Можно ли использовать готовые UIKit вьюшки в виджетах?
Ответ: Нет, виджеты работают только на чистом SwiftUI, даже если вы обернете UIKit вьюшку в SwiftUI вью, то да код скомпилируется, но на устройстве вы увидите просто желтый экран заглушку.
Вопрос: Почему при запуске на симуляторе, я не вижу своих последних изменений?
Ответ: Отладка виджетов достаточно болезненный процесс, то виджет не появляется на экране или появляется только черный квадрат, то вообще виджета нету в галереи виджетов или виджет не обновляется, и такого много, как правило удаление виджета с симулятора и перезапуск симулятора помогает решить такие проблемы.
Заключение
В статье были разобраны основные моменты работы с виджетами, надеюсь кому-то пригодится.