Context Menus in iOS

access to on-screen additional functionality

Context Menu will modernise the application’s user experience.

The objective of this tutorial is to make an understanding of the methods and properties to implement the ContextMenu with a simple demo app. It includes configuring the actions, adding the submenus, and custom previews.

In the release of iOS13, a new API is introduced that allows the developer to present a list of interactive menus with rich previews in the apps. One such API is UIContextMenuInteraction.

Context Menus can be triggered either by long press or by 3D Touch (if the device supports).

Context Menu Vs. Peek and Pop

Context Menu — Highly Adaptive

1. On an iPhone in portrait mode, the preview and the action will be presented as vertically stacked above one another.
2. On an iPhone in landscape, we get the preview and the action side by side.
3. And on an iPad, depending on the available space and size of its preview and actions list it reconfigures itself.
4. On the Mac, it turns into a familiar macOS context menu.

Context Menus — in Apple Devices

1. On phones with 3D touch, 3D touch is used to bring up the menu quickly with some nice feedback.
2. On phones without 3D touch capability, Haptic Touch is used to popup the menu with feedback.
3. On other iOS devices, long press is used, and
4. On the Mac, it is based on the user’s secondary click setting (right-click or a command-click or two-finger tap).

Context Menus — Guidelines

1. Implement the context menu Consistently in the app.
2. Include menu items that are most commonly used for the item.
3. Place the most frequently used menu items at the top of the menu.
4. For Complex items, use submenus (either in-line or nested).
5. For the Nested submenu, use one level of the submenu to reduce the complication.
6. For the Inline submenu, use a separator for group related menu items.
7. Don’t add the edit menu and context menu for the same item.
8. Don’t provide a menu item that will open an item to preview.

Context Menu — Demo

Before getting into Demo, we need to know about the most important concepts of context menus:

1. UIContextMenuInteraction: It will add a context menu to a targeted view.
2. UIContextMenuConfiguration: It configures a UIMenu with actions as UIAction and configures its behaviors too.
3. UIContextMenuInteractionDelegate: It manages the context menu lifecycle such as building the UIContextMenuConfiguration.

UIContextMenuInteraction

UIContextMenuInteraction is a UIInteraction that lets you present menus with rich previews and complex hierarchies. These hierarchies can have nested submenus and in-line sections. Also, it provides actions for the user to perform on that content.

UIContextMenuConfiguration

A menu can be an array of UIAction and it is configured in one of the UIContextMenuInteractionDelegate methods. This protocol is the key to achieve Context Menu and it comes with a single required method contextMenuInteraction(_:configurationForMenuAtLocation:), and it returns a new UIContextMenuConfiguration object.

1. identifier — an optional unique identifier used to keep track of multiple context menus. If omitted, an NSUUID will be generated.
2. previewProvider — an optional preview view controller provider block, called when the menu is about to be presented. If you set this to nil, the default preview(the view you tapped) will display for your menu.
3. actionProvider — an optional action provider block or closure, called when the menu is about to be presented. This closure takes an UIMenu and you can configure a UIMenu with an array of UIActions and a nested UIMenus also.

UIMenu

UIMenu Initialiser Method

1. title: The menu’s title (required) displayed in a maximum of 2 lines. The title is visible unless it is a submenu.
2. image: an image, displayed alongside the menu’s title(only for sub-menu).
3. identifier: an optional unique identifier.
4. options: The menu’s options - .displayInline &.destructive
5. children: an array of UIActions or UIMenus(as Sub-Menu).

UIMenu — options .displayInline, SubMenu(by default) and .destructive

Configuring ContextMenu

UIAction

UIAction Initialiser method

1. title: a required action’s title, displayed in a maximum of 2 lines.
2. image: an optional image that can appear next to this action.
3. identifier: an action’s unique identifier.
4. discoverabilityTitle: an optional string displayed in a maximum of 2 lines.
5. attributes: action’s attributes(.disabled .destructive .hidden).
6. state: a tick mark that appears next to the action (.off .on .mixed). Here the image will not be displayed if a tick mark appears.
7. handler: block which will be called when the user selects the action.

UIAction — discoverabilityTitle, attributes, and state

Configuring the UIAction

Custom previewProvider

Context menus only show a preview of the content, if previewProvider is set to nil while configuring the UIContextMenuConfiguration. If you want to customize previewProvider we need to provide a ViewController with desired UIs and preferred content size.

Custom previewProvider

Default vs Custom PreviewProvider

UIContextMenuInteractionDelegate

1. This required delegate method is triggered when the interaction begins.
2. It returns a UIContextMenuConfiguration describing the menu to be presented.
3. Returning nil to prevent the interaction from beginning.
4. Returning an empty configuration causes the interaction to begin then fail with a cancellation effect.

1. This optional delegate method is called when tapping on the context menu’s preview.
2. Tapping the preview dismisses the context menu, and runs code when the animation completes.
3. The animator object will handle the dismissal animation.

References

1. https://developer.apple.com/design/human-interface-guidelines/ios/controls/context-menus/

Get the full source code at GitHub

Reach me on LinkedIn

karthikeyan ThirugnanaSambandam - Software Engineer - Ivy Mobility | LinkedIn

Feel as a good post?, Recommend this post (by clicking 👏 button)