Виджеты для ios 14 как настроить

Использование виджетов на iPhone и iPod touch

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

В iOS 14 можно использовать виджеты на экране «Домой», чтобы нужная информация всегда была у вас под рукой. Или же можно использовать виджеты из представления «Сегодня», смахнув пальцем вправо на экране «Домой» или экране блокировки.

Добавление виджетов на экран «Домой»

1. На экране «Домой» нажмите и удерживайте виджет или пустую область, пока приложения не начнут покачиваться.
2. Нажмите кнопку «Добавить» в верхнем левом углу.
3. Выберите виджет, выберите один из трех размеров виджета, затем нажмите «Добавить виджет».
4. Нажмите «Готово».

Также можно добавить виджеты из представления «Сегодня». В представлении «Сегодня» нажмите и удерживайте виджет, пока не откроется меню быстрых действий, затем нажмите «Изменить экран «Домой»». Перетащите виджет к правому краю экрана, пока он не появится на экране «Домой», затем нажмите «Готово».

Добавление виджетов в представление «Сегодня»

1. В представлении «Сегодня» нажмите и удерживайте виджет или пустую область, пока приложения не начнут покачиваться.
2. Нажмите кнопку «Добавить» в верхнем левом углу.
3. Прокрутите вниз, чтобы выбрать виджет, затем выберите один из трех размеров виджета.
4. Нажмите «Добавить виджет», затем нажмите «Готово».

Редактирование виджетов

В iOS 14 можно настраивать виджеты. Например, можно отредактировать виджет «Погода», чтобы увидеть прогноз для вашего текущего или другого местоположения. Вот как это сделать.

1. Нажмите и удерживайте виджет, чтобы открыть меню быстрых действий.
2. Коснитесь значка «Редактировать виджет» .
3. Внесите нужные изменения, затем нажмите за пределами виджета, чтобы выйти из режима редактирования.

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

Использование стопок виджетов

В iOS 14 можно использовать стопки виджетов, чтобы сэкономить место на экране «Домой» и в представлении «Сегодня». Вы можете использовать смарт-стопки или создавать собственные стопки виджетов.

Создание смарт-стопки

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

1. На экране «Домой» или в представлении «Сегодня» нажмите и удерживайте пустую область, пока приложения не начнут покачиваться.
2. Нажмите кнопку «Добавить» в верхнем левом углу.
3. Прокрутите вниз и нажмите «Смарт-стопка».
4. Нажмите «Добавить виджет».

Создание собственных стопок виджетов

1. На экране «Домой» или в представлении «Сегодня» нажмите и удерживайте приложение или пустую область, пока приложения не начнут покачиваться.
2. Перетащите виджет поверх другого виджета. Вы можете добавить в стопку до 10 виджетов.
3. Нажмите «Готово».

Редактирование стопки виджетов

1. Нажмите и удерживайте стопку виджетов.
2. Нажмите «Редактировать стопку». Здесь вы можете изменить порядок виджетов в стопке, перетащив значок сетки . Вы также можете включить функцию «Смарт-замена», если вы хотите, чтобы iOS показывала соответствующие виджеты в течение дня. Или же смахните влево по виджету, чтобы удалить его.
3. По окончании нажмите .

Чтобы использовать смарт-стопки или создавать собственные стопки виджетов, необходима ОС iOS 14.

Источник

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

Рассказываем и показываем.

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

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

Затем нажмите значок + в левом верхнем углу дисплея.

Перед вами меню выбора виджетов.

Далее выбираем интересующий вас виджет. А после – его размер.

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

Виджет может занимать до 75% рабочего стола. Виджетов на весь экран в iOS 14 пока нет.

Но зато можно разместить одновременно шесть компактных.

Самые полезные виджеты iOS 14

Вот самые полезные виджеты в новой прошивке от Apple.

Виджет Погоды

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

Доступен в трёх размерах – маленьком квадрате, прямоугольнике и большом квадрате.

Виджет часто используемых приложений

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

Виджет называется «Предложения Siri».

Виджет напоминаний

С виджетом напоминаний забыть что-то станет ещё труднее.

Виджет часов

Не забываем о часах. Большие часы куда информативнее маленьких.

Заряд аккумулятора

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

В будущем количество виджетов наверняка будет увеличиваться. Но и то, что уже есть, не может не впечатлять.

Обязательно изучите и другие наши инструкции и материалы, посвященный iOS 14:

Источник

Виджеты в iOS 14 – возможности и ограничения

В этом году для iOS-разработчиков появилось сразу несколько интересных возможностей посадить батарейку айфона улучшить пользовательский опыт, одна из таких — новые виджеты. Пока мы все находимся в ожидании выхода релизной версии ОС, хотел бы поделиться опытом написания виджета для приложения «Кошелёк» и рассказать, с какими возможностями и ограничениями наша команда столкнулась на бета-версиях Xcode.

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

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

Работа с картами лояльности — одна из основных функций нашего приложения «Кошелёк». Периодически в отзывах в App Store появляются предложения от пользователей о возможности добавления виджета в Today. Пользователи, находясь у кассы, хотели бы как можно быстрее показать карту, получить скидку и убежать по своим делам, ведь промедление на любой квант времени вызывает те самые укоризненные взгляды в очереди. В нашем случае виджет может сэкономить несколько пользовательских действий для открытия карты, таким образом сделав операцию оплаты товара на кассе более быстрой. Магазины тоже будут благодарны — меньше очередей на кассе.

В этом году Apple неожиданно для всех выпустила релиз iOS практически сразу после презентации, оставив разработчикам сутки на доработки своих приложений на Xcode GM, но мы оказались готовы к релизу, так как свой вариант виджета наша iOS-команда стала делать еще на бета-версиях Xcode. Сейчас виджет находится на ревью в App Store. Обновление устройств до новой iOS по статистике происходит довольно быстро; скорее всего, пользователи пойдут проверять, у каких приложений виджеты уже есть, найдут наш и будут счастливы.

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

Добавление виджета в проект

Как и другие подобные дополнительные возможности, виджет добавляется как расширение (extension) к основному проекту. После добавления Xcode любезно генерирует код виджета и других основных классов. Вот тут нас ждала первая интересная особенность — для нашего проекта этот код не компилировался, так как в одном из файлов автоматически подставлялся префикс в названиях класса (да-да, те самые Obj-C префиксы!), а в генерируемых файлах — нет. Как говорится, не боги горшки обжигают, видимо, разные команды внутри Apple не договорились между собой. Будем надеяться, что к релизной версии исправят. Для того, чтобы настроить префикс своего проекта, в File Inspector основного таргета приложения заполните поле Class Prefix.

Для тех, кто следил за новинками WWDC, не секрет, что реализация виджетов возможна только с использованием SwiftUI. Интересный момент, что таким образом Apple форсит обновление на свои технологии: даже если основное приложение написано с использованием UIKit, то тут, будьте любезны, только SwiftUI. С другой стороны, это хорошая возможность попробовать новый фреймворк для написания фичи, в этом случае он удобно вписывается в процесс — никаких изменений состояния, никакой навигации, требуется только задекларировать статичный UI. То есть вместе с новым фреймворком появились и новые ограничения, потому как старые виджеты в Today могут содержать больше логики и анимацию.

400K строк кода) работает крайне медленно даже на топовых макбуках, быстрее запустить на девайсе. Альтернатива такому способу — иметь под рукой пустой проект или плейграунд для быстрого прототипирования.

Возможность для дебага также есть с помощью выделенной Xcode схемы. На симуляторе отладка работает нестабильно даже к версии Xcode 12 beta 6, поэтому лучше пожертвовать один из тестовых девайсов, обновить до iOS 14 и тестировать на нем. Будьте готовы, что эта часть и на релизных версиях будет работать не как ожидается.

Интерфейс

На выбор пользователю даются разные типы (WidgetFamily) виджетов трёх размеров — small, medium, large.

Для регистрации необходимо явно указать поддерживаемые:

Мы с командой решили остановиться на small и medium — выводить одну любимую карту для маленького виджета или 4 для medium.

Добавление виджета на рабочий стол происходит из центра управления, там пользователь выбирает необходимый ему вид:

Цвет кнопки «Добавить виджет» кастомизируем с помощью Assets.xcassets -> AccentColor, имя виджета с описанием тоже (пример кода выше).

Если уперлись в ограничение по количеству поддерживаемых видов, то можно расширить его с помощью WidgetBundle:

Так как виджет показывает слепок некоторого состояния, то единственная возможность для пользовательского интерактива — это переход в основное приложение по нажатию на какой-то элемент или весь виджет. Никакой анимации, навигации и переходов на другие view. Но есть возможность прокинуть диплинку в основное приложение. При этом для small виджета зоной нажатия является вся область, и в этом случае используем widgetURL(_:) метод. Для medium и big доступны нажатия по view, и в этом нам поможет структура Link из SwiftUI.

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

При проектировании интерфейса виджета могут помочь следующие правила и требования (согласно гайдлайнам Apple):

1. Сфокусируйте виджет на одной идее и проблеме, не пытайтесь повторить всю функциональность приложения.
2. В зависимости от размера выводите больше информации, а не просто масштабируйте контент.
3. Выводите динамическую информацию, которая может меняться в течение дня. Крайности в виде полностью статической информации и информации, меняющейся ежеминутно, не приветствуются.
4. Виджет должен давать актуальную информацию пользователям, а не быть еще одним способом открыть приложение.

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

1. Дать возможность пользователю выбирать карты. Кто, как не он, знает, какие карты важнее!
2. Показывать последние использованные карты.
3. Сделать более умный алгоритм, ориентируясь, например, на время и день недели и статистику (если пользователь по будням вечером ходит во фруктовую лавку у дома, а на выходных ездит в гипермаркет, то можно помочь пользователю в этом моменте и показывать нужную карту)

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

Пользовательские настройки виджета

Настройки формируются с помощью интентов (привет Андроид-разработчикам) — при создании нового виджета файл интента добавляется в проект автоматически. Кодогенератор подготовит класс-наследник от INIntent, который является частью фреймворка SiriKit. В параметрах интента стоит магическая опция «Intent is eligible for widgets». Доступны несколько типов параметров, можно настраивать свои подтипы. Так как данные в нашем случае — это динамический список, то еще устанавливаем пункт «Options are provided dynamically».

Для разных типов виджета настраиваем максимальное количество элементов в списке — для small 1, для medium 4.
Этот тип интента используется виджетом как источник данных.

Далее настроенный класс интента необходимо поставить в конфигурацию IntentConfiguration.

В случае, если пользовательские настройки не требуются, то есть альтернатива в виде класса StaticConfiguration, которая работает без указания интента.

Изменяемыми на экране настроек являются title и description.
Название у виджета должно помещаться на одну строку, иначе оно обрезается. При этом допустимая длина для экрана добавления и настроек виджета отличаются.
Примеры максимальной длины названия для некоторых устройств:

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

Также можно изменить цвет фона и значения параметров WidgetBackground и AccentColor — по умолчанию они уже лежат в Assets. При необходимости их можно переименовать в конфигурации виджета в Build Settings у группы Asset Catalog Compiler — Options в полях Widget Background Color Name и Global Accent Color Name соответственно.

Некоторые параметры могут быть скрыты (или показаны) в зависимости от выбранного значения в другом параметре через настройку Relationship.
Стоит отметить, что UI для редактирования параметра зависит от его типа. К примеру, если укажем Boolean, то мы увидим UISwitch, а если Integer, то тут у нас уже выбор из двух вариантов: ввод через UITextfield или пошаговое изменение через UIStepper.

Взаимодействие с основным приложением.

Связку настроили, осталось определить, откуда сам интент возьмет реальные данные. Мостик с основным приложением в этом случае — файл в общей группе (App Groups). Основное приложение пишет, виджет — читает.
Для получения URL к общей группе используется следующий метод:

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

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

Обновление данных

В целях бережного отношения к батарейке пользовательского девайса Apple продумали механизм обновления данных на виджете с использованием timeline — механизма генерации слепков (snapshot). Напрямую разработчик не обновляет и не управляет view, но зато предоставляет расписание, руководствуясь которым, операционная система нарежет снапшотов в бэкграунде.
Обновление происходит по следующим событиям:

1. Вызов используемого ранее WidgetCenter.shared.reloadAllTimelines()
2. При добавлении виджета пользователем на рабочий стол
3. При редактировании настроек.

Также в распоряжении разработчика три вида политик по обновлению таймлайнов (TimelineReloadPolicy):
atEnd — обновление после показа последнего cнапшота
never — обновление только в случае принудительного вызова
after(_:) — обновление через определенный промежуток времени.

В нашем случае достаточно попросить систему сделать один снепшот до момента, пока данные карт не обновились в основном приложении:

Более гибкий вариант пригодился бы при использовании автоматического алгоритма подбора карточек в зависимости от дня недели и времени.

Отдельно стоит отметить показ виджета, если он находится в стэке из виджетов (Smart Stack). В этом случае для управления приоритетами мы можем воспользоваться двумя вариантами: Siri Suggestions или через установку значения relevance у TimelineEntry с типом TimelineEntryRelevance. TimelineEntryRelevance содержит два параметра:
score — приоритет текущего снапшота относительно других снапшотов;
duration — время, пока виджет остается актуальным и система может поставить его на верхнюю позицию в стэке.

Оба способа, а также возможности конфигурации виджета, были подробно рассмотрены на сессии WWDC.

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

Text поддерживает следующие стили:
relative — разница времени между текущей и заданной датами. Тут стоит отметить: если дата указана в будущем, то начинается обратный отсчет, а после показывается дата от момента достижения нуля. Такое же поведение будет и для следующих двух стилей;
offset — аналогично предыдущему, но есть индикация в виде префикса с ±;
timer — аналог таймера;
date — отображение даты;
time — отображение времени.

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

Превью виджета

При первом отображении виджет будет открыт в режиме превью, для этого нам необходимо вернуть TimeLineEntry в методе placeholder(in:). В нашем случае это выглядит так:

После чего к view применяется модификатор redacted(reason:) с параметром placeholder. При этом элементы на виджете отображаются размытыми.

Мы можем отказаться от этого эффекта у части элементов, использовав unredacted() модификатор.
Также в документации сказано, что вызов метода placeholder(in:) происходит синхронно и результат должен вернуться максимально быстро, в отличие от getSnapshot(in:completion:) и getTimeline(in:completion:)

Скругление элементов

В гайдлайнах рекомендуется согласовать скругление у элементов со скруглением виджета, для этого в iOS 14 была добавлена структура ContainerRelativeShape, которая позволяет применить к view форму контейнера.

Поддержка Objective-C

В случае необходимости добавить в виджет код на Objective-C (например, у нас на нем написана генерация изображений штрихкодов) всё происходит стандартным способом через добавление Objective-C bridging header. Единственная проблема, с которой мы столкнулись — при сборке Xcode перестал видеть автогенерируемые файлы интентов, поэтому мы также добавили их в bridging header:

Размер приложения

Тестирование проводилось на Xcode 12 beta 6
Без виджета: 61.6 Мб
С виджетом: 62.2 Мб

Резюмирую основные моменты, которые рассмотрели в статье:

1. Виджеты — отличная возможность пощупать SwiftUI на практике. Добавляйте их в проект, даже если минимальная поддерживаемая версия ниже iOS 14.
2. WidgetBundle используется для увеличения числа доступных виджетов, вот отличный пример как много различных виджетов имеет приложение ApolloReddit.
3. Для добавления пользовательских настроек на самом виджете поможет IntentConfiguration или StaticConfiguration, если пользовательские настройки не нужны.
4. Общая папка на файловой системе в общей группе App Groups поможет синхронизировать данные с основным приложением.
5. На выбор разработчику предоставляется несколько политик обновления таймлайна (atEnd, never, after(_:)).

На этом тернистый путь разработки виджета на бета-версиях Xcode можно считать завершенным, остался один простой шаг — пройти ревью в App Store.

P.S. Версия с виджетом прошла модерацию и теперь доступна для скачивания в App Store!

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

Источник