如何实现刷卡时从左向右移动的水平堆叠卡片？答案

【问题标题】：How to implement horizontal stacked cards which moves from left to right when we swipe?如何实现刷卡时从左向右移动的水平堆叠卡片？
【发布时间】：2019-10-13 00:35:52
【问题描述】：

我想显示水平堆叠的卡片，通过滑动动作从左到右一张一张地移动。一旦卡片移动，它就会在右侧形成一个堆栈

我尝试过查看各种没有立即实现此功能的库。 https://www.cocoacontrols.com/controls/iaccordion 这个接近了它有垂直滑动并且在目标 C。你能指出我正确的方向来完成这件事吗？

【问题讨论】：

尝试使用UICollectionView。
Creating a swiping card stack with UICollectionView and UICollectionViewCells?的可能重复

标签： ios swift horizontal-scrolling stacked

【解决方案1】：

类似卡牌的堆叠很容易制作，但在某些效果方面可能很难完美。基本上，您的每个观点都有 3 个可能的位置之一；在初始堆栈上，在目标堆栈上，用户正在拖动它。

所以最简单的实现是为您的视图定义 2 个中心并拥有 2 个视图数组。一开始所有的视图都在第一个数组中。第一个阵列中的所有视图都应以第一个中心为中心，第二个阵列中的所有视图应以第二个中心为中心。现在你需要一个平移手势。当手势开始时，您应该检查它是否从左侧堆栈开始，如果它只是从第一个数组中删除它并开始改变它的中心。喜欢

func onPanGesture(_ sender: UIGestureRecognizer) {
    switch sender.state {
    case .began:
        if leftStackView.bounds.contains(sender.location(in: leftStackView)), viewsInLeftStack.count > 0 {
            pannedView = viewsInLeftStack.removeLast()
        }
    case .changed:
        pannedView?.center = sender.location(in: self.view)
    }
}

现在，当手指抬起时，您应该检查卡片是否应该放回或移动到另一叠。因此必须添加手势识别器的另一种情况：

    case .ended, .cancelled:
        if let pannedView = pannedView {
            if(abs(pannedView.center.x-leftStackView.center.x) > abs(pannedView.center.x-rightStackView.center.x)) {
                // Closer to the right one horizontally
                viewsInLeftStack.append(pannedView)
                pannedView.center = leftStackView.center
            } else {
                // Closer to the left one horizontally
                viewsInRightStack.append(pannedView)
                pannedView.center = rightStackView.center
            }
        }

在基础上，这就是您所需要的。但是随后使组件变得更好。例如，当卡片被释放时，它应该动画到它的牌组：

UIView.animate(withDuration: 0.3) {
    pannedView.center = self.rightStackView.center
}

然后卡可能会在两副牌上有点移位，这是最容易应用一些变换的。当你拖动它们时，它们甚至可能会旋转一点......但这完全取决于你想要实现的内容。

【讨论】：