Context Menus Tutorial for iOS: Getting Started

Custom Previews in Table Views

Once again, the default preview leaves some room for improvement. The context menu just uses the entire table view cell as a preview.

In your first context menu, you used the previewProvider parameter of the UIContextMenuConfiguration to show a custom preview. previewProvider lets you create a whole new UIViewController as a preview. But, there’s another way.

Add the following UITableViewDelegate method:

override func tableView(_ tableView: UITableView,
  previewForHighlightingContextMenuWithConfiguration 
  configuration: UIContextMenuConfiguration)
    -> UITargetedPreview? {
  guard
    // 1
    let identifier = configuration.identifier as? String,
    let index = Int(identifier),
    // 2
    let cell = tableView.cellForRow(at: IndexPath(row: index, section: 0))
      as? VacationSpotCell
    else {
      return nil
  }
  
  // 3
  return UITargetedPreview(view: cell.thumbnailImageView)
}

Rather than creating a new UIViewController, this uses a UITargetedPreview to specify an existing view. Here’s what’s happening, step-by-step:

1. In the previous method, you gave the UIContextMenuConfiguration an identifier. Now, you use it to get the tapped index.
2. Get the cell at that index.
3. Create a UITargetedPreview, passing in the cell’s image view.

This tells the context menu to use the cell’s image view as a preview, rather than the entire cell.

Build and run to see your new preview:

That looks a lot better, doesn’t it? Now, tap the preview.

The list of vacation spots animates onto the screen again. Well, the purpose of a preview is to preview something. In this case, it would make sense to preview the spot info view controller for the vacation spot. You’ll address that next.

Handling Preview Actions

Add this final UITableViewDelegate method in SpotsViewController:

override func tableView(
  _ tableView: UITableView, willPerformPreviewActionForMenuWith
  configuration: UIContextMenuConfiguration,
  animator: UIContextMenuInteractionCommitAnimating) {
  // 1
  guard 
    let identifier = configuration.identifier as? String,
    let index = Int(identifier) 
    else {
      return
  }
  
  // 2
  let cell = tableView.cellForRow(at: IndexPath(row: index, section: 0))
  
  // 3
  animator.addCompletion {
    self.performSegue(
      withIdentifier: "showSpotInfoViewController",
      sender: cell)
  }
}

This UITableViewDelegate method fires when tapping a context menu’s preview. Tapping the preview dismisses the context menu, and tableView(_:willPerformPreviewActionForMenuWith:animator:) gives you a chance to run code when the animation completes. Here’s what’s going on:

1. Like before, use the identifier to find the index of the row the context menu belongs to.
2. Get the cell that the user tapped.
3. The animator object handles the dismissal animation. Here, you add a completion handler that shows the spot info view controller via a segue.

Build and run, and see what happens when you tap the preview. While you’re at it, have some fun using your new context menus, because you’ve finished the tutorial. Congratulations!

Where to Go From Here?

In this tutorial, you improved the user experience of an existing app by:

• Adding two distinct context menus: One on a button and one on each cell of a table view.
• Adding useful actions to the menus.
• Using submenus, which can keep things organized.
• Customizing the menus further by adding your own previews.
• Handling taps on the preview.

Context menus also interact seamlessly with drag and drop. You can learn more by watching WWDC 2019’s Modernizing Your UI for iOS 13 video.

Context menus are a different beast in SwiftUI, but much simpler. Why not get a taste with our SwiftUI: Getting Started tutorial?

I hope you’ve enjoyed this tutorial on context menus in UIKit. If you have any questions, feel free to leave them in the discussion forum below.