Explore the Context Menus in iOS 13

Technology has reformed the way we conduct business by offering striking features and tools, putting information at our fingertips. With the continuous advancement in technology, we should adopt the recent innovations that affect the business. Apple stays ahead of the competition by constantly introducing innovative technologies and features, which encourages business to invest in iOS app development and hire iOS developers. One such release is iOS 13, which comes with an entirely new look as well as features like revamp photo app, system-wide dark mode and more. Among all these features, the most important one, which attracts businesses, is Context Menus.

At WWDC 2019, with the official release of iOS 13, Apple introduced this new way of interacting with your application’s user interface. Context menus replace the Peek and Pop interaction widely used until iOS 12. When you tap and hold on a view, a context menu comes up with a preview of some content as well as a list of action items.

This menu is used to implement actions which affect the selected context or content frame. It is helpful to display activities that are related to a certain UI element. You can use this menu to enable additional features for your apps.

Difference between Context Menus and Peek and Pop

The two key differences between context menus & peek and pop are

1. Peek and Pop works only on devices, which support 3D touch, whereas the Context menu works on all devices running on iOS 13 & later. Therefore, it works on all iPads.
2. Peek and Pop needs a swipe up to display commands, you can immediately view contextually relevant commands in Context menus.

Explore more about 3D touch on iPhone, here.

Context Menu is used widely throughout iOS. News apps for example, tapping and holding news content present a context menu as shown below:

The list of actions is customizable. Tapping the preview will open the new details. You can also customize what will happen when tapping a preview in your context menus.

Implementation of a simple context menu for UIImageView

To add a context menu in the iOS, you have to add the UIImageView object to the controller’s view and compose a few lines of code in the viewDidLoad method as shown below:

The next two important parts in setting up a context menu are:

• Creating interaction in the UIContextMenuInteraction class
• Specifying delegate in the UIContextMenuInteractionDelegate protocol

For your reference:



Adding interaction to the image view informs the system to activate a menu when the image is pressed.

Now, create an extension to the viewcontroller: UIContextMenuInteractionDelegate.

The above protocol has a single required method, contextMenuInteraction(_:configurationForMenuAtLocation:).
Define the UIContextMenuConfiguration with the menu options you want and returns it to the system so that it can show the command when the view is pressed. You can also cancel the interaction by returning nil instead of UIContextMenuConfiguation.

You have to create an object of the UIContextMenuConfiguration class inside this method. Here you can pass three parameters - identifier, preview provider and actionProvider during initialization, but all are optional.

The initializers UIAction and UIMenu have many arguments, but here in the above example, we have used only the title, image and click handler.

The result looks like this:

Add a submenu:

Generally, Apple recommends limiting the menus at one level; that doesn’t mean it is not possible to add an array of children to your menu. You can create submenus, and the layout can adapt to the available space by moving the preview to the side if required.

Here is the code to add submenu.

Along with the picture, it will add a menu with two items: “Share” and “Edit .” Clicking on “Edit” opens a submenu with the items “Rename” and “Delete”.

Creating a context menu for the collection view or table view:

You can also add context menu to collection view and table view, an attractive way to represent the ordered set of items in a changeable and flexible layout. Compared to a regular view, it is much easier to add context menus to these views.

Let’s add a context menu into UICollectionView:

Now we have created an action and a menu. You will see a context menu after a long tap, with the “Share” button:

A similar way you can add context Menu in the table view.

Just, implement the following method of UITableViewDelegate with context menu options:

Check the result of the context menu in the UITableView,

Guidelines to implement Context Menus on your App

• Include Context Menus only to the commands, which are most commonly used. For instance, to add a context menu for the Mail message, it is good to add commands for moving and replaying the message. It doesn’t make sense if you add commands for formatting. Too many commands can also overwhelm the end-user.
• It is advisable to implement context menus consistently. Adding context menus and missing the same in some places confuses the users on where they can use that feature.
• It causes the user to think like there is a problem with your app.
• Add submenus to manage complexity. Give an intuitive title to the menus that denote their content or action, so that user can predict their commands without opening them.
• Restrict submenus up to one level. Multi-levels of submenu obfuscates look and sometimes it is difficult to navigate.
• Keep the most frequently used menu items at the top, which helps the user to easily find the item they are looking for.
• Group the related menu items with separators, which help the user to scan the menu quickly. For instance, group the actions related to sharing and group the actions related to editing. Remember; don’t keep more than three groups in your context menu.
• In the context menu, you can tab to open the item you are previewing, so no need to have an explicit action button to open the item.

Conclusion:

Apple products are easy and intuitive to use - so they can easily support your business. There is no exception for the Context menu, a new powerful way to interact with your app. You can customize the menu appearance and preview as per your needs. And, as you can see, it doesn’t take much time to implement it. Implement content menus in your app and enable users to access the additional functionality associated with onscreen items without muddling the interface.