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

С выпуском iOS 13 контекстные меню или контекстные меню стали удобным способом показать пользователям дополнительные функции, связанные с элементами на экране.

В частности, когда вы долго нажимаете (т. Е. Нажимаете и удерживаете) элемент, появляется контекстное меню с некоторыми общими действиями.

Следует отметить, что, в отличие от предыдущей функции Peek and Pop, для которой требуется 3D Touch, контекстные меню могут быть реализованы на любых устройствах под управлением iOS 13 или новее, что дает большему количеству пользователей доступ к этой замечательной функции.

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

Это руководство состоит из трех частей. Сначала я рассмотрю принципы реализации контекстных меню в ваших приложениях.

Во-вторых, я покажу вам, как они реализуются с помощью SwiftUI. В-третьих, я покажу вам, как они реализованы с помощью UIKit.

Часть 1. Принципы реализации

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

1. Последовательность

Если вы решите реализовать контекстные меню в своих приложениях, возможно, вы захотите последовательно использовать их в приложении.

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

2. Экономия

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

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

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

3. Простота

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

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

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

Часть 2. Реализация с использованием SwiftUI

Шаг 1. Настройка проекта

В текущем руководстве мы просто создадим проект приложения с одним представлением в Xcode (Файл - ›Новый -› Проект - ›Приложение с одним представлением на вкладке iOS).

В этом проекте будет использоваться Swift в качестве языка программирования и SwiftUI для дизайна пользовательского интерфейса.

Шаг 2. Подтверждение концепции

По умолчанию Xcode создает текстовую метку с надписью «Hello, World!» на экране. Мы можем просто добавить контекстное меню к этой метке, используя модификатор .contextMenu для Text.

В частности, мы добавляем кнопку с Text и Image. Следует отметить, что SwiftUI управляет отображением Text и Image.

Даже если вы измените порядок Image и Text или вставите один или оба в HStack или даже VStack, контекстное меню будет отображаться таким же образом.

Кроме того, даже если вы объявите более одного Text и одного Image, будет использоваться только первый для каждого из них.

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

Шаг 3. Множественные действия

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

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

Судя по всему, цвета принадлежат одной концептуальной группе, поэтому они размещены рядом друг с другом, а остальные действия (т. Е. Копирование и совместное использование) принадлежат другой группе.

Примечания

  1. На данный момент (январь 2020 г.) SwiftUI обрабатывает отображение текста и изображения. Если вы хотите изменить размер, цвет или другие атрибуты, этого не произойдет. Я ожидаю, что с улучшением SwiftUI должно появиться больше гибкости с точки зрения настройки меню.
  2. Если вы хотите реализовать более настраиваемое контекстное меню, подобное тому, которое используется в приложении «Фото», вам необходимо реализовать его с помощью UIKit, что я покажу вам в следующем разделе.

Часть 3. Реализация с использованием UIKit

Шаг 1. Настройка проекта

В этой части мы по-прежнему создадим проект приложения с одним представлением в Xcode (Файл - ›Новый -› Проект - ›Приложение с одним представлением на вкладке iOS). В этом проекте вместо SwiftUI будет использоваться Swift в качестве языка программирования и раскадровка для дизайна пользовательского интерфейса.

Создайте UITableView и добавьте его в контроллер представления. Мы создаем структуру с именем Task и создаем список задач, которые должны отображаться в табличном представлении.

Шаг 2. Показать контекстное меню

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

В этом методе мы предоставляем табличному представлению UIContextMenuConfiguration.

В частности, мы передадим три параметра: identifier (уникальный идентификатор для этого объекта конфигурации), previewProvider (настраиваемый контроллер представления для использования при предварительном просмотре вашего контента) и actionProvider (контекстное меню на основе действий).

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

Для actionProvider мы создадим UIMenu с тремя пунктами меню. После реализации этого метода мы можем построить наш проект и запустить его на симуляторе.

Шаг 3. Показать контекстное меню с подменю.

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

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

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

Шаг 4. Показать контекстное меню с настраиваемым предварительным просмотром

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

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

Чтобы отобразить предварительный просмотр как часть контекстного меню, вы просто передадите контроллер представления previewProvider в UIContextMenuConfiguration, как показано ниже.

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

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

После реализации этого метода мы увидим что-то вроде того, что показано ниже.

Дополнительные замечания

  1. Контекстные меню могут быть аналогично реализованы в представлении коллекции. По этой теме есть отличная обучающая статья на Medium, которую я рекомендую.
  2. Контекстные меню могут быть реализованы для любого UIView типа. Для этого вам нужно создать объект UIContextMenuInteraction и добавить это взаимодействие в представление с помощью метода addInteraction(interaction: UIInteraction). Чтобы настроить контекстное меню, мы просто сделаем так, чтобы контроллер представления соответствовал протоколу UIContextMenuInteractionDelegate. В этом протоколе есть методы, которые можно реализовать аналогично тому, как мы только что узнали. Вы можете обратиться к официальной документации, чтобы узнать о методах этого протокола.

Заключение

В этом руководстве мы изучили принципы реализации контекстных меню. Мы также узнали, как мы реализуем это с помощью SwiftUI и UIKit.

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

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