iOS-水平滑动UICollectionViewCell

Question

I have a UICollectionView that looks like a tableView and I want the cells to swipe only horizontally.

I have managed to make them to move around, but the problem is I can move them up as well and basically I can move them in any direction and I want them to swipe like a tableViewCell when you delete it for example.

In the end I want to be able to just swipe a cell out of the screen horizontally

I have attached a image of how the collection view looks now and a cell that moves around(the red one)

Answer 1

I found a way to do it with UIPanGestureRecognizer after all. All the operations are on the cell(inside the cell class). Below you have the solution that worked for me

var swipeGesture: UIPanGestureRecognizer!
var originalPoint: CGPoint!

func configureCell() {
    setupSwipeGesture()
}

func setupSwipeGesture() {
        swipeGesture = UIPanGestureRecognizer(target: self, action:#selector(swiped(_:)))
        swipeGesture.delegate = self

        self.addGestureRecognizer(swipeGesture)
    }


func swiped(_ gestureRecognizer: UIPanGestureRecognizer) {
let xDistance:CGFloat = gestureRecognizer.translation(in: self).x

        switch(gestureRecognizer.state) {
        case UIGestureRecognizerState.began:
            self.originalPoint = self.center
        case UIGestureRecognizerState.changed:
            let translation: CGPoint = gestureRecognizer.translation(in: self)
            let displacement: CGPoint = CGPoint.init(x: translation.x, y: translation.y)

            if displacement.x + self.originalPoint.x < self.originalPoint.x {
                self.transform = CGAffineTransform.init(translationX: displacement.x, y: 0)
                self.center = CGPoint(x: self.originalPoint.x + xDistance, y: self.originalPoint.y)
            }
        case UIGestureRecognizerState.ended:
            let hasMovedToFarLeft = self.frame.maxX < UIScreen.main.bounds.width / 2
            if (hasMovedToFarLeft) {
                removeViewFromParentWithAnimation()
            } else {
                resetViewPositionAndTransformations()
            }
        default:
            break
        }
    }

func resetViewPositionAndTransformations(){
        UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.0, options: UIViewAnimationOptions(), animations: {
            self.center = self.originalPoint
            self.transform = CGAffineTransform(rotationAngle: 0)
        }, completion: {success in })
    }

func removeViewFromParentWithAnimation() {
        var animations:(()->Void)!
        animations = {self.center.x = -self.frame.width}

        UIView.animate(withDuration: 0.2, animations: animations , completion: {success in self.removeFromSuperview()})
    }

Answer 2

You will need to do a few things:

1) Add a UISwipeGestureRecognizer to each cell. Be sure to set direction = .left .

2) Add the target for the gesture recognizer, and make sure the target can communicate with the collection view's layout. 2a) The collection view data source could add the target in cellForItemAtIndexPath . You would need a way to make sure it's not added repeatedly on reused cells. 2b) You could add the gesture recognizer from within the cell, and create a delegate relationship with your view controller.

3) You will need the index path of the cell that was swiped. To get the cell from the gesture recognizer (2a) call it's view property and cast as UICollectionViewCell. If you use a delegate (2b) or another method, it should pass the cell back. Then you can call collectionView.cellForItem(at indexPath: IndexPath) -> UICollectionViewCell? to get the index path.

4) Call deleteItemAtIndexPath: on the collection view, in performBatchUpdates etc.

5) It seems the simplist way to animate the disappearance to the left (disclaimer, I haven't done this part myself though I've worked with attributes) is to implement finalLayoutAttributesForDisappearingItemAtIndexPath: in a subclass of UICollectionViewLayout.

First, you will need the attributes cached. So override and cache:

class LeftDisappearLayout : UICollectionViewFLowLayout {

    var cachedAttributes = [NSIndexPath:UICollectionViewAttributes?]()

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        let attributes = super.layoutAttributesForItem(at: indexPath) 
        cachedAttributes[indexPath] = attributes
        return attributes
    }

Then since iOS 9 it appears there's a simple way to have the system animate to the left for you:

    func finalLayoutAttributesForDisappearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        if var attributes = cachedAttributes[indexPath] {
            let newCenterX : CGFloat = -1 * (attributes.frame.size.width / 2)  
            attributes.center = CGPoint(newCenterX, attributes.center.y)
            return attributes 
        }
        AssertionFailure("Unable to find cached attributes!") // Saying, "This should never happen and in development crash to alert the developer, but in production gracefully revert to default."
        return nil
    }
}

Make sure to set your collection view to use this layout. Hope this helps.