Как создать виджет на айфоне
Перейти к содержимому

Как создать виджет на айфоне

  • автор:

Как добавить виджет на главный экран iPhone

миниатюрное изображение

Вам нужно специальное приложение, чтобы стильно настроить домашний экран! Это окончательная версия приложения для переодевания, в котором есть все материалы для переодевания!

Настройте свой домашний экран с помощью стильных и функциональных виджетов!

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

Вот окончательное руководство по настройке виджета iPhone!

Что такое «Виджет»?

#1 изображение Как добавить виджет на главный экран iPhone

Виджет — это функция, позволяющая закреплять часто используемую информацию на главном экране! Например, вы можете закрепить информацию о прогнозе погоды на главном экране, чтобы вам не нужно было открывать приложение погоды, чтобы проверить его.

Вы можете добавлять виджеты без загрузки каких-либо приложений, если они уже установлены на вашем iPhone, но возможности настройки дизайна ограничены, поэтому мы рекомендуем использовать специализированное приложение для виджетов!

Разница в настраиваемости дизайна между предустановленными приложениями и специализированными приложениями-виджетами

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

#2 изображение Как добавить виджет на главный экран iPhone

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

Как добавить эстетичный виджет на главный экран

1.Скачай приложение «WidgetClub»!

2. Откройте приложение, нажмите кнопку «+» и выберите «Виджет».

#3 изображение Как добавить виджет на главный экран iPhone

3. Выберите один из трех размеров виджета (Маленький/Средний/Большой) и выберите дизайн виджета, который вы хотите установить.

#4 изображение Как добавить виджет на главный экран iPhone

К вашему сведению: в WidgetClub есть фото, часы, календарь, погода, дата, напоминание, годовщина (например, 100 дней с тех пор, как мы начали встречаться), обратный отсчет (3 дня до 2 летия) и аккумулятор!

4. На экране редактирования виджета вы можете свободно выбирать цвет, шрифт и фоновое изображение.

5.После того, как вы закончите редактирование, нажмите «ДАЛЕЕ»!

# 5 изображение Как добавить виджет на домашний экран iPhone

6. Нажмите кнопку «Установить виджет» в нижней части.

7. Будут отображаться слоты настроек виджета, нажмите на один из них, чтобы заменить виджет.

#6 изображение Как добавить виджет на главный экран iPhone

8. Вернитесь на главный экран, нажмите и удерживайте пустое место, пока приложения не начнут покачиваться.

9.Нажмите кнопку «+» в верхнем левом или правом углу экрана.

#7 изображение Как добавить виджет на главный экран iPhone

10.Появится окно поиска, введите «Widgetclub» и коснитесь его.

#8 изображение Как добавить виджет на главный экран iPhone

11. Найдите виджет, который хотите установить, и нажмите кнопку «Добавить виджет».

#9 изображение Как добавить виджет на главный экран iPhone

(Виджет поставляется в трех размерах, S/M/L, и вы можете установить 20 рамок для каждого! Большие размеры расположены в крайней правой части, поэтому, если вы установите виджет большего размера, переместитесь в крайнюю правую сторону. добавить его)

12. Готово! Наконец-то вы добавили виджет на главный экран!

#10 изображение Как добавить виджет на главный экран iPhone

Вот видео о том, как добавить виджеты на iPhone

Как добавить виджет с помощью предустановленного приложения

Например, я объясню это с помощью виджета приложения «Погода»! (Если вы хотите добавить виджет часов, выполните поиск «Часы»)

1. На главном экране нажмите и удерживайте главный экран, пока приложения не начнут покачиваться, затем нажмите кнопку «+» в верхнем левом или верхнем правом углу.

2. Найдите «Погода» и выберите его!

#11 изображение Как добавить виджет на главный экран iPhone

3. Выберите один из трех дизайнов и нажмите кнопку «Добавить виджет»! Сделанный!

#12 изображение Как добавить виджет на главный экран iPhone

Как редактировать виджет

Некоторые виджеты позволяют изменять информацию таким образом, как показано ниже.

На этот раз я покажу вам, как изменить область прогноза погоды в виджете погоды.

1. Нажмите и удерживайте виджет, пока не появится всплывающее окно, затем нажмите «Редактировать виджет».

#13 изображение Как добавить виджет на главный экран iPhone

2. Появится селектор области, коснитесь места, отмеченного синим цветом, найдите и выберите область, которую хотите установить.

#14 изображение Как добавить виджет на главный экран iPhone

Виджет будет отображать прогноз погоды в Нью-Йорке!

Как удалить установленный виджет

Если вы хотите удалить виджет с главного экрана, следуйте этому пути.

1. Нажмите и удерживайте виджет, который хотите удалить, пока в верхнем левом углу не появится кнопка «-».

2. Нажмите кнопку «-»

3. Нажмите «Удалить виджет».

#15 изображение Как добавить виджет на главный экран iPhone

Эстетические идеи виджетов

Вы можете изучить идеи макетов домашнего экрана пользователей WidgetClub с помощью эстетичных виджетов!

#16 изображение Как добавить виджет на главный экран iPhone

Настройте свой домашний экран более эстетично!

Вы можете настроить свой iPhone еще более эстетично, изменив не только виджеты, но и обои и значки приложений!

#17 изображение Как добавить виджет на главный экран iPhone

Чтобы изменить значки, вам нужно собрать материалы для значков! WidgetClub предоставляет «шаблоны» для настройки домашнего экрана, которые включают в себя обои, материалы для значков приложений и виджеты — все в одном пакете, так что вы можете настроить свой домашний экран сразу!

Как сделать виджет на айфоне

миниатюрное изображение

Вам нужно специальное приложение, чтобы стильно настроить домашний экран! Это окончательная версия приложения для переодевания, в котором есть все материалы для переодевания!

Вы можете сделать стильные собственные виджеты, как этот!

Как только вы научитесь делать виджеты, вы сможете создавать стильные домашние экраны и подобные виджеты!

#1 изображение Как сделать виджет на айфоне

Я также добавил виджеты с фотографиями моего любимого исполнителя и информацию о погоде, которую я часто вижу, это поднимает мне настроение и повышает эффективность моей работы!

Прочитав эту статью, вы сможете сделать свои собственные стильные виджеты, подобные этому! Пожалуйста, досмотрите до конца!

Как сделать эстетичные виджеты своими руками

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

Я, использовавший более 50 отечественных и зарубежных приложений для виджетов, таких как WidgetSmith, Color widget и т. д., рекомендую приложение под названием «WidgetClub»!

#2 изображение Как сделать виджет на айфоне

WidgetClub предлагает 75 стильных и полезных виджетов, включая часы, дату, погоду, фото, календарь, напоминания, годовщину, виджет обратного отсчета и многое другое!

#3 изображение Как сделать виджет на айфоне

Подготовка заранее

• Пожалуйста, обновите вашу ОС до последней версии.

Как сделать свой виджет для себя

1. Откройте приложение WidgetCllub и нажмите «Виджет».

#4 изображение Как сделать виджет на айфоне

2. Выберите один размер из малых, средних и больших.

3.Выберите функцию виджета, который вам нравится.

№5 изображение Как сделать виджет на айфоне

  • Погода : отображает информацию о погоде.
  • Заметка : он может отображать любой текст, который вам нравится.
  • Календарь : отображает календарь на текущий месяц.
  • Расписание : отображает данные о встречах, полученные из календаря Apple.
  • Дата : отображает сегодняшнюю дату
  • Время : цифровые часы (стиль 24:00)
  • Часы : Стильные часы с длинными и короткими стрелками⏰.
  • Напоминание : отображает информацию о задаче из напоминаний Apple.

4. На экране редактирования виджета настройте цвет фона, цвет текста, шрифт и фоновое изображение по своему вкусу.

#6 изображение Как сделать виджет на айфоне

5. Когда настройка завершена, нажмите кнопку «Далее» → нажмите кнопку «Установить виджет» в нижней части страницы общего доступа.

#7 изображение Как сделать виджет на айфоне

6. Нажмите на рамку настроек виджета, когда она появится.

№8 изображение Как сделать виджет на айфоне

(Вы также можете коснуться слота виджета, который уже был установлен, чтобы перезаписать его! Это полезная функция, так что имейте это в виду!)

Как добавить виджет на главный экран

7. Перейдите на главный экран, нажмите и удерживайте главный экран, пока приложение не начнет дрожать → Нажмите кнопку +, отображаемую в верхнем левом углу.

№9 изображение Как сделать виджет на айфоне

8. Найдите и выберите «WidgetClub

#10 изображение Как сделать виджет на айфоне

9. Установленные вами виджеты будут отображаться в качестве кандидатов в рамке настроек виджетов, найдите виджет, который вы хотите установить, и нажмите «Добавить виджет»! и это сделано!

(В этой статье мы устанавливаем виджет в маленький слот настроек виджета #3, здесь Find Small, виджет #3)

#11 изображение Как сделать виджет на айфоне

Примечание. Для каждого размера S/M/L имеется 20 слотов для настройки виджетов, а виджеты большего размера отображаются справа. Поэтому вам нужно будет двигаться в крайнее правое положение, чтобы найти виджеты среднего и большого размера! При перемещении удобно использовать «. » в оранжевой рамке на изображении выше, чтобы быстро перемещаться влево или вправо!

Пример макетов дизайна виджета

Вы также можете увидеть пример макетов дизайна виджета здесь!

Редактируя фоновые изображения, вы можете сделать свой собственный виджет простым и эстетичным!

#12 изображение Как сделать виджет на айфоне

Вы также можете полностью настроить домашний экран с помощью обоев, значков приложений и виджетов!

В WidgetClub вы также можете получить множество тем для домашнего экрана!

Как сделать виджет с определенными фото (альбомами) на iPhone: 2 способа

Виджеты, появившиеся на главном экране iPhone с выходом iOS 14 великолепны, однако у некоторых из них все-таки имеются недочеты. В частности, виджет приложения «Фото» кажется чуть недоработанным. Этот инструмент дает приятное ощущение с появлением любимых фотографий на главном экране рядом со значками приложений. Но, с другой стороны, каждый час картинка меняется случайным образом без какого-либо нашего участия. И хотя изменить поведение самого этого виджета уже нельзя, все еще остается способ получить нужные вам изображения на главном экране.

Как сделать виджет с определенными фото (альбомами) на iPhone

Как сделать виджет с определенным фотоальбомом на iPhone при помощи стандартного приложения «Фото»

Как мы уже упоминали выше, возможности стандартного приложения «Фото» позволяют создать виджет с определенным фотоальбомом. Вероятно, для некоторых пользователей этот вариант окажется более чем достаточным. Главным недостатком этого метода в сравнении с приложениями от сторонних разработчиков (о них мы расскажем ниже) является то, что приложение «Фото» не позволяет изменить период смены изображений на виджете — фото будет сменяться один раз в час. Итак, как создать такой виджет?

1. Создайте в приложении «Фото» альбом из фотографий, которые вы хотели бы видеть в течение дня на виджете. С подробной инструкцией по созданию фотоальбомов вы можете ознакомиться здесь.

2. Нажмите и удерживайте палец на любом пустом месте главного экрана iPhone до момента пока иконки приложений не начнут покачиваться.

3. Нажмите «+» (плюс) в левом верхнем углу экрана.

Как сделать виджет с определенным фотоальбомом на iPhone при помощи стандартного приложения «Фото»

4. Пролистайте список доступных виджетов до раздела «Фото» и выберите его.

5. Смахните справа налево предложенные варианты виджетов и остановитесь на категории «Альбом». Выберите желаемый размер виджета из трех.

Как сделать виджет с определенным фотоальбомом на iPhone при помощи стандартного приложения «Фото»

6. Нажмите кнопку «Добавить виджет», после чего выбранный виджет появится на главном экране iPhone. При желании его можно перетащить выше или ниже в пределах экрана.

Как сделать виджет с определенным фотоальбомом на iPhone при помощи стандартного приложения «Фото»

7. Нажмите и удерживайте палец на виджете «Фото» до появления контекстного меню.

8. Выберите «Изменить виджет».

Как сделать виджет с определенным фотоальбомом на iPhone при помощи стандартного приложения «Фото»

9. Нажмите на наименование альбома, который автоматически был выбран по умолчанию. В нашем случае это «Избранное».

10. Выберите созданный вами ранее альбом для виджета и коснитесь свободного места на экране.

Как сделать виджет с определенным фотоальбомом на iPhone при помощи стандартного приложения «Фото»

Все! На главном экране iPhone появится виджет с фото из выбранного вами альбома, которые будут сменяться автоматически в течение дня.

Как сделать виджет с определенным фотоальбомом на iPhone при помощи стандартного приложения «Фото»

Видео:

Как добавить виджет с фото на Айфон при помощи сторонних приложений

Как добавить виджет с фото на Айфон при помощи сторонних приложений

С момента выхода iOS 14 сторонние разработчики приложений создали немало новых виджетов, которые работают как на главном экране, так и на экране «Сегодня». Многие из них предназначены для одноцелевых приложений. Разработчики с радостью поспешили исправить те нюансы, которые Apple упустила в собственных виджетах. Нам придется обратиться к сторонним приложениям, которые позволят выбирать, какое изображение или изображения вы хотите отображать в виджете на главном экране iPhone и когда.

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

Список сторонних приложений для добавления виджета с фотографиями на iPhone

Custom Widgets – Photo & Text: вы можете использовать всего три изображения, одно из которых будет выведено на виджет. Вы можете вносить изменения в формат показа фотографии, развернув ее, изменив цвет фона или используя вверху аналоговые часы, текст или текущую дату.

Home Photo Widget: вы можете добавить в приложение неограниченное число изображений, а затем создать статический виджет для каждого из них.

Locket – Photo Widgets (99 рублей): вы выбираете альбом для каждого виджета, число изображений, которые вы хотите видеть из него, и как часто виджет должен менять изображения.

Photobox Widget: вы можете использовать виджет трех разных размеров, кроме того виджет позволяет выбрать несколько фотографий, которые случайным образом будут меняться каждые десять минут. Есть возможность добавления сообщения и обрезки фотографий.

PHOTO ALBUM (Photo Widget): для каждого создаваемого виджета формируется свой фотоальбом с любым числом фотографий. Вы можете изменить яркость изображения, периодичность его смены, показать название альбома виджета.

Photo Widget (99 рублей): для виджета вы создаете альбомы, в каждом из которых может храниться до шести фотографий, и вы можете одновременно показывать несколько изображений как по отдельности, так и в виде сетки.

Фото виджет: вы можете добавить одну или несколько фотографий в один виджет (трех разных размеров). Вы можете изменить интервал обновления фотографии, добавить наложение даты или заголовка.

Photo Widget – Pin Photo: вы можете создать виджет как для одного изображения, так и для альбомов, из которых будут выбираться изображения каждую минуту. Вы также можете добавить заголовок каждому виджету.

Photo Widget – Simple: необходимо создать альбомы с любым количеством фотографий, а затем задать виджет для каждой коллекции. В каждом виджете имеется шесть вариантов временного интервала для смены изображений.

Photo Widget – The best one: вы можете добавить одно или несколько изображений к каждому виджету, настроить его для использования одного из ваших фотоальбомов. Фотографии меняются по вашему индивидуальному таймеру. Можно настроить виджет так, чтобы при нажатии на него открывался веб-сайт.

PictureWidget: вы добавляете в приложение сразу пять фотографий. Для виджета домашнего экрана будет отображаться только одно изображение. Для виджета в старом стиле доступны дополнительные параметры настройки.

Все эти приложения в целом работают идентично. В этой статье мы рассмотрим создание фото-виджета на примере работы приложения Фото виджет.

Выберите фотографии для виджета

После того, как вы установите выбранное приложение на свой iPhone, откройте его. Необходимо найти нечто похожее на кнопку «Добавить». В приложении Фото виджет, например, она («Add Album») находится прямо посередине. Нажмите на кнопку и присвойте название создаваемому альбому.

Как сделать виджет с определенными фото (альбомами) на iPhone

Затем нажмите на кнопку для добавления фотографий в созданный альбом («Add Photos»). Откроется окно, в котором вы можете просмотреть все фотографии в приложении «Фото», включая все свои альбомы.

Для выбора фотографии, которую вы хотите использовать, просто коснитесь ее. Если вы выберете несколько изображений, виджет будет циклически менять их, а не отображать статично только одну. Когда вы будете довольны своим выбором, просто нажмите «Добавить».

Как сделать виджет с определенными фото (альбомами) на iPhone

Как сделать виджет с определенными фото (альбомами) на iPhone

Отключите «Показывать дату в виджете» (необязательно)

По умолчанию приложение «Фото виджет» показывает дату при отображении фотографий. Если вам это подходит, переходите к следующему шагу. Однако, если вы хотите, чтобы на главном экране была простая чистая фотография, эту функцию нужно отключить. Откройте в виджете вкладку «Настройки» (Settings) и деактивируйте переключатель рядом с «Показывать дату в виджете» (Show Date in Widget). Кроме того, здесь же можно выбрать интервал для смены фотографий – раздел «Photo Refresh Interval».

Как сделать виджет с определенными фото (альбомами) на iPhone

Добавьте виджет на экран iPhone

Для этого нажмите и удерживайте пальцем на фоне главного экрана, пока не войдете в режим покачивания иконок. Теперь нажмите кнопку «плюс» (+) в верхнем левом углу экрана.

Как сделать виджет с определенными фото (альбомами) на iPhone

В списке найдите «Фото виджет». Он может сразу появиться в качестве предлагаемого виджета, но, если нет, нужно прокрутить вниз и выбрать его из списка.

Как только вы это сделаете, то увидите три предполагаемых размера виджета (маленький, средний и большой). Когда вы определитесь, какой из них подходит, нажмите «Добавить виджет» или перетащите его прямо на домашний экран в нужное место.

Как сделать виджет с определенными фото (альбомами) на iPhone

Как сделать виджет с определенными фото (альбомами) на iPhone

�� Смотрите также:

  • Зеленая, оранжевая или красная точка вверху экрана iOS: для чего они нужны?
  • Постучать по крышке Айфона – сделать скриншот: как привязать действия к касанию задней части корпуса iPhone.
  • 20 функций iPhone, которые можно отключить большинству пользователей.

�� Мы в Telegram и YouTube, подписывайтесь!

Как создать интерактивные виджеты на iOS 17

5-9 июня 2023 года состоялась ежегодная презентация Apple WWDC23, на которой было представлено много интересных новшеств для iOS-разработчиков. Одну из таких фич — интерактивные виджеты, мы рассмотрим в этом руководстве.

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

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

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

Подготовка

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

К примеру, в сутки необходимо выпивать в среднем 3 литра воды, возьмем это за целевое значение. Также отметим, что средний объем обычного стакана составляет 350 мл, следовательно, наш шаг при добавлении записи – 350. Индикатор показывает, на сколько процентов мы выполнили план текущего дня.

Чтобы успешно обмениваться данными с основным приложением, давайте создадим общую так называемую «Группу приложений».

В Xcode выбираем наш проект, далее выбираем таргет нашего приложения, переходим в Signing & Capabilities, жмем «+ Capability» в левом верхнем углу:

Выбираем App Groups, в появившемся поле нажимаем «+» и создаем новую группу. За название группы мы взяли Bundle identifier основного приложения с припиской group.

Ставим галочку напротив нашей новой группы. На этом создание группы приложений закончено.

Изначально при выборе новой группы она может подсвечиваться красным, не пугайтесь, соберите приложение, используя Cmd + B, и подождите некоторое время. Если все сделано правильно, цвет текста снова станет белым.

Приложение сохраняет записи пользователя на диске с помощью UserDefaults. Это и будет нашим главным связующим звеном и источником актуальных данных, которыми мы будем манипулировать с помощью приложения и виджета.

Но в этом случае наше приложение и виджет должны использовать данные из одного общего контейнера группы приложений. Для этого вместо стандартного синглтона standard необходимо использовать наш контейнер группы приложений через инициализатор suitename :

/// Класс, управляющий базой данных приложения final class UserDatabase

Добавление нового виджета

Теперь пришло время создать виджет, для этого в Xcode идем в File -> New -> Target, и выбираем «Widget Extension».

*В нашем примере мы не добавляли Live Activity и Configuration Intent.

У нас создается новый таргет и шаблонный код для виджета. Первое, что мы должны сделать — это добавить данный виджет в «App Groups» так же, как мы сделали с основным приложением.

Как использовать файлы из основного приложения в расширении.

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

Выбираем нужный файл в Xcode, разворачиваем правую панель управления и устанавливаем галочку напротив нужного таргета в разделе «Target Membership»:

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

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

А вот дальше уже интереснее. Итак, Provider. Данная структура — это источник данных, к которому будет обращаться система, когда ей нужно будет запросить новые данные для виджета.

Метод placeholder() отвечает за данные, которые будут отображаться на виджете при первом показе, чтобы дать пользователю краткую информацию о виджете. Важно понимать, что это синхронный метод, и данные нужно вернуть из него как можно быстрее.

/// Вариант нашего виджета, когда он будет показан впервые func placeholder(in context: Context) -> SimpleEntry

Метод getSnapshot() отвечает за предоставление виджету актуальных данных на момент первого показа, например, в момент выбора виджета в галерее.

/// Актуальные данные виджета на разовый показ (Например в галерее виджетов) func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ())

Метод getTimeline() отвечает за предоставление виджету данных для отображения на протяжении определенного времени. Это главный метод, который используется для отображения данных на виджете.

/// Варианты данных нашего виджета в разные моменты времени func getTimeline(in context: Context, completion: @escaping (Timeline) -> ())

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

Во всех методах для передачи данных мы готовим структуру SimpleEntry , в которую упакованы все необходимые параметры. Обязательный параметр — это date, который необходим для соответствия протоколу TimeLineEntry . По сути, это временная метка, указывающая, в какой момент данный объект должен будет использоваться виджетом.

/// Данные для нашего виджета struct SimpleEntry: TimelineEntry

Переходим к самому основному. (WidgetName)EntryView — это уже сам View нашего виджета на SwiftUI, в body ,по аналогии с обычной View структурой, мы рисуем виджет под наши задачи.

При разработке рекомендуется опираться на гайдлайны от Apple для виджетов.

/// Тело виджета struct TrackerWidgetEntryView: View < var entry: Provider.Entry var body: some View < HStack < Text("hello") Text("world") >> >

Сюда мы вернемся чуть позже, а пока продолжим.

Итак, сама структура с названием нашего виджета — это ее определяющий контейнер, который содержит kind – идентификатор данного виджета. В отличие от стандартного View, здесь body является типом WidgetConfiguration , и вернуть мы должны объект, соответствующий данному протоколу.

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

/// Сам контейнер с виджетом, содержащий в том числе и настройки нашего виджета struct TrackerWidget: Widget < let kind: String = "waterTrackerWidget" var body: some WidgetConfiguration < StaticConfiguration(kind: kind, provider: Provider()) < entry in TrackerWidgetEntryView(entry: entry) >.configurationDisplayName("Трекер воды") // Имя в галерее .description("Помогает следить за количеством выпитой воды") // Описание .supportedFamilies([.systemSmall, .systemMedium]) // Варианты виджета > >

Теперь вернемся к нашему EntryView . В body расписываем то, как будет выглядеть наш виджет, пока без кнопок. У нас есть экземпляр класса SimpleEntry под названием entry — это как раз наши упакованные данные, которые мы должны использовать. В нашем примере создадим аналогичный круглый индикатор заполнения дневного плана жидкости.

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

func addCup() < logEntry() // Добавляем запись в журнал updateWidget() // Обновляем виджет >func updateWidget() < // Ключевая строчка кода для форсированного обновления виджета WidgetCenter.shared.reloadTimelines(ofKind: "waterTrackerWidget") >

На данном этапе мы имеем самый обычный виджет, который отображает индикатор и переводит в приложение по тапу на него. Самое время приступить к добавлению интерактивности.

Добавление интерактивности

Поскольку виджеты работают отдельно от основного приложения, даже когда оно закрыто, их код выполняется системой в другом процессе, не связанным с основным приложением. Для того, чтобы исполнить описанный в приложении код, нам необходим способ предоставить какие-либо действия через расширение системе, чтобы она могла их выполнить. Как раз для решения этой проблемы Apple предоставила новый механизм App Intents с использованием нового протокола AppIntent . AppIntent — это протокол, позволяющий определять в коде действия, которые могут выполняться системой. Это как раз то, что нам нужно.

Немного об Intent’ах

Есть похожие механизмы на основе Intent, например, для выполнения действий в приложении через Siri, реализация App Intents позволит дополнительно расширить пользовательские возможности приложения за счет доступа Siri и Shortcut к созданным Intent сообщениям о действиях.

Чтобы использовать новый механизм, мы создаем дополнительную структуру LogEntryIntent и, после импорта AppIntents, подписываемся под протокол AppIntent.

Для соответствия протоколу реализуем статические переменные title и description.

/// Структура, описывающая действие при нажатие кнопки на виджете, вызывающей данное действие struct LogEntryIntent: AppIntent

Теперь нам необходимо реализовать метод perform() , именно он будет отрабатывать, когда на кнопку виджета будет производиться нажатие.

func perform() async throws -> some IntentResult < let dataProvider = UserDatabase.self // Получаем наш класс для управления БД dataProvider.log() // Делаем запись в журнал return .result() // Возвращаем пустой результат >

Важное замечание: Также мы можем определить дополнительные входные параметры для Intent. Для этого необходимо использовать обертку свойств @Parameter . Сохранённые параметры без данной обертки система обработать не сможет.

/// Структура, описывающая действие при нажатие кнопки на виджете, вызывающей данное действие struct LogEntryIntent: AppIntent

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

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

Теперь добавим инструменты для взаимодействия с виджетом. На момент написания этой статьи у нас в запасе имеется два инструмента для получения действий от пользователя.

  • Кнопка (Button)
  • Переключатель (Toggle)

Данные инструменты получили дополнительный инициализатор с параметром intent, принимающим AppIntent объект

/// Button(intent: , label: _#>) Button(intent: LogEntryDurationIntent()) < HStack(spacing: 2) < Text("+") .font(.system(size: 16)) .foregroundStyle(Palette.textColor) Image(systemName: "drop") .resizable() .frame(width: 10, height: 15) .foregroundStyle(Palette.textColor) >.padding(.horizontal) >.tint(Palette.indicatorColor) 

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

Теперь при взаимодействии с данной кнопкой система запустит переданный Intent, который исполнит наш код в методе perform(). Этот метод — асинхронный, поэтому возможна задержка перед отображением новых данных. Вы можете использовать модификатор .invalidateContent() в ваших View, которые будут обновляться с добавлением к ним системной анимации загрузки.

HStack(alignment: .bottom, spacing: 2) < Text(String(entry.percentValue)) .font(.system(size: 19, weight: .bold, design: .rounded)) .invalidatableContent() // Анимация при ожидании получения нового значения Text("%") .font(.system(size: 14, weight: .bold)) .padding(.bottom, 1) >.foregroundStyle(Palette.textColor)

Hidden text

Немного об анимации в виджетах

Виджеты используют другой подход к анимации, в отличие от обычного SwiftUI. При обработке нового entry система получает параметры, которые будут изменены, и анимирует только их. Тем не менее, вы можете использовать все транзитные анимации через модификатор .transition()

Text("46") .font(.system(size: 16)) .contentTransition(.numericText()) // Анимация для numeric контента

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

На этом процесс создания интерактивного виджета завершен.

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

Благодарим за внимание!

  • ios 17
  • виджеты
  • интерактивность
  • apple
  • приложения для iphone
  • создание мобильных приложений
  • Блог компании Программный Продукт
  • Разработка под iOS
  • Разработка мобильных приложений

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *