iOS Swift：如何实现类似用户界面的堆叠卡片？

Posted 2023-03-10

【中文标题】iOS Swift：如何实现类似用户界面的堆叠卡片？

【英文标题】：iOS Swift: How to achieve stack of cards like user interface?

【发布时间】：2017-10-25 07:15:52

【问题描述】：

我正在尝试实现以下设计，其中四个不同的视图控制器将背靠背堆叠。下面的参考图片 -

每个视图控制器都会动态地拥有包含不同数据的表视图。可以通过从右侧滑动来切换视图控制器。

我知道 UIPageViewController 适合这种分页方式。 但是，这种堆叠的页面浏览量恐怕能实现吗？

我还没有开始任何事情，我需要一些想法才能开始。首先，是否有可能做到这一点？

如果不够清楚，请告诉我。谢谢。

【问题讨论】：

是否和：***.com/questions/43530231/…一样？

我建议创建一个容器视图控制器并向其中添加子视图控制器。

好的@AuRis。但是，如何使用容器视图将页面显示在彼此之上？

核心动画和仿射变换应该可以做到这一点。

好的有用的信息。但是如果您可以发布一些代码sn-ps会有所帮助吗？

【参考方案1】：

正如我在评论中所建议的，您可以创建一个容器视图控制器，在其中添加您的子视图控制器。您如何呈现和删除它们取决于您。我添加了滑动手势以将它们从childViewControllers 数组中逐个删除，但您可以使用动画等进行详细说明。示例如下：

import UIKit
class ViewController: UIViewController 
    override func viewDidLoad() 
        super.viewDidLoad()

        let swipeGesturRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(didSwipe))
        swipeGesturRecognizer.direction = .left
        view.addGestureRecognizer(swipeGesturRecognizer)

        var index = 0
        let amount = 5
        while index < amount 
            let childViewController = UIViewController()
            childViewController.view
            .translatesAutoresizingMaskIntoConstraints = true
            let hue = 1.0 / CGFloat(index)
            childViewController.view.backgroundColor = UIColor(hue: hue, saturation: 0.5, brightness: 0.5, alpha: 1)
            childViewController.view.frame = self.view.bounds.insetBy(dx: CGFloat(amount - index) * 10, dy: 80.0).offsetBy(dx: 0.0, dy: -CGFloat(amount - index) * 10.0)
            childViewController.view.layer.borderColor = UIColor.blue.cgColor
            childViewController.view.layer.borderWidth = 1.0
            self.view.addSubview(childViewController.view)
            self.addChildViewController(childViewController)
            childViewController.didMove(toParentViewController: self)
            index += 1
        
    

    // Removes child view controlelrs one by one when swiped left
    @objc func didSwipe() 
        guard let childViewController = childViewControllers.last else 
            return
        
        childViewController.willMove(toParentViewController: nil)
        childViewController.view.removeFromSuperview()
        childViewController.removeFromParentViewController()
    

【讨论】：

我会试试这个，让你知道。非常感谢

如果我想修改它以创建一个无限循环（而不是在滑动时删除子视图，将其推送到最后一个索引），我该怎么办？有什么提示吗？