Enlarge UICollectionViewCell when long press and dragged - ios

I want to scale the collectionview when longpress and dragged and when user end drag then cell should come in regular size.
I am creating demo using below steps which works fine but enlarge is not working as I expected.
Collection View Example
Here is the gesture code I used :
func handleLongGesture(gesture: UILongPressGestureRecognizer) {
switch(gesture.state) {
case UIGestureRecognizerState.Began:
guard let selectedIndexPath = self.collectionView.indexPathForItemAtPoint(gesture.locationInView(self.collectionView)) else {
break
}
collectionView.beginInteractiveMovementForItemAtIndexPath(selectedIndexPath)
case UIGestureRecognizerState.Changed:
collectionView.updateInteractiveMovementTargetPosition(gesture.locationInView(gesture.view!))
case UIGestureRecognizerState.Ended:
collectionView.endInteractiveMovement()
default:
collectionView.cancelInteractiveMovement()
}
}

Try this on a collection view layout sub-class:
- (UICollectionViewLayoutAttributes*) layoutAttributesForInteractivelyMovingItemAtIndexPath:(NSIndexPath *)indexPath withTargetPosition:(CGPoint)position
{
UICollectionViewLayoutAttributes *attributes = [super layoutAttributesForInteractivelyMovingItemAtIndexPath:indexPath withTargetPosition:position];
attributes.zIndex = NSIntegerMax;
attributes.transform3D = CATransform3DScale(attributes.transform3D, 1.2f, 1.2f, 1.0);
return attributes;
}

Related

UICollectionView drag and drop remove translucent cell

I'm using iOS 11 drag and drop API for reordering and want to remove translucent cell which appears on start dragging. Is it possible? For dragging I use only required method of UICollectionViewDragDelegate:
- (nonnull NSArray<UIDragItem *> *)collectionView:(nonnull UICollectionView *)collectionView
itemsForBeginningDragSession:(nonnull id<UIDragSession>)session
atIndexPath:(nonnull NSIndexPath *)indexPath {
NSItemProvider *itemProvider = [NSItemProvider new];
UIDragItem *dragItem = [[UIDragItem alloc] initWithItemProvider:itemProvider];
return #[dragItem];
}
You can customize your cell during the drag/drop lifecycle by overriding dragStateDidChange(_ dragState: UICollectionViewCell.DragState)
class MyCell: UICollectionViewCell {
//...
override func dragStateDidChange(_ dragState: UICollectionViewCell.DragState) {
switch dragState {
case .none:
self.layer.opacity = 1
case .lifting:
return
case .dragging:
self.layer.opacity = 0
}
}
}
On your cell class override this method:
override func dragStateDidChange(_ dragState: UICollectionViewCell.DragState) {
switch dragState {
case .none:
self.layer.opacity = 1
case .lifting:
return
case .dragging:
self.layer.opacity = 0
}
}

Constrain movement of cell in UICollectionview to bounds of the CollectionView

I'm getting some weird behavior (actually a crash) when I drag a cell outside of the CollectionView Bounds. How can I limit the user interaction of the CollectionView to only the frame of the CollectionView? When the user long-presses and drags a view cell, I only want them to be able to move the cell within the CollectionView, and not all over the screen
private void HandleLongPressOnCollection(UILongPressGestureRecognizer gesture)
{
switch (gesture.State)
{
case UIGestureRecognizerState.Began:
var myIndexPath = MyCollectionView.IndexPathForItemAtPoint(gesture.LocationInView(MyCollectionView));
this.selectedIndexPath = myIndexPath;
BeginInteractiveMovementForItem();
break;
case UIGestureRecognizerState.Changed: // This is not working correctly
if (MyCollectionView.Frame.Contains(gesture.LocationInView(MyCollectionView)))
{
MyCollectionView.UpdateInteractiveMovement(gesture.LocationInView(MyCollectionView));
}
break;
case UIGestureRecognizerState.Ended:
EndInteractiveMovementForItem();
break;
default:
MyCollectionView.CancelInteractiveMovement();
break;
}
}
private void BeginInteractiveMovementForItem()
{
if (selectedIndexPath != null)
{
MyCollectionView.BeginInteractiveMovementForItem(selectedIndexPath);
var cell = MyCollectionView.CellForItem(selectedIndexPath) as CustomViewCell;
cell.MarkCellAsMoving();
}
}
private void EndInteractiveMovementForItem()
{
if (selectedIndexPath != null)
{
var cell = MyCollectionView.CellForItem(selectedIndexPath) as CustomViewCell;
cell?.SetToNormalState();
}
MyCollectionView.EndInteractiveMovement();
}
You should compare the gesture's location with ContentView not Framelike:
case UIGestureRecognizerState.Changed:
CGPoint gesturePoint = gesture.LocationInView(MyCollectionView);
CGSize contentSize = MyCollectionView.ContentSize;
if (gesturePoint.X > 0 && gesturePoint.X < contentSize.Width &&
gesturePoint.Y > 0 && gesturePoint.Y < contentSize.Height)
{
MyCollectionView.UpdateInteractiveMovement(gesture.LocationInView(MyCollectionView));
}
break;
Adjust the constant in the if statement to feed your requirement.
Moreover the crash may occur in the event MoveItem() when you call MyCollectionView.EndInteractiveMovement();. You can try to post some code about it.
You can use
collectionView.bounces = false
if you want to drag until the edge.
Can you also post the crash you are getting?

Trouble moving CollectionViewCell to the end

I have a UICollectionView in a UIViewController. I've configured a gesture recognizer to move cells. It works fine for moving a cell to any index except the end. Most aggravatingly, the app doesn't crash when I attempt to move a cell to the end--it just hangs. I can back out of ReorderViewControllerand go back to it. The view reloads normally.
I call this method from viewDidLoad to configure the gesture recognizer:
func configureGestureRecognizer() {
// configure longPressGestureRecognizer
longPressGesture = UILongPressGestureRecognizer(target: self, action: #selector(ReorderViewController.handleLongPressGesture))
longPressGesture.minimumPressDuration = 0.5
longPressGesture.delegate = self
self.collectionView.addGestureRecognizer(longPressGesture)
}
When the UILongPressGestureRecognizer is triggered, its handler is called:
func handleLongPressGesture(gesture: UILongPressGestureRecognizer) {
guard let selectedIndexPath = self.collectionView.indexPathForItem(at: gesture.location(in: self.collectionView)) else {
return
}
let selectedCell = collectionView.cellForItem(at: selectedIndexPath)
switch gesture.state {
case .began:
print("began")
editMode = true
collectionView.beginInteractiveMovementForItem(at: selectedIndexPath)
selectedCell?.isSelected = true
case .changed:
editMode = true
selectedCell?.isSelected = true
print("changed")
collectionView.updateInteractiveMovementTargetPosition(gesture.location(in: self.collectionView))
case .ended:
print("ended")
editMode = false
selectedCell?.isSelected = false
collectionView.endInteractiveMovement()
default:
print("default")
editMode = false
selectedCell?.isSelected = false
collectionView.cancelInteractiveMovement()
}
}
I can move cells with the gesture without any trouble so long as I'm not moving one to the end. Most annoyingly, the app doesn't crash--it just hangs. I can press the "Back" button on the NavBar and go to the prior ViewController without crashing and return to ReorderViewController.
Here's my code for moving cells:
func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
let stuffToReorder = currentRoutine?.myOrderedSet.mutableCopy() as! NSMutableOrderedSet
stuffToReorder.exchangeObject(at: sourceIndexPath.row, withObjectAt: destinationIndexPath.row)
currentRoutine?.myOrderedSet = stuffToReorder as NSOrderedSet
appDelegate.saveContext()
}
Any thoughts re: where my mistake is are greatly appreciated.
I think I've cracked it. My hunch about CoreData being the issue was a red herring (which is just as well as I don't have much experience of it!). The hang up was caused by the guard statement at the start of your handler method. Specifically, your method checks that there is a valid index path related to the gesture location; if the gesture moves out of the collection view, I think everything gets confused and therefore you get the hang (rather than a crash) as the function keeps exiting at that point. Moving things around a bit, however, seems to solve the problem:
func handleLongPressGesture(gesture: UILongPressGestureRecognizer) {
guard let _ = collectionVC.collectionView else { return }
switch gesture.state {
case .began:
guard let selectedIndexPath = collectionVC.collectionView!.indexPathForItem(at: gesture.location(in: collectionVC.collectionView)) else { return }
selectedCell = collectionVC.collectionView!.cellForItem(at: selectedIndexPath)
print("began")
lastGoodLocation = gesture.location(in: collectionVC.collectionView!)
collectionVC.collectionView!.beginInteractiveMovementForItem(at: selectedIndexPath)
selectedCell.isSelected = true
case .changed:
selectedCell?.isSelected = true
if collectionVC.collectionView!.frame.contains(gesture.location(in: view)) {
print(gesture.location(in: view))
print(collectionVC.collectionView!.frame)
print("INSIDE COLLECTION VIEW!")
collectionVC.collectionView!.updateInteractiveMovementTargetPosition(gesture.location(in: collectionVC.collectionView!))
lastGoodLocation = gesture.location(in: collectionVC.collectionView!)
}
else
{
print("OUTSIDE COLLECTION VIEW!")
collectionVC.collectionView!.updateInteractiveMovementTargetPosition(lastGoodLocation) // Not sure this is needed
}
print("changed")
case .ended:
print("ended")
selectedCell?.isSelected = false
collectionVC.collectionView!.endInteractiveMovement()
default:
print("default")
selectedCell?.isSelected = false
collectionVC.collectionView!.cancelInteractiveMovement()
}
}
Implementing things this way, I moved the guard statement for selectedCell into the .began case of your switch, as this is the only place that it is initialised. I therefore had to declare selectedCell as a class property so that it could be referenced within the other cases later on. I also introduced a CGPoint variable, lastGoodLocation, which stores the last location for which a valid index path is available - this way, if the gesture ends outside the collection view, the cell is sent to that index path.
Anyway, this is a bit rough but certainly seems to prevent the hang. Hope that helps!

Temporarily Hiding a cell in UICollectionView Swift iOS

I've been trying this for hours with no luck. I have a UICollectionView collectionView. The collection view is basically a list with the last cell always being a cell with a big plus sign to add another item. I've enabled reordering with the following. What I'd like for it to do is when I start the interactive movement, the plus sign cell goes away, and then when the user is done editing, it appears again. This is a basic version of the code I have:
func handleLongGesture(gesture: UILongPressGestureRecognizer) {
switch(gesture.state) {
case UIGestureRecognizerState.Began:
...
self.collectionView.beginInteractiveMovementForItemAtIndexPath(selectedIndexPath)
removeAddCell()
case UIGestureRecognizerState.Changed:
case UIGestureRecognizerState.Ended:
...
collectionView.endInteractiveMovement()
replaceAddCell()
default:
collectionView.cancelInteractiveMovement()
}
}
func removeAddCell(){
print("Reloading data - removing add cell")
data_source.popLast()
self.collectionView.reloadData()
}
func replaceAddCell(){
print("Reloading data - replacing add cell")
data_source.append("ADD BUTTON")
self.collectionView.reloadData()
}
It's very rough pseudocode, but I can't even get the simplest version of this to work. With the code I have, it gives me the dreaded "Fatal error: unexpectedly found nil while unwrapping an Optional values" on the line where I reference the UICollectionViewCell after removing the items from the data source.
If anyone who has done something like this could share their approach I'd really appreciate it! Thank you!
-Bryce
You can do something like this:
func longPressed(sender: UILongPressGestureRecognizer) {
let indexPath = NSIndexPath(forItem: items.count - 1, inSection: 0)
let cell = collectionView.cellForItemAtIndexPath(indexPath) as! YourCollectionViewCell
switch sender.state {
case .Began:
UIView.animateWithDuration(0.3, animations: {
cell.contentView.alpha = 0
})
case .Ended:
UIView.animateWithDuration(0.3, animations: {
cell.contentView.alpha = 1
})
default: break
}
}
this way it gradually disappears instead of abruptly.
I've done something like this. The data source for the collection view tracks a BOOL to determine whether or not to show the Add Item Cell. And call insertItemsAtIndexPaths: and deleteItemsAtIndexPaths: to animate the Add Item Cell appearing and disappearing. I actually use a Edit button to toggle the modes. But you can adapt this code to use your gesture recognizer.
basic code:
self.editing = !self.editing; // toggle editing mode, BOOL that collection view data source uses
NSIndexPath *indexPath = [self indexPathForAddItemCell];
if (!self.editing) { // editing mode over, show add item cell
if (indexPath) {
[self.collectionView insertItemsAtIndexPaths:#[indexPath]];
}
}
else { // editing mode started, delete add item cell
if (indexPath) {
[self.collectionView deleteItemsAtIndexPaths:#[indexPath]];
}
}

How to implement UITableView`s swipe to delete for UICollectionView

I just like to ask how can I implement the same behavior of UITableView`s swipe to delete in UICollectionView. I am trying to find a tutorial but I cannot find any.
Also, I am using PSTCollectionView wrapper to support iOS 5.
Thank you!
Edit:
The swipe recognizer is already good.
What I need now is the same functionality as UITableView's when cancelling the Delete mode, e.g. when user taps on a cell or on a blank space in the table view (that is, when user taps outside of the Delete button).
UITapGestureRecognizer won't work, since it only detects taps on release of a touch.
UITableView detects a touch on begin of the gesture (and not on release), and immediately cancels the Delete mode.
There is a simpler solution to your problem that avoids using gesture recognizers. The solution is based on UIScrollView in combination with UIStackView.
First, you need to create 2 container views - one for the visible part of the cell and one for the hidden part. You’ll add these views to a UIStackView. The stackView will act as a content view. Make sure that the views have equal widths with stackView.distribution = .fillEqually.
You’ll embed the stackView inside a UIScrollView that has paging enabled. The scrollView should be constrained to the edges of the cell. Then you’ll set the stackView’s width to be 2 times the scrollView’s width so each of the container views will have the width of the cell.
With this simple implementation, you have created the base cell with a visible and hidden view. Use the visible view to add content to the cell and in the hidden view you can add a delete button. This way you can achieve this:
I've set up an example project on GitHub. You can also read more about this solution here.
The biggest advantage of this solution is the simplicity and that you don't have to deal with constraints and gesture recognizers.
Its very simple..You need to add a customContentView and customBackgroundView behind the customContentView.
After that and you need to shift the customContentViewto the left as user swipes from right to left. Shifting the view makes visible to the customBackgroundView.
Lets Code:
First of all you need to add panGesture to your UICollectionView as
override func viewDidLoad() {
super.viewDidLoad()
self.panGesture = UIPanGestureRecognizer(target: self, action: #selector(self.panThisCell))
panGesture.delegate = self
self.collectionView.addGestureRecognizer(panGesture)
}
Now implement the selector as
func panThisCell(_ recognizer:UIPanGestureRecognizer){
if recognizer != panGesture{ return }
let point = recognizer.location(in: self.collectionView)
let indexpath = self.collectionView.indexPathForItem(at: point)
if indexpath == nil{ return }
guard let cell = self.collectionView.cellForItem(at: indexpath!) as? CustomCollectionViewCell else{
return
}
switch recognizer.state {
case .began:
cell.startPoint = self.collectionView.convert(point, to: cell)
cell.startingRightLayoutConstraintConstant = cell.contentViewRightConstraint.constant
if swipeActiveCell != cell && swipeActiveCell != nil{
self.resetConstraintToZero(swipeActiveCell!,animate: true, notifyDelegateDidClose: false)
}
swipeActiveCell = cell
case .changed:
let currentPoint = self.collectionView.convert(point, to: cell)
let deltaX = currentPoint.x - cell.startPoint.x
var panningleft = false
if currentPoint.x < cell.startPoint.x{
panningleft = true
}
if cell.startingRightLayoutConstraintConstant == 0{
if !panningleft{
let constant = max(-deltaX,0)
if constant == 0{
self.resetConstraintToZero(cell,animate: true, notifyDelegateDidClose: false)
}else{
cell.contentViewRightConstraint.constant = constant
}
}else{
let constant = min(-deltaX,self.getButtonTotalWidth(cell))
if constant == self.getButtonTotalWidth(cell){
self.setConstraintsToShowAllButtons(cell,animate: true, notifyDelegateDidOpen: false)
}else{
cell.contentViewRightConstraint.constant = constant
cell.contentViewLeftConstraint.constant = -constant
}
}
}else{
let adjustment = cell.startingRightLayoutConstraintConstant - deltaX;
if (!panningleft) {
let constant = max(adjustment, 0);
if (constant == 0) {
self.resetConstraintToZero(cell,animate: true, notifyDelegateDidClose: false)
} else {
cell.contentViewRightConstraint.constant = constant;
}
} else {
let constant = min(adjustment, self.getButtonTotalWidth(cell));
if (constant == self.getButtonTotalWidth(cell)) {
self.setConstraintsToShowAllButtons(cell,animate: true, notifyDelegateDidOpen: false)
} else {
cell.contentViewRightConstraint.constant = constant;
}
}
cell.contentViewLeftConstraint.constant = -cell.contentViewRightConstraint.constant;
}
cell.layoutIfNeeded()
case .cancelled:
if (cell.startingRightLayoutConstraintConstant == 0) {
self.resetConstraintToZero(cell,animate: true, notifyDelegateDidClose: true)
} else {
self.setConstraintsToShowAllButtons(cell,animate: true, notifyDelegateDidOpen: true)
}
case .ended:
if (cell.startingRightLayoutConstraintConstant == 0) {
//Cell was opening
let halfOfButtonOne = (cell.swipeView.frame).width / 2;
if (cell.contentViewRightConstraint.constant >= halfOfButtonOne) {
//Open all the way
self.setConstraintsToShowAllButtons(cell,animate: true, notifyDelegateDidOpen: true)
} else {
//Re-close
self.resetConstraintToZero(cell,animate: true, notifyDelegateDidClose: true)
}
} else {
//Cell was closing
let buttonOnePlusHalfOfButton2 = (cell.swipeView.frame).width
if (cell.contentViewRightConstraint.constant >= buttonOnePlusHalfOfButton2) {
//Re-open all the way
self.setConstraintsToShowAllButtons(cell,animate: true, notifyDelegateDidOpen: true)
} else {
//Close
self.resetConstraintToZero(cell,animate: true, notifyDelegateDidClose: true)
}
}
default:
print("default")
}
}
Helper methods to update constraints
func getButtonTotalWidth(_ cell:CustomCollectionViewCell)->CGFloat{
let width = cell.frame.width - cell.swipeView.frame.minX
return width
}
func resetConstraintToZero(_ cell:CustomCollectionViewCell, animate:Bool,notifyDelegateDidClose:Bool){
if (cell.startingRightLayoutConstraintConstant == 0 &&
cell.contentViewRightConstraint.constant == 0) {
//Already all the way closed, no bounce necessary
return;
}
cell.contentViewRightConstraint.constant = -kBounceValue;
cell.contentViewLeftConstraint.constant = kBounceValue;
self.updateConstraintsIfNeeded(cell,animated: animate) {
cell.contentViewRightConstraint.constant = 0;
cell.contentViewLeftConstraint.constant = 0;
self.updateConstraintsIfNeeded(cell,animated: animate, completionHandler: {
cell.startingRightLayoutConstraintConstant = cell.contentViewRightConstraint.constant;
})
}
cell.startPoint = CGPoint()
swipeActiveCell = nil
}
func setConstraintsToShowAllButtons(_ cell:CustomCollectionViewCell, animate:Bool,notifyDelegateDidOpen:Bool){
if (cell.startingRightLayoutConstraintConstant == self.getButtonTotalWidth(cell) &&
cell.contentViewRightConstraint.constant == self.getButtonTotalWidth(cell)) {
return;
}
cell.contentViewLeftConstraint.constant = -self.getButtonTotalWidth(cell) - kBounceValue;
cell.contentViewRightConstraint.constant = self.getButtonTotalWidth(cell) + kBounceValue;
self.updateConstraintsIfNeeded(cell,animated: animate) {
cell.contentViewLeftConstraint.constant = -(self.getButtonTotalWidth(cell))
cell.contentViewRightConstraint.constant = self.getButtonTotalWidth(cell)
self.updateConstraintsIfNeeded(cell,animated: animate, completionHandler: {(check) in
cell.startingRightLayoutConstraintConstant = cell.contentViewRightConstraint.constant;
})
}
}
func setConstraintsAsSwipe(_ cell:CustomCollectionViewCell, animate:Bool,notifyDelegateDidOpen:Bool){
if (cell.startingRightLayoutConstraintConstant == self.getButtonTotalWidth(cell) &&
cell.contentViewRightConstraint.constant == self.getButtonTotalWidth(cell)) {
return;
}
cell.contentViewLeftConstraint.constant = -self.getButtonTotalWidth(cell) - kBounceValue;
cell.contentViewRightConstraint.constant = self.getButtonTotalWidth(cell) + kBounceValue;
self.updateConstraintsIfNeeded(cell,animated: animate) {
cell.contentViewLeftConstraint.constant = -(self.getButtonTotalWidth(cell))
cell.contentViewRightConstraint.constant = self.getButtonTotalWidth(cell)
self.updateConstraintsIfNeeded(cell,animated: animate, completionHandler: {(check) in
cell.startingRightLayoutConstraintConstant = cell.contentViewRightConstraint.constant;
})
}
}
func updateConstraintsIfNeeded(_ cell:CustomCollectionViewCell, animated:Bool,completionHandler:#escaping ()->()) {
var duration:Double = 0
if animated{
duration = 0.1
}
UIView.animate(withDuration: duration, delay: 0, options: [.curveEaseOut], animations: {
cell.layoutIfNeeded()
}, completion:{ value in
if value{ completionHandler() }
})
}
I have created a sample project here in Swift 3.
It is a modified version of this tutorial.
In the Collection View Programming Guide for iOS, in the section Incorporating Gesture Support, the docs read:
You should always attach your gesture recognizers to the collection view itself and not to a specific cell or view.
So, I think it's not a good practice to add recognizers to UICollectionViewCell.
I followed a similar approach to #JacekLampart, but decided to add the UISwipeGestureRecognizer in the UICollectionViewCell's awakeFromNib function so it is only added once.
UICollectionViewCell.m
- (void)awakeFromNib {
UISwipeGestureRecognizer* swipeGestureRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(swipeToDeleteGesture:)];
swipeGestureRecognizer.direction = UISwipeGestureRecognizerDirectionLeft;
[self addGestureRecognizer:swipeGestureRecognizer];
}
- (void)swipeToDeleteGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer {
if (swipeGestureRecognizer.state == UIGestureRecognizerStateEnded) {
// update cell to display delete functionality
}
}
As for exiting delete mode, I created a custom UIGestureRecognizer with an NSArray of UIViews. I borrowed the idea from #iMS from this question: UITapGestureRecognizer - make it work on touch down, not touch up?
On touchesBegan, if the touch point isn't within any of the UIViews, the gesture succeeds and delete mode is exited.
In this way, I am able to pass the delete button within the cell (and any other views) to the UIGestureRecognizer and, if the touch point is within the button's frame, delete mode will not exit.
TouchDownExcludingViewsGestureRecognizer.h
#import <UIKit/UIKit.h>
#interface TouchDownExcludingViewsGestureRecognizer : UIGestureRecognizer
#property (nonatomic) NSArray *excludeViews;
#end
TouchDownExcludingViewsGestureRecognizer.m
#import "TouchDownExcludingViewsGestureRecognizer.h"
#import <UIKit/UIGestureRecognizerSubclass.h>
#implementation TouchDownExcludingViewsGestureRecognizer
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
if (self.state == UIGestureRecognizerStatePossible) {
BOOL touchHandled = NO;
for (UIView *view in self.excludeViews) {
CGPoint touchLocation = [[touches anyObject] locationInView:view];
if (CGRectContainsPoint(view.bounds, touchLocation)) {
touchHandled = YES;
break;
}
}
self.state = (touchHandled ? UIGestureRecognizerStateFailed : UIGestureRecognizerStateRecognized);
}
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
self.state = UIGestureRecognizerStateFailed;
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
self.state = UIGestureRecognizerStateFailed;
}
#end
Implementation (in the UIViewController containing UICollectionView):
#import "TouchDownExcludingViewsGestureRecognizer.h"
TouchDownExcludingViewsGestureRecognizer *touchDownGestureRecognizer = [[TouchDownExcludingViewsGestureRecognizer alloc] initWithTarget:self action:#selector(exitDeleteMode:)];
touchDownGestureRecognizer.excludeViews = #[self.cellInDeleteMode.deleteButton];
[self.view addGestureRecognizer:touchDownGestureRecognizer];
- (void)exitDeleteMode:(TouchDownExcludingViewsGestureRecognizer *)touchDownGestureRecognizer {
// exit delete mode and disable or remove TouchDownExcludingViewsGestureRecognizer
}
You can try adding a UISwipeGestureRecognizer to each collection cell, like this:
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CollectionViewCell *cell = ...
UISwipeGestureRecognizer* gestureRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(userDidSwipe:)];
[gestureRecognizer setDirection:UISwipeGestureRecognizerDirectionRight];
[cell addGestureRecognizer:gestureRecognizer];
}
followed by:
- (void)userDidSwipe:(UIGestureRecognizer *)gestureRecognizer {
if (gestureRecognizer.state == UIGestureRecognizerStateEnded) {
//handle the gesture appropriately
}
}
With iOS 14, you can use UICollectionViewLayoutListConfiguration in conjunction with UICollectionViewCompositionalLayout to get this functionality natively for free, no custom cells or gesture recognizes needed.
If your minimum deploy target is >= iOS 14.x, this is probably the preferred method from now on, and it will also let you to adopt modern cell configuration with UIContentView and UIContentConfiguration to boot.
There is a more standard solution to implement this feature, having a behavior very similar to the one provided by UITableView.
For this, you will use a UIScrollView as the root view of the cell, and then position the cell content and the delete button inside the scroll view. The code in your cell class should be something like this:
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(scrollView)
scrollView.addSubview(viewWithCellContent)
scrollView.addSubview(deleteButton)
scrollView.isPagingEnabled = true
scrollView.showsHorizontalScrollIndicator = false
}
In this code we set the property isPagingEnabled to true to make the scroll view to stop scrolling only at the boundaries of its content. The layout subviews for this cell should be something like:
override func layoutSubviews() {
super.layoutSubviews()
scrollView.frame = bounds
// make the view with the content to fill the scroll view
viewWithCellContent.frame = scrollView.bounds
// position the delete button just at the right of the view with the content.
deleteButton.frame = CGRect(
x: label.frame.maxX,
y: 0,
width: 100,
height: scrollView.bounds.height
)
// update the size of the scrolleable content of the scroll view
scrollView.contentSize = CGSize(width: button.frame.maxX, height: scrollView.bounds.height)
}
With this code in place, if you run the app you will see that the swipe to delete is working as expected, however, we lost the ability to select the cell. The problem is that since the scroll view is filling the whole cell, all the touch events are processed by it, so the collection view will never have the opportunity to select the cell (this is similar to when we have a button inside a cell, since touches on that button don't trigger the selection process but are handled directly by the button.)
To fix this problem we just have to indicate the scroll view to ignore the touch events that are processed by it and not by one of its subviews. To achieve this just create a subclass of UIScrollView and override the following function:
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
let result = super.hitTest(point, with: event)
return result != self ? result : nil
}
Now in your cell you should use an instance of this new subclass instead of the standard UIScrollView.
If you run the app now you will see that we have the cell selection back, but this time the swipe isn't working 😳. Since we are ignoring touches that are handled directly by the scroll view, then its pan gesture recognizer won't be able to start recognizing touch events. However, this can be easily fixed by indicating to the scroll view that its pan gesture recognizer will be handled by the cell and not by the scroll. You do this adding the following line at the bottom of your cell's init(frame: CGRect):
addGestureRecognizer(scrollView.panGestureRecognizer)
This may look like a bit hacky, but it isn't. By design, the view that contains a gesture recognizer and the target of that recognizer don't have to be the same object.
After this change all should be working as expected. You can see a full implementation of this idea in this repo

Resources