To Make Existed Cells Support Swipe-Operation

Before explaining how this solution works, it needs to introduce UICollectionViewCell’s view hierarchy.

UICollectionViewCell View Hierarchy

UICollectionViewCell View Hierarchy — source:

Generally, all views we add in the cell’s xib are subviews of the Content View. The cell manages multiple layers of content, of which the content view is only one. In addition, the cell manages two more background views for the cell in its selected and unselected states. The selected background view is layered above the background view and behind the content view.

So what I do is 2 steps: first one is to insert your custom action view directly under content view, and second step is add UIPanGestureRecognizer into cell and move content view by pan gesture. All steps were implemented into a customized class which inherits UICollectionViewCell, and then make all custom cells’ classes inherited from it.

Insert Custom Action View

What is custom action view? for example, the custom action views of following snapshot are “Star” (blue area) and “Move to …” (orange area), both them are the same height of content view but just half of width.


So just insert your custom action view under content view but above other background views,

[self insertSubview:actionView belowSubview:self.contentView];

Add UIPanGestureRecognizer

After adding UIPanGestureRecognizer into cell, as following,

[self addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(containerViewPanGestureRecognized:)]];

all we need to do is to move ContentView only by gesture. Here I would suggest not to move whole cell, not background view and not selected background view. We move the content view only, or custom action view at most.

I had maintained an iOS app which already used UICollectionView to list UICollectionViewCell of items, and later I want to refine these cells, to support swipe to delete or other operations, as Yahoo Mail or other apps did.
Because this iOS app implemented UICollectionViewCell by xib, to re-layout all xib files is difficult and cost time, I used another solution to apply swipe-able features into all existed cells more easily.
Here is one concept that I found it might be easier to add swipe-able feature into some originally existed cells. I implement this custom cell class and make others inherited from it, and don’t forget to modify xib’s view class definition. It make me not to add action views for each xib one by one!