iOS – Longpress drag and drop using UICollectionView with Animation

We’ve seen a feature in our iOS devices home screen on long press to remove an app and drag and drop any of the app. So, I have written this blog to show how we can create this feature in our app while development.

I have used UICollectionView DataSources and Delegates to implement this functionality with a shaking animation.

Here is my view that looks like with few sets of images in a UICollectionView:

 

 

1. UILongPressGestureRecognizer

Add UILongPressGestureRecognizer on UICollectionView in viewDidLoad:

UILongPressGestureRecognizer action func definition as given below:

Different states of Long press is given below:

  1. beginInteractiveMovementForItem(at indexPath: IndexPath) -> It helps to know the interactive movement of the cell at particular index path.
  2. updateInteractiveMovementTargetPosition(_:) -> It helps to update the item position in the collection view with the help of gesture position.
  3. endInteractiveMovement()-> It helps to know that the interactive movement is ended and long press gesture has been released.
  4. cancelInteractiveMovement()-> It helps to know the interactive movement has ended.

2. UICollectionView Delegates and DataSources :

imgArr is an array of [String] typeThe array consists of a set of sample images.

3. SmallImgCell UICollectionViewCell :

UICollectionViewCell consisting of an image view and a remove button.

The UIImageView is for displaying an image over the UICollectionView and UIButton for showing the cross button over the cell for deleting an item from collection view.

startAnimate snippet for animation over image in collection view:

The func will start toggling of the images.

 

 

stopAnimate snippet for animation over image in collection view:

The func will stop toggling of images.

Remove Button and done button is shown like in iPhone X :

On clicking Remove button action remove the item at that index from UICollectionView and reload it.

On Done button action hide the done button, stop the animation.

For changing the cell locations from one place to another or dragging the cells write following snippets:

4. UICollectionView Delegates use to drag and drop from target to destination :

func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool

–> Return true for enabling the drag feature.

–>

func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath)

 –> Swap item from source to destination

 

I hope from this, it will make you more comfortable using a LongPress and drag and drop feature of UICollectionView. Thanks for tuning in once again!

. . .

Comments (2)

Add Your Comment

  • Sharafat khan
    In Above example, only the source and destination items are replacing there positions, But in animation all the items are changing there positions, so to achieve that effect below is the code

    func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
    print(“Start index :- \(sourceIndexPath.item)”)
    print(“End index :- \(destinationIndexPath.item)”)

    let tmp = imgArr[sourceIndexPath.item]

    if sourceIndexPath.item <= destinationIndexPath.item {
    var index = sourceIndexPath.item
    while (index destinationIndexPath.item) {
    imgArr[index] = imgArr[index – 1]
    index -= 1
    }
    imgArr[destinationIndexPath.item] = tmp
    }
    collectionView.reloadData()
    }

  • Nam
    give me source code. tks u!
  • css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close