Различные размеры виджетов и глубокие ссылки

Примечание. Это вторая часть учебного пособия, состоящего из трех частей. Обязательно завершите часть 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: