Drag over UICollectionViewCells to select iOS

Question

I am trying to replicate the iOS9 feature where you can drag to select multiple photos, or UICollectionViewCells: https://i.ytimg.com/vi/LZRTu3B5zlY/maxresdefault.jpg

I saw one answer here, but as a beginner iOS and objective-c developer, I couldn't figure out what to do.

I have also tried to work from this question, but I couldn't get anything to select.

I tried some code, but couldn't get any response at all.

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    self.startPoint = [touch locationInView:self.collectionView];
    self.selectionBox = CGRectMake(self.startPoint.x, self.startPoint.y, 0, 0);
    [self.collectionView setNeedsDisplay];
}

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self.collectionView];
    _selectionBox.size.width = currentPoint.x - (self.selectionBox.origin.x);
    _selectionBox.size.height = currentPoint.y - (self.selectionBox.origin.y);
    self.selectionBox = CGRectMake(self.startPoint.x, self.startPoint.y, 0, 0);
    // select all the cells in this selectionBox area
    [self.collectionView setNeedsDisplay];

}

Any pointers on how to code this? Thanks very much.

score 4 · Accepted Answer · edited May 23 '17 at 12:32

This answer pretty much sums it up

You could use UIPanGestureRecognizer. And based on the location of the pan events, tracking what cells are passed through. When the gesture ends, you would have an array of selected cells.

Make sure that cancelsTouchesInView is set to NO. You'll need to set the delegate with gestureRecognizer:shouldRecognizeSimultaneouslyWithGestureRecognizer: and gestureRecognizerShouldBegin implemented to make sure the CollectionView can still scroll

I was able to whip up a somewhat working code that could get you started:

- (void) didPanToSelectCells:(UIPanGestureRecognizer*) panGesture{
    if (!selectionMode){
        [self.collectionView setScrollEnabled:YES];
        return;
    }else{
        if (panGesture.state == UIGestureRecognizerStateBegan){
            [self.collectionView setUserInteractionEnabled:NO];
            [self.collectionView setScrollEnabled:NO];

        }else if (panGesture.state == UIGestureRecognizerStateChanged){
            CGPoint location = [panGesture locationInView:self.collectionView];

            NSIndexPath *indexPath = [self.collectionView indexPathForItemAtPoint:location];

            if (![selectedIndexes containsObject:@(indexPath.row)]){
                // highlight the cell using a method
                [self highlightCell:[self.collectionView cellForItemAtIndexPath:indexPath] selected:YES];
            }
        }else if (panGesture.state == UIGestureRecognizerStateEnded){
            [self.collectionView setScrollEnabled:YES];
            [self.collectionView setUserInteractionEnabled:YES];
        }
    }
}

You would need a collection view with items in it.

And then you need to create the UIPanGestureRecognizer and add it to the collectionview and set the gesture action to didPanToSelectCells:

Only listen to the pan gesture if we are in selection mode (boolean named selectionMode in the example)

From there you need to add the selected objects into an array (named selectedIndexes in the example) based on the user's touch location and then highlight that cell.

Thanks so much! I am going to try it out. One question: where did selectCell come from? I looked in the docs and didn't find that property. — sallyp, Apr 12 '16 at 18:43
@sallyp ah yes, sorry. I edited the code and added an explanation. That is meant to be a function that highlights the cell to show the user that the cell has been selected. it is a separate method you have to create depending on how you want to display selection — Julio, Apr 12 '16 at 18:56

score 1 · Answer 2 · answered Jan 16 '21 at 17:03

If you're targeting iOS 13 and above, you can now use iOS's builtin multiselect gestures in both collection views and table views: see Selecting Multiple Items with a Two-Finger Pan Gesture. Make sure you set collectionView.allowsMultipleSelectionDuringEditing to true.

Drag over UICollectionViewCells to select iOS

2 Answers2