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

Аналогично этой программе работает другое приложение — ScreenKit. В него входит более 5000 значков для создания собственного фирменного стиля иконок и виджетов, более 500 потрясающих готовых тем и виджетов в разных категориях, от батареи до календаря. С ним у вас есть возможность украсить экран множеством эксклюзивных виджетов, созданных именно вами.

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

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

Как поставить фото на виджет iPhone

Вместо простых цветных панелей для создания красивого виджета можно использовать картинки или фото из галереи. Вот как происходит процесс в программе Widgetsmith:

• заходим в приложение и выбираем нужный размер виджета;
• нажимаем на него и выбираем add photo;
• выбираем фото из галереи и нажимаем Done;
• выходим из приложения на главный экран телефона;
• добавляем на нужный экран виджет через знак + — выбираем приложение Widgetsmith;
• добавляем его на экран;
• зажимаем виджет пальцем и нажимаем Изменить;
• выбираем тот слой, на котором стоит картинка или фото.

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

Подборка самых нужных и красивых виджетов для iPhone

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

1. Виджет Контакты. Позволяет отобразить несколько самых важных контактов, которым вы звоните постоянно. Виджет доступен в разных размерах (2 × 2, 2 × 4 и 4 × 4), соответственно, на нем можно разместить разное количество аватарок контактов. Если вы выберете контакт из виджета, увидите все сообщения от него и фото, которые относятся к этому человеку.

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

3. Смарт-стопка. Коллекция виджетов, которые меняются автоматически в течение дня, показывая наиболее актуальную информацию. Это может быть погода с утра, календарь в первой половине дня, далее фотографии, заметки, музыка, мировые часы и др. Состав стопки можно изменить. Также виджеты из стопки можно просто пролистывать, получая обновленную информацию.

4. Погода. Несомненно, один из самых важных виджетов на iPhone. С утра получите значение температуры и определитесь, как одеться, в течение дня следите за прогнозом осадков. Для этого виджета есть масса сторонних приложений — Weatherly, Focus Weather, Dirty Weather и другие. Но и встроенный в iOS погодный виджет отлично справляется со своей задачей.

5. Photo Widget. Приложение для украшения домашнего экрана и экрана блокировки собственными фотографиями, которые постоянно меняются. Позволяет установить тему по принципу «все включено» — виджеты, иконки, обои определенного стиля. Позволяет кастомизировать иконки и виджеты, то есть использовать собственные идеи в оформлении iPhone. Созданными виджетами и иконками можно делиться с друзьями.

6. Виджет элементов питания. Состоит из 4 элементов и показывает уровень заряженности телефона и аксессуаров, подключенных по bluetooth: часов, наушников, мышки или планшета.

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

8. Календарь. Незаменимый виджет, поскольку показывает предстоящие события из Google Calendar. Стандартный предустановленный справляется со своей задачей, но для большего количества настроек можно использовать приложения Fantastical и Busycal.

9. Файлы. Обеспечивает доступ к недавно открытым файлам. Удобно использовать для регулярного просмотра рабочих документов или литературы.

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

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

12. WhatsApp. Этот виджет для iPhone не нуждается в пояснениях. Всегда удобно видеть миниатюры из списка самых важных контактов на экране.

13. Memo — Sticky Notes. Бесплатное приложение для создания стикеров, липких заметок, размещения их на главном экране и перемещения в нужные места. Настраиваются цвета заметок и шрифты, есть теги, списки и другие инструменты форматирования.

14. Stocard. Виджет для быстрого доступа к одной или трем картам лояльности, которые вы используете чаще всего. С ним вам не придется ощущать недовольство на кассе, пока вы загружаете приложение с картой.

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

Выводы

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

Для iPhone существуют предустановленные виджеты — такие, как Контакты, Экранное время, Фитнес и др., а также виджеты от отдельных приложений, скачанных в AppStore.

Чтобы создать фирменный стиль iPhone, рекомендуем использовать программы редактирования виджетов и иконок Widgetsmith и ScreenKit. Они содержат как готовые темы оформления, так и массу инструментов для креатива. Установить виджет на iPhone очень просто: на нужном экране необходимо зажать любое свободное место, затем нажать плюс в верхнем правом углу и выбрать виджет из предложенной коллекции.

Делаем свой Widget в iOS 14

В iOS 14 и macOS 11 Apple представили Widgets. Еще один способ взаимодействия пользователя с приложением. В данной статье рассмотрим основные принципы работы WidgetKit и интегрируем свой Widget в готовый проект.

Введение

Что такое Widget?

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

Widgets галерея

Пользователи могут найти виджеты в галерее виджетов, там же они могут выбрать размер для виджета. Всего есть 3 размера для виджетов: small, medium и large.

Для того чтобы добавить виджет на экран нужно войти в режим редактирования домашнего экрана и нажать на плюсик в верхнем левом углу, откроется галерея, где будут представлены виджеты приложений, но только от тех приложений, которые их поддерживают. При нажатии на конкретный виджет можно будет выбрать его тип и его размер, например приложение Stocks имеет 2 типа виджетов Watchlist и Symbol, причем для Watchlist представлены все 3 размера, а для Symbol только один.

Основные принципы

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

• Придерживайтесь одной идеи. Главная идея вашего приложения должна быть отображена в вашем виджете. Например приложение Weather может показывать погоду для одной локации, приложение Stocks последние котировки акций.
• Для каждого размера показывайте только ту информацию, которая прямо относится к вашей идее. Для Stocks это может быть отображение только 3-х акций для маленького размера с указанием только названия и цены, а для большого размера это будет отображение более 5 акций с более детальной информации по ним.
• Не создавайте виджет, который ничего не делает, а только открывает приложение. Пользователь ожидает возможность просмотра важной информации без открытия приложения.
• Сделайте поддержку нескольких размеров, это улучшит пользовательский опыт. Реализация одного маленького размера приведет к тому, что на бОльших размерах много свободного пространства будет не задействовано, что не придает привлекательности приложению.
• Информация показанная на виджете должна меняться в течении дня. Если информация будет статичной или будет меняться очень редко, то будет ли польза от такого виджета? Поэтому важно чтобы информация менялась в течении дня, для приложения Calendar это будут предстоящие митинги, для Weather текущая погода.

Конфигурация виджета

• Позвольте пользователю конфигурировать виджет, когда это имеет смысл. Например для Weather можно выбрать город, откуда будет показываться погода, для Stocks доступен выбор акции, котировки который вы хотите мониторить.
• Когда нажимаете на виджет, убедитесь что открывается нужный экран приложения. Если нажали на пару USD/RUB в Stocks от должен открыться экран с детальной информацией по этой паре, а не какая-то другая.
• Избегайте большого количества нажимаемых элементов на виджете. Можно иметь несколько элементов на которые можно нажать, но тут надо быть аккуратным, чтобы у пользователя не возникло проблем с попаданием пальцем на нужный элемент виджета.

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

Обновление виджета

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

Дизайн виджета

Пройдемся кратко по дизайну.

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

• Рассмотрите использование шрифта SF Pro. Согласитесь, что приятно, когда все виджеты на домашнем экране имеют одинаковый шрифт, а не когда у каждого свой.
• Используйте текстовые элементы в виджете. Убедитесь, что текст масштабируется нормально, не растрируйте его, иначе это приведет к проблем с VoiceOver.
• Проектируйте реалистичную превьюшку для отображения в галерее виджетов. Покажите какими возможностями обладает этот виджет, вы так же можете отобразить реальные данные здесь, но если загрузка этих данных занимает много времени, то может просто заменить моками.
• Используйте скелетоны, чтобы дать понять пользователю структуру виджета. Виджет показывает скелетон, когда данные все еще загружаются.

• Напишите короткое, но емкое описание для виджета. В Галереи виджетов есть описание для каждого виджета, что именно он делает. Рекомендуется начинать это писание с глагола, например «Следить за предстоящими митингами», «Посмотреть погоду в указанной местности» и т.д.

Поддержка различных размеров экранов

Виджеты масштабируются к размеру экрана на различных устройствах, начиная с iPhone 6s заканчивая iPhone 11 Pro Max.

• Убедитесь что картинки, соответствуют размерам виджета. Ниже представлена таблица с размерами виджетов.

• Уравняйте скругление углов элементов в вашем виджете со скруглением углов самого виджета. Позаботесь о том, чтобы контент виджета выглядел хорошо со скругленными углами этого виджета, в этом может помочь ContainerRelativeShape.
• Рекомендуется использовать стандартные отступы между элементами. Стандартный отступ это 16 поинтов, использование стандартного отступа поможет разместить элементы в читабельном виде и сделает контент более разборчивым для пользователя.

Smart Stack

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

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

Встречаем WidgetKit

Определение

WidgetKit позволяет пользователю получить доступ к возможностям вашего приложения с помощью вынесения виджета на iOS Home screen или в macOS Notification Center.
С тремя различными размерами для виджета (small, medium, large) у пользователя есть выбор, сколько именно информации он хочет видеть.

Создание Widget’a

Чтобы создать свой виджет, вам нужно добавить Widget Extension к своему приложению. Сам контент виджета создается с помощью SwiftUI, чтобы настроить виджет используется Timeline Provider, он используется для того, чтобы сказать виджету когда ему обновлять свой контент.

Чтобы позволить пользователю конфигурировать виджет вы добавляете свой SiriKit intent definition, остальное сделает WidgetKit за вас и предоставит пользователю кастомизированный интерфейс.

Создаем Widget extension

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

Определение главной идеи для виджета

Перво-наперво нужно определиться с главной идеи для виджета, какую проблему он будет решать, будет ли он полезен пользователю, также желательно соотнести вашу идею с эпловскими гайдлайнами.

Приложение

Существующий проект

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

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

Для того чтобы добавить виджет в приложение нужно выбрать File -> New -> Target, на вкладке iOS выбираем Widget Extension, даем имя нашему виджету, например LadderWidget . В проект добавится новый таргет, также файл LadderWidget.swift, где будет сразу добавлены все необходимые классы. Уже начиная с этого моменты, можно запустить виджет, выбрав соответствующий таргет, и увидеть результат на экране симулятора.

Основные классы

Рассмотрим какие классы создал для нас Xcode.

• LadderWidget
• LadderWidgetEntryView
• Provider
• SimpleEntry

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

• SimpleEntry — слепок, который содержит данные для отображения их на виджете;
• Provider — предоставляет таймлайн из слепков для виджета;
• LadderWidgetEntryView — View для виджета, тут определяется как будет выглядеть виджет;
• LadderWidget — наследник Widget , это непосредственно и есть наш виджет.

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

Проведем небольшой рефакторинг и переименуем наши структуры.

LadderEntry

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

struct LadderEntry: TimelineEntry < let date: Date // your properties ->let name: String >

То есть если ваш виджет будет показывать, например, погоду, то у вас скорее всего будут свойства let cityName: String , let cityTemperature: Double , ну и let date: Date , последнее свойство определяет дату когда WidgetKit обновит виджет и является обязательным, чтобы следовать протоколу TimelineEntry .

LadderProvider

Кто-то должен предоставлять LadderEntry для виджета и за это ответственен LadderProvider . Эта структура следует протоколу TimelineProvider , взлянем на определение.

protocol TimelineProvider < associatedtype Entry : TimelineEntry typealias Context = TimelineProviderContext func placeholder(in context: Context) ->Entry func getSnapshot(in context: Context, completion: @escaping (Entry) -> Void) func getTimeline(in context: Context, completion: @escaping (Timeline) -> Void) >

• placeholder(in context: ) — возвращает слепок, который будет использоваться как отображения шаблонной версии виджета.
• getSnapshot(in context: , completion:) — возвращает слепок, который представляет текущее время и состояние виджета.
• getTimeline(in context: , completion:) — возвращает массив слепков в виде таймлайна для текущего времени и будущих случаев обновления виджета.

LadderWidgetEntryView

Это обычное View , которое определяет, как будет выглядеть наш виджет.

struct LadderWidgetEntryView : View < var entry: LadderProvider.Entry var body: some View < Text(entry.date, style: .time) >>

LadderWidget

LadderWidget — наследник Widget , если посмотреть на определение протокола Widget , то можно заметить, что оно сильно напоминает обычный View , так же через body определяется контент виджета, но тут также указывается, как виджет будет конфигурироваться статически или динамически, а также здесь указывается провайдер для виджета.

@main struct LadderWidget: Widget < let kind: String = "LadderWidget" var body: some WidgetConfiguration < StaticConfiguration(kind: kind, provider: LadderProvider()) < entry in LadderWidgetEntryView(entry: entry) >.configurationDisplayName("My Widget") .description("This is an example widget.") .supportedFamilies([.systemMedium, .systemSmall]) > >

• .configurationDisplayName(_) указывает название виджета в галерее виджетов;
• .description(_) указывает описание в галерее виджетов;
• .supportedFamilies(_) указывает какие размеры будет поддерживать виджет, если не указать, то будут поддерживаться все размеры.

@main перед определением виджета обозначает «точку входа» для данного таргета, а именно то, что при запуске будет показан именно Ladder Widget.

Ladder Widget начало

Размеры виджета — .widgetFamily

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

Начнем с LadderEntry , для этого добавим соответствующую поле.

struct LadderEntry: TimelineEntry

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

Теперь обновим как будет отображается виджет.

struct LadderWidgetEntryView : View < var entry: LadderProvider.Entry @Environment(\.widgetFamily) var family @ViewBuilder var body: some View < switch family < case .systemSmall: ProfileInfoView(profile: entry.profile) default: ProfileView(profile: entry.profile) >> >

С помощью @Environment(\.widgetFamily) можно получить доступ к размеру виджета и в зависимости от значения показывать просто текст для маленького размера или картинку и текст для среднего размера.

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

struct LadderWidgetEntryView_Previews: PreviewProvider < static var previews: some View < Group < LadderWidgetEntryView(entry: LadderEntry(date: Date(), profile: sampleProfile)) .previewContext(WidgetPreviewContext(family: .systemSmall)) LadderWidgetEntryView(entry: LadderEntry(date: Date(), profile: sampleProfile)) .previewContext(WidgetPreviewContext(family: .systemMedium)) >> >

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

Конфигурация виджета — IntentConfiguration

Чтобы добавить динамическую конфигурацию, нужно в LadderWidget заменить StaticConfiguration на IntentConfiguration , для этого нажимаем File -> New -> File -> SiriKit Intent Definition File. Называем файл LadderIntents.intentdefinition.

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

Гуд, теперь создадим сам Intent , нажимаем на плюсик и кликаем New Intent, называем его ProfileSelection и конфигурируем, как показано на картинке.

Xcode под капотом сгенерирует для нас класс ProfileSelectionIntent . Теперь заменим конфигурацию в нашем LadderWidget .

 IntentConfiguration(kind: kind, intent: ProfileSelectionIntent.self, provider: LadderProvider())

Компилятор будет ругаться, что LadderProvider не следует протоколу IntentTimelineProvider , исправляем это, для этого просто следуем протоколу IntentTimelineProvider вместо TimelineProvider и обновляем сигнатуры функций соответственно.
Раз мы добавили ProfileSelectionIntent , значит пора его где-то использовать, то есть в зависимости от выбранного профиля наш провайдер должен отдавать соответствующий LadderEntry . Обновим наш getTimeline(for configuration:, in context:, completion:)

 func getTimeline(for configuration: ProfileSelectionIntent, in context: Context, completion: @escaping (Timeline) -> ()) < let entries: [LadderEntry] = [LadderEntry(date: Date(), profile: profile(for: configuration))] let timeline = Timeline(entries: entries, policy: .atEnd) completion(timeline) >func profile(for configuration: ProfileSelectionIntent) -> Profile < switch configuration.profile < case .lina: return Profile(id: 3, name: "Lina", . ) case .morphling: return Profile(id: 2, name: "Morphling", . ) // . >>

Теперь у виджета появится кнопка Edit Widget и выбор отображаемого профиля для виджета.

Показ Placeholder’a

Когда WidgetKit отображает виджет первый раз, он показывает вью виджета как placeholder. Вью Placeholder view показывает общую структуру вашего виджета, как бы давая пользователю понять, что будет отображено на виджете. WidgetKit вызывает placeholder(in:) у провайдера чтобы получить слепок для placeholder’a.

 func placeholder(in context: Context) -> LadderEntry

WidgetKit использует redacted(reason:) модификатор, чтобы показать вью как placeholder.
Для того, чтобы понять, как будет выглядеть наш виджет в данном случае давайте создадим LadderWidgetPlaceholderView .

struct LadderWidgetPlaceholderView: View < var entry: LadderProvider.Entry var body: some View < LadderWidgetEntryView(entry: entry) .redacted(reason: .placeholder) >>

То есть мы просто показываем вью нашего виджета и применяем к нему модификатор .redacted(reason: .placeholder) . Если есть необходимость не показывать какие-то отдельные элементы вью как placeholder, то можно использовать оператор .unredacted() для них.

Более подробно про работу placeholder’ов можно прочитать у Majid Jabrayilov здесь.

Данные для Ladder Widget

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

Плейсхолдер

func placeholder(in context: Self.Context) -> Self.Entry

Тут все просто, просто возвращаем слепок для плейсхолдера.

Таймлайн

 func getTimeline(for configuration: Self.Intent, in context: Self.Context, completion: @escaping (Timeline) -> Void)

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

По сути таймлайн это просто структура, которая содержит массив слепков и объект полиси.

struct Timeline where EntryType : TimelineEntry

Как мы помним, слепок здесь это наша структура LadderEntry , у которой есть date и собственно данные для виджета, так вот эта date и определяет когда виджет будет обновлен в будущем.

Можно например сгенерировать таймлайн, где виджет будет обновляться каждые 3 секунды на протяжении 1 минуты.

 func getTimeline(for configuration: ProfileSelectionIntent, in context: Context, completion: @escaping (Timeline) -> ()) < let profile = self.profile(for: configuration) var entries: [LadderEntry] = [LadderEntry(date: Date(), profile: profile)] let threeSeconds: TimeInterval = 3 var currentDate = Date() let endDate = Calendar.current.date(byAdding: .minute, value: 1, to: currentDate)! while currentDate < endDate < let newScore = Double.random(in: 150. 200) let newProfile = Profile(id: profile.id, name: profile.name, rating: profile.rating, score: newScore, imageName: profile.imageName) let entry = LadderEntry(date: currentDate, profile: newProfile) entries.append(entry) currentDate += threeSeconds >let timeline = Timeline(entries: entries, policy: .atEnd) completion(timeline) >

Что будет когда закончится эта 1 минута? Это зависит от того, что указано в policy объекта структуры TimelineReloadPolicy .

• atEnd — WidgetKit запросит новый таймлайн;
• never — само приложение скажет WidgetKit’у когда обновить виджет;
• after(_ date: ) — определяет точную дату, когда WidgetKit запросит новый таймлайн.

Текущий снапшот

Осталась одна функция в провайдере, которую осталась описать.

 func getSnapshot(for configuration: Self.Intent, in context: Self.Context, completion: @escaping (Self.Entry) -> Void)

В ней мы возвращает слепок, который представляет текущее время и состояние виджета. По сути реализация мало чем отличается от getTimeline() , но есть один момент который стоит упомянуть.

WidgetKit вызывает этот метод, когда виджет появляется в разных переходах и так же в галерее виджетов, тогда context.isPreview == true . В этом случае нужно вызвать комплишен как можно быстрее, допускается возвращать заранее приготовленные данные, если загрузка реальных данных может занять больше пары секунд.

 func getSnapshot(for configuration: ProfileSelectionIntent, in context: Context, completion: @escaping (LadderEntry) -> ()) < if context.isPreview < let entry = LadderEntry(date: Date(), profile: sampleProfile) completion(entry) >else < // it takes a few seconds to fetch the data let profile = self.profile(for: configuration) let entry = LadderEntry(date: Date(), profile: profile) completion(entry) >>

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

Ladder Widget больше фич

WidgetBundle

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

Важный момент здесь, что точка входа может быть только одна, то есть @main должен быть только один и стоять перед WidgetsBundle .

@main struct WidgetsBundle: WidgetBundle < @WidgetBundleBuilder var body: some Widget < LadderWidget() NewsWidget() >>

Здесь Xcode может бросить ошибку:

Please specify the widget kind in the scheme’s Environment Variables using the key ‘_XCWidgetKind’ to be one of: ‘LadderWidget’, ‘NewsWidget’>.

Чтобы это поправить нужно пойти Edit Scheme виджет таргета и поправить значение свойства _XCWidgetKind .

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

IntentHandler

Что если, когда мы редактируем виджет мы хотели бы иметь не статические параметры, а динамические? Которые мы могли бы, скажем, загружать с сервера?

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

Итак начнем, создаем новый таргет New -> Target -> Intents Extension и даем ему имя например LadderWidgetIntent. Далее руками создаем DynamicLadderIntents.intentdefinition. Его конфигурация будет похожа на LadderIntents.intentdefinition, но с небольшими отличиями.

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

Теперь везде в проекте нужно заменить ProfileSelectionIntent на DynamicProfileSelectionIntent .

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

extension IntentHandler: DynamicProfileSelectionIntentHandling < func provideProfileTypeOptionsCollection(for intent: DynamicProfileSelectionIntent, with completion: @escaping (INObjectCollection?, Error?) -> Void) < DispatchQueue.global().asyncAfter(deadline: .now() + 1) < let items: [ProfileType] = [ ProfileType(identifier: "1", display: "Bloodseeker"), ProfileType(identifier: "2", display: "Morphling"), ProfileType(identifier: "3", display: "Lina")] let collection = INObjectCollection(items: items) completion(collection, nil) >> >

Поправляем функцию profile(for _:) в провайдере и теперь наша конфигурация подтягивается динамически.

Передача данных между виджетом и приложением

iOS предоставляет несколько способов передачи данных между виджетом и приложением.

1. Keychain access group — хорошо подойдет если нужно передать какой-нибудь сервер-сайд токен, ключ или любую другую сенситив информацию.
2. App group — предоставляет больше возможностей, но меньше секьюрити. Можно шарить UserDefaults , а также место на диске.

UserDefaults(suiteName: appGroup)

let url = sharedFileManager.containerURL(forSecurityApplicationGroupIdentifier: appGroupID)

Принудительное обновление виджета

Приложение может обновить свой виджет не дожидаясь, когда это сделает система, с помощью WidgetCenter.

WidgetCenter.shared.reloadAllTimelines()

Еще пару слов

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

Вопрос: Можно ли использовать готовые UIKit вьюшки в виджетах?
Ответ: Нет, виджеты работают только на чистом SwiftUI, даже если вы обернете UIKit вьюшку в SwiftUI вью, то да код скомпилируется, но на устройстве вы увидите просто желтый экран заглушку.

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

Заключение

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

Ссылки

• Apple: Widgets HIG
• Apple: WidgetKit
• WWDC: Widgets Code-along, part 1: The adventure begins
• WWDC: Widgets Code-along, part 2: Alternate timelines
• WWDC: Widgets Code-along, part 3: Advancing timelines
• Swift with Majid: The magic of redacted modifier in SwiftUI
• https://github.com/TikhonovAlexander/Widgets

Как сменить иконки и тему на iOS 14

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

• Обзор iPhone SE 2020
• Как следить за мужем или женой на iPhone
• Обзор и отличия iPhone 11 Pro от iPhone XS Max

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

Было Стало

Инструкция как сменить иконки в iOS 14 на любом iPhone

Первым делом заходим в приложение «Команды». Я его в своё время удалил, поэтому пришлось заново скачивать из App Store.

Тыкаем на плюс, затем на «Добавить действие», а после на иконку «Скрипты».

Пролистываем до пункта «Открыть приложение», выбираем и по логике выбираем нужную нам программку. Допустим, это будет «Календарь».

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

Указываем название команды (любое, по удобству) и нажимаем на «Добавить на экран домой». В открывшемся окне указываем название команды. Например, для приложение «Фото» это будет «Фото». Далее рядом тыкаем на выделенную рамкой иконку команды и в выпадающем меню тыкаем на «Выбрать фото».

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

Всё!

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

Жмём на три точки в углу только что созданной копии «шортката» и настраиваем по уже знакомому нам алгоритму новую иконку.

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

Встроенных возможностей не хватает. Например, виджет приложения «Фото» всегда отображает одну и ту же фотографию. Причем выбор виджета очень странный и труднообъяснимый.

Так что для того, чтобы создать собственный виджет (вообще любой, не только для фото), нужно установить приложение Widgetsmith из App Store. Оно платное, но для знакомства с возможностями хватит и бесплатной версии.

Заходим в приложение и выбираем, например, Small #1. В самом вверху переименовываем по-своему вкусу.

Следом выбираем картинку в окне « Default Widget». Пролистываем до «Photo» и выбираем этот пункт. Далее ниже находим вкладку «Selected Photo». Затем тапаем по «Choose Photo», выбираем фото и сохраняем результат.

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

Виджеты в iOS 14 на iPhone или iPad: как добавлять, настраивать и пользоваться

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

Читайте «Яблык» в Telegram и смотрите в YouTube. Подписывайтесь!

Видео:

Уже прошли те времена, когда домашний экран iOS был построен на основе сетки квадратных иконок приложений и их папок. iOS 14 привносит в интерфейс совершенно новый внешний вид, благодаря виджетам домашнего экрана. Их можно настраивать по размеру и форме, предлагая тем самым отличную функциональность. Эта идея не нова, поскольку еще Microsoft давным-давно использовала подобный настраиваемый стиль сетки со своим Windows Phone, но Apple для iOS создала до конца продуманный четкий внешний вид с виджетами домашнего экрана, включая аккуратный вариант «Смарт стопок».

Как добавлять виджеты домашнего экрана на iPhone с iOS 14

1. Нажмите и удерживайте палец на пустом месте главного экрана, пока иконки приложений не начнут покачиваться (или нажмите и удерживайте на значок любого приложения → Изменить экран «Домой»).

2. Нажмите значок + в левом верхнем углу.

3. Теперь вы увидите доступные виджеты.

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

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

6. Нажмите «Готово» в правом верхнем углу, чтобы установить виджет.

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

Что такое Смарт стопки?

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

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

Как самостоятельно создавать Смарт-стопки?

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

Как удалять виджеты (смарт-стопки) на iPhone и iPad

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

2. Нажмите на «–» в левом верхнем углу виджета.

3. В появившемся всплывающем окне нажмите «Удалить».

Кроме того, удалить виджет можно путем нажатия и удержания пальца на самом виджете. В этом случае в появившемся всплывающем меню необходимо выбрать Удалить виджет.

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

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

Управление виджетами на iPhone с iOS 10 – iOS 13

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

Как открывать виджеты на iPhone и iPad

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

Кроме того, доступ к ним можно получить через «Центр уведомлений». Сделать это можно следующим образом:

1. Проведите по экрану iPhone или iPad сверху вниз.

2. Проведите по экрану вправо, чтобы получить доступ к виджетам.

Как пользоваться виджетами на iPhone и iPad

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

1. Проведите по экрану вправо, чтобы просмотреть открыть экран виджетов.

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

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

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

1. Проведите вправо на главном экране или экране блокировки, чтобы просмотреть свои виджеты.

2. Прокрутите список до виджета, который вы хотите развернуть.

3. Нажмите «стрелку вправо».

4. Нажмите «стрелку вниз», чтобы вернуть виджет к меньшему размеру.

Как добавлять новые виджеты на Айфоне или Айпаде

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

1. Проведите вправо на главном экране или экране блокировки, либо откройте «Центр уведомлений», чтобы просмотреть свои виджеты.

2. Прокрутите вниз до конца списка виджетов.

3. Нажмите «Изменить».

4. Прокрутите вниз, чтобы найти виджет, который вы хотите добавить.

5. Нажмите зеленую кнопку «+» рядом с необходимым виджетом.

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

1. Найдите приложение, виджет которого вы хотите добавить на главный экран.

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

3. Нажмите «Добавить виджет», если данная опция доступна.

Как перемещать (изменять порядок) виджеты в iOS и iPadOS

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

1. Проведите по экрану вправо.

2. Прокрутите вниз до конца списка виджетов.

3. Нажмите «Изменить».

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

5. Перетащите виджет вверх или вниз.

Как удалять виджеты на iPhone и iPad

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

1. Проведите вправо на главном экране или экране блокировки, либо откройте «Центр уведомлений», чтобы просмотреть свои виджеты.

2. Прокрутите вниз до конца списка виджетов.

3. Нажмите «Изменить».

4. Нажмите красную кнопку.

• Как быстрее зарядить iPhone: 5 основных правил.
• Как подготовиться к путешествию и заранее сохранить места посещений в «Google Картах» на iPhone или Android.
• Почему пропадают кнопки Принять и Отклонить при входящем звонке на iPhone?