iOS 13 Multiselection Gestures in TableView and CollectionView

Accelerate item selection with the new delegate methods

Anupam Chugh
Nov 18, 2019 · 3 min read
Image by Arek Socha on Pixabay

WWDC 2019 introduced some interesting new features onto the table whilst enhancing some older ones. While SwiftUI rocked the community with its intuitive ways of building the user interface, multiple selections with two pan gestures were introduced on cells for accelerating the user’s selection process.

By using the newly introduced delegate methods and properties of CollectionView and TableView, we can quicken the process of item selections for the user.

  • Understanding how multiselection works in TableView and CollectionView
  • Implementing the new iOS 13 feature to delete a batch of selections from a TableView

Multiple Selection With Two Pan Gestures

iOS 13's TableViews and CollectionViews provide two-finger pan gestures for the multiple selections of items. As soon as the view recognizes the gesture, it enables the editing mode. The user needn’t even tap the edit mode, as the gesture automatically puts the view in editing mode.

Also, the multiselection needn’t be continuous. A user can stop selecting at a certain point and begin the gesture from another point in the TableView or CollectionView. The following illustration shows how it works.

From Apple Docs

To support multiple item selection in a TableView, the allowsMultipleSelectionDuringEditing property needs to be enabled. Additionally, the following new optional delegate methods need to be implemented:

  • didBeginMultipleSelectionInteractionAt
  • shouldBeginMultipleSelectionInteractionAt
  • tableViewDidEndMultipleSelectionInteraction

Two-finger pan gestures also allow single-finger multiselection/deselection on a group of already selected items.


Implementing Multiselection in TableView

To get started, create a new Xcode project.

The following code demonstrates an example of TableView with multi-finger selection in editing mode along with an option to delete the bunch of selected items.

In the above code, inside the didBeginMultipleSelectionInteractionAt editing mode is enabled in order to mark the multiple selections.

The setEditing handles the case after the editing is marked done by the user. In our case, we delete the array of selected items from the TableView.

In return, we get the following outcome of the iOS application in a simulator.

An illustration from the application in action

In order to simulate gestures on a simulator, drag the trackpad while holding the option and shift buttons.

The equivalent delegate methods are available for CollectionView too.


Conclusion

So we implemented the new iOS 13 two-finger gestures for multiselections on a TableView. Apple aims to accelerate the user selection of multiple items with this feature. The source code of the above implementation is available in this GitHub repository

iOS 13 also introduces other notable UIKit additions, such as compositional layouts in CollectionViews. We’ll cover that in the next piece. Stay tuned!

That’s it for this one. I hope you enjoyed reading.

Better Programming

Advice for programmers.

Anupam Chugh

Written by

iOS Developer exploring the depths of ML and AR. Loves writing about thoughts, technology, and code. Blog: iowncode.com, LinkedIn: linkedin.com/in/anupamchugh

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade