Представляем комплект виджетов iOS 14 с интерфейсом Swift

WWDC 2020 дал нам много усовершенствований и обновлений, но введение WidgetKit, несомненно, выделяется на фоне других.

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

В некотором роде они являются более спокойной формой уведомления, которая предоставляет вам последнюю информацию из приложений (если разработчик решил это сделать) без каких-либо вмешательств. Кроме того, в iOS 14 появилась новая функция Smart Stack, группирующая набор виджетов,которые вы можете пролистывать,переключаясь между ними. Smart Stacks, как правило, предоставляют подходящие для вас виджеты в верхней части экрана, используя встроенный интеллект, который учитывает время суток, местоположение и некоторые другие факторы.

WidgetKit построен исключительно с использованием SwiftUI, что открывает бесконечные возможности для построения красивых виджетов. Важно отметить, что WidgetKit не предназначен для построения мини-приложений.

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

1.Понять анатомию WidgetKit. Мы изучим фреймворк и посмотрим, как создаются и обновляются виджеты.

2.Построить виджет "Шутка часа" в SwiftUI.

3.Объедините наше приложение SwiftUI с двумя виджетами с помощью WidgetBuilder.

Чтобы понять анатомию WidgetKit, создадим новый Xcode 12 SwiftUI-проект и убедимся, что выбран SwiftUI App Lifecycle.

Чтобы создать наш первый виджет, перейдите в "Файл" → "Новый" → "Цель" и выберите шаблон "Расширение виджета". Убедитесь, что вы сняли флажок "Include Configuration Intent", так как в этой статье мы рассмотрим только статические конфигурации.

После добавления Widget Extension Target, вы будете встречены файлом, содержащим кучу SwiftUI кода, который может показаться вам новинкой. Не волнуйтесь, мы пройдёмся по всему этому.

Следующий фрагмент - отправная точка вашего виджета:

Таковы умозаключения, извлеченные из приведенного выше кода:

1.kind - это идентификатор, используемый для отличия виджета от других в WidgetCenter.

2.Внутри WidgetConfiguration мы устанавливаем вид Placeholder, который отображается при загрузке виджета. Содержимое виджета устанавливается внутри FirstWidgetEntryView, который мы вскоре увидим.

3.Provider- это структура типа TimelineProvider, являющаяся ядром виджета. Он отвечает за подпитку виджета данными и установку интервалов обновления данных. Опять же, к этому мы скоро придем.

4.Настройка модификаторов вида configurationDisplayName и описание отображают соответствующую информацию в Галерее виджетов - месте, где размещены все виджеты на вашем устройстве.

Есть еще один новый модификатор для фреймворка WidgetKit (supportedFamilies), внутри которого мы можем передавать виджеты разных размеров, которые нужны для нашего приложения. Например, .supportFamilies([.systemLarge]) позволяет передавать только виджеты большого размера.

Теперь, когда мы разобрались, как работает WidgetKit под капотом, давайте посмотрим на вид SwiftUI, который отобразит виджет на экране.

Вышеуказанная структура заполняет вид виджета с набором данных в Provider.Entry. Provider.Entry является источником данных для представления нашего виджета, и если вы посмотрите на TimelineProvider, то увидите, что в качестве псевдонима типа для Entry была выбрана структура SimpleEntry.

Теперь, когда мы увидели, как работает WidgetKit - от отображения Placeholder до заполнения просмотров виджета записями TimelineProvider - мы готовы построить свой собственный пользовательский виджет: трекер шуток, который обновляется каждый час (вы можете настроить временной интервал)

TimelineProvider позволяет нам получать данные из сетевых запросов или базы данных во время отображения PlaceholderView. Подход к извлечению данных из API для виджетов такой же, как и для приложения.

Следующий код использует URLSession с комбинированным питанием для декодирования ответа API и передачи его через блок завершения:

Обратите внимание, что представления виджетов SwiftUI не могут и не должны обновляться с использованием оборачивания свойств, таких как Published или State

Ответ декодируется с помощью следующей кодируемой структуры:

Наш виджет будет отображать шутки как строку. Итак, давайте добавим поле в нашу структуру SimpleEntry, как показано ниже:

struct JokesEntry: TimelineEntry {

public let date: Date

public let joke : String

}

Следующая структура провайдера хронологии получает данные из DataFetcher и устанавливает их в массиве TimelineEntries, сконфигурированном на заданном интервале времени:

Следующий кусок кода представляет наше представление SwiftUI с набором структур SimpleEntry в качестве источника данных:

В коде выше, используя SwiftUI @ViewBuilder и используя тип enum widgetFamily в качестве EnvironmentObject, мы установили различные виды SwiftUI для различных форм виджетов.

Наконец, установим WidgetConfiguration и запустим приложение на устройстве под управлением iOS 14:

Вот вывод виджета в действии:

Как видите, у нас есть два виджета разного размера и разной компоновки. Вы можете дополнительно настроить их с помощью своего собственного красивого виджета SwiftUI.

Для демонстрационных целей я установил интервал TimelineProvider на одну секунду (хотя он не идеален в виджетах и может съесть много батареи).

Мы можем создавать различные виджеты и объединять их вместе с помощью WidgetBundleBuilder:

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

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

На этом всё. Спасибо, что прочитали

Автор:Анупам Чуг

Перевод:Федоров Матвей

Еще больше полезной информации вы можете найти в телеграм-канале по ссылке:

https://t.me/metsolution