CODEWITHSUNDEEP
iosobjective-cuicollectionview
sallyp
sallyp

Reputation: 226

Drag over UICollectionViewCells to select iOS

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.

Upvotes: 1

Views: 2755

Answers (2)

Hristo
Hristo

Reputation: 6540

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.

Upvotes: 1

Julio
Julio

Reputation: 483

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.

Upvotes: 4

Related Questions