Различные размеры виджетов и глубокие ссылки
Примечание. Это вторая часть учебного пособия, состоящего из трех частей. Обязательно завершите часть 1, прежде чем продолжить эту статью. Вы можете найти часть 3 здесь.
Виджеты на iOS могут поддерживать 3 разных размера: маленький, средний и большой. В части 1 этого руководства мы добавили поддержку только небольших виджетов. Теперь мы добавим виджет среднего и большого размера.
Примечание. Для работы с этим руководством вам потребуется Xcode 12 Beta 2 или выше.
Поддержка различных размеров виджетов
Откройте проект Emojibook
в Xcode и перейдите к файлу Emojibook_Widget.swift
. Для поддержки виджетов разных размеров все, что нам нужно сделать, это изменить аргументы в модификаторе supportedFamilies
структуры Emojibook_Widget
. Так что продолжайте и добавьте .systemMedium
и .systemLarge
в список поддерживаемых семейств.
Теперь запустите приложение, убедившись, что Emojibook
WidgetExtension
является активной схемой, и перейдите в режим покачивания. Нажмите кнопку + в верхнем левом углу и выберите приложение Emojibook
. Появится Emojibook
галерея виджетов, теперь вы увидите 3 разных размера виджетов, которые вы можете добавить на свой рабочий стол.
Пока эти новые виджеты работают, много места остается неиспользованным, поэтому мы собираемся изменить представления, отображаемые для средних и больших виджетов. Эти виджеты будут отображать смайлик вместе с его названием, и мы также добавляем описание смайлика. Перейдите к EmojiWidgetView.swift
и добавьте новый View
struct
с именем MediumEmojiWidgetView
. Его содержимое будет похоже на небольшой виджет, но мы добавляем элемент Text
с описанием смайлика, например:
Теперь добавьте еще один View
struct
с именем LargeEmojiWidgetView
. Его содержимое будет таким же, как и у MediumEmojiWidgetView
, но будет расположено немного иначе:
Давайте также переместим код под EmojiWidgetView
struct
в новый SmallEmojiWidgetView
View
struct
.
Теперь мы изменим EmojiWidgetView
, чтобы включить свойство WidgetFamily
. Мы можем получить доступ к widgetFamily
нашего виджета с помощью оболочки свойства Environment
. Это позволяет нам считывать widgetFamily
значение виджета прямо из нашей EmojiWidgetView
среды.
На основе значения свойства family
мы определим размер нашего виджета и вернем одно из представлений, которые мы только что добавили. Для этого нам также необходимо добавить оболочку свойств ViewBuilder
в body
нашего View
.
Давайте запустим наш виджет и откроем галерею виджетов, чтобы увидеть, как наш виджет будет выглядеть в разных размерах.
Прохладный! Наши средние и большие виджеты выглядят лучше и эффективно используют пространство на экране. Теперь давайте поработаем над добавлением глубоких ссылок в наше приложение.
Ссылки на виджет
Давайте добавим глубокие ссылки, чтобы наше приложение открывало EmojiDetailsView
, который мы создали в части 1, при запуске через небольшой виджет. В подробном представлении будут отображаться данные для смайликов, которые были в виджете при нажатии на него. Для этого мы будем использовать модификатор widgetURL
, чтобы указать URL-адрес нашего SmallEmojiWidget
, это URL-адрес, который будет открыт при нажатии на виджет. Затем мы воспользуемся модификатором вида onOpenURL
для обработки URL-адреса виджета и откроем соответствующий лист сведений.
Перво-наперво, нам нужно обновить наш EmojiDetails
struct
, чтобы включить уникальное свойство URL
. Мы будем использовать name
эмодзи для создания URL-адреса, не забывая удалять все пробелы в строке; например, URL-адрес смайлика «🤯» будет emoji://ExplodingHead
.
Теперь, в EmojiWidgetView.swift
, мы добавим модификатор widgetURL
к нашему SmallEmojiWidgetView
:
Чтобы открыть страницу с подробностями, нам нужно обработать этот URL-адрес в EmojibookListView.swift
. Сначала мы добавим новую переменную с оболочкой свойств State
, чтобы отслеживать текущий экземпляр EmojiDetails
, видимый на листе, если таковой имеется.
@State private var visibleEmojiDetails: EmojiDetails?
Переменная visibleEmojiDetails
может быть обновлена из двух мест: либо при обработке URL-адреса виджета, либо при нажатии на элемент в списке смайлов. При использовании модификатора вида sheet
лист будет автоматически обновляться и отображаться каждый раз, когда visibleEmojiDetails
изменяет свое значение.
Мы добавим модификатор onOpenURL
, и здесь мы попытаемся найти EmojiDetails
для смайлика, который был нажат на виджет. Как только он у нас будет, мы обновим visibleEmojiDetails
с его помощью. Нам также нужно будет обновить каждый Button
в нашем списке, чтобы действие каждой кнопки также обновляло visibleEmojiDetails
. В итоге наш EmojibookListView
будет выглядеть так:
Давайте продолжим и протестируем наши глубокие ссылки. Убедитесь, что приложение Emojibook
является активной схемой, затем нажмите кнопку воспроизведения, чтобы построить и запустить. Когда вы нажимаете маленький виджет, приложение должно перейти непосредственно к EmojiDetailsView
с данными, соответствующими смайликам в виджете.
Спасибо за прочтение! Надеюсь, вам понравилась эта статья и вы нашли ее полезной. Вы можете найти готовую часть 2 приложения на GitHub.
Далее: В части 3 этого руководства я покажу вам, как использовать намерения SiriKit для создания настраиваемых пользователем виджетов. Пользователь сможет выбрать EmojiDetails
по своему усмотрению для отображения в виджете.
Чтобы узнать больше о WidgetKit, обязательно ознакомьтесь с замечательными ресурсами Apple: