Swipeable collection view cell - a simpler approach
In one of my recent projects, I had to implement a feature where the user could swipe a cell to show a hidden delete button. Since iOS 11, Apple introduced some nice improvements in the
UITableView class - specifically a better support for displaying hidden menu items when the user swipes a
UITableViewCell. You can implement delegate methods for displaying leading and trailing swipe actions and that would be enough.
Unfortunately, I couldn’t use that API because I had to use a
I wanted to avoid using third-party libraries for such a relatively simple task, so I came up with my custom solution. I’ve set up an example project on GitHub that shows how you can achieve the effect shown in the image below:
I’ve experimented with multiple ways of implementing this feature. I found that the most concise and clean solution for me was by using
UIScrollView in combination with
First, we need to create 2 container views - one for the visible part of the cell and one for the hidden part. We’ll add these views to a
stackViewwill act as a content view and make sure that the views have equal widths with the distribution property set to
We’ll embed the
scrollViewthat has paging enabled. The
scrollViewis constrained to the edges of the cell. Since we’ve set the
stackView’s width to be 2 times the
scrollView’s width - each of the container views will have the width of the cell.
With this simple implementation, we have created the base cell with a visible and hidden view.
We’ll need to add a way to recognize if the user tapped the hidden view. We’ll create
SwipeableCollectionViewCellDelegate protocol that we can adopt so that we can respond to tap events.
Now we just need to set up a gesture recognizer:
In this blog post, we’ve seen one way of implementing the swipe feature on a collection view cell. I think that the biggest advantage of this solution is its simplicity and customisability. The code is very easy to understand. There was no need to add additional pan gesture recognizers and implement custom paging since that is solved by the