iOS – Longpress drag and drop using UICollectionView with Animation

Save

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!

. . .
Discuss on Helpdesk

Leave a Comment

Your email address will not be published. Required fields are marked*


6 comments

  • 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!
    • Jeff
      did he send you the source code?
  • Jeff
    Could you share your GitHub of this article – it would be very useful. Thanks!
    • anchit (Moderator)
      The article is self explanatory.
      We don’t share the code.

      You can ask your queries and we will try to help you out.

  • Jeff Salvant
    Hi could you send the source code (maybe through github)?
  • css.php
    Start a Project


      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home