Question

我想显示水平堆叠的卡，通过滑动动作，卡可以从左向右一一移动。卡片移动后，就会在右侧形成堆栈

我尝试查看各种无法立即实现的库。 https://www.cocoacontrols.com/controls/iaccordion这个靠近了，它具有垂直滑动并且位于目标C中。您能指出我正确的方向来完成此操作吗？

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

然后，在两个卡座上的卡可能会有点移位，这最容易应用一些转换。当您拖动它们时，它们甚至可能会旋转一点……但这完全取决于您要实现的目标。

滑动时如何实现从左向右移动的水平堆叠卡？

1 个答案: