iOS - 水平滑动UICollectionViewCell

时间:2017-01-27 14:46:35

标签: ios swift uicollectionviewcell swipe

我有一个看起来像tableView的UICollectionView,我希望单元格只能水平滑动。

我设法让它们四处移动,但问题是我可以将它们向上移动,基本上我可以向任何方向移动它们,我希望它们像删除它时的tableViewCell一样滑动。 / p>

最后,我希望能够将一个单元格水平滑出屏幕

我附上了一个关于集合视图现在看起来如何以及一个移动的单元格(红色单元格)的图像

enter image description here

2 个答案:

答案 0 :(得分:4)

毕竟我找到了一种方法UIPanGestureRecognizer。所有操作都在单元格上(在单元类内)。下面你有一个适合我的解决方案

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()})
    }

答案 1 :(得分:2)

您需要做一些事情:

1)为每个单元格添加UISwipeGestureRecognizer。请务必设置direction = .left

2)添加手势识别器的目标,并确保目标可以与集合视图的布局进行通信。 2a)集合视图数据源可以在cellForItemAtIndexPath中添加目标。您需要一种方法来确保它不会在重复使用的单元格上重复添加。 2b)您可以在单元格中添加手势识别器,并与视图控制器创建委托关系。

3)您将需要刷过的单元格的索引路径。要从手势识别器(2a)获取单元格,请调用它的view属性并转换为UICollectionViewCell。如果您使用委托(2b)或其他方法,它应该传回单元格。然后,您可以调用collectionView.cellForItem(at indexPath: IndexPath) -> UICollectionViewCell?来获取索引路径。

4)在deleteItemAtIndexPath:

中的集合视图上调用performBatchUpdates

5)似乎以简单的方式将消失动画向左(免责声明,我自己没有完成这部分,虽然我已经使用了属性)是在UICollectionViewLayout的子类中实现finalLayoutAttributesForDisappearingItemAtIndexPath:

首先,您需要缓存的属性。所以覆盖和缓存:

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
    }

然后从iOS 9开始,有一种简单的方法让系统为你动画:

    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
    }
}

确保将集合视图设置为使用此布局。希望这会有所帮助。