ios - 不确定如何模仿所需的 UI 功能

Question

所以我在网上找到了以下 UI 模式，并尝试在 Xcode 中实现它。然而，我一直没有成功。我不确定是否创建最佳方法是

1. 创建三个不同的UIViewControllers(在这种情况下，我不确定如何让它们在 View 中和 View 外进行动画/如何让它们彼此重叠)
2. 或使用带有自定义重叠单元格的UITableView。但是，我不确定这种方法是否允许我在按下每个单元格时正确设置动画。对于第二种方法，我看到了这个 post ，但是这个解决方案不允许在重叠区域进行触摸交互，而这是我所需要的。

我在网上寻找允许此类功能的库，但我没有成功找到任何库。我想要实现的动画可以找到here .

Answer 1

我会使用 StackView 来保存 ViewController 的所有 View 。 然后，您可以将堆栈 View 的间距属性设置为负值以使 View 重叠。如果您希望在点击时显示其中一个 View Controller 的完整 View ，则可以向该 View 添加点击手势识别器，以将该 View 的 stackView 间距更改为 0。

一个非常简单的例子:

class PlaygroundViewController: UIViewController {

    let firstViewController = UIViewController()
    let secondViewController = UIViewController()
    let thirdViewController = UIViewController()

    lazy var viewControllersToAdd = [firstViewController, secondViewController, thirdViewController]

    let heightOfView: CGFloat = 300
    let viewOverlap: CGFloat = 200

    let stackView = UIStackView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        firstViewController.view.backgroundColor = .red
        secondViewController.view.backgroundColor = .blue
        thirdViewController.view.backgroundColor = .green

        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .vertical
        stackView.spacing = -viewOverlap

        viewControllersToAdd.forEach { (controller: UIViewController) in
            if let childView = controller.view {

                stackView.addArrangedSubview(childView)
                NSLayoutConstraint.activate([
                    childView.heightAnchor.constraint(equalToConstant: heightOfView),
                    childView.widthAnchor.constraint(equalTo: stackView.widthAnchor)
                    ])

                let gestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(didTapChildView(sender:)))
                childView.addGestureRecognizer(gestureRecognizer)
                childView.isUserInteractionEnabled = true
            }
            addChild(controller)
            controller.didMove(toParent: self)
        }

        view.addSubview(stackView)

        NSLayoutConstraint.activate([
            stackView.rightAnchor.constraint(equalTo: view.rightAnchor),
            stackView.leftAnchor.constraint(equalTo: view.leftAnchor),
            stackView.topAnchor.constraint(equalTo: view.topAnchor),
            ])
    }

    @objc func didTapChildView(sender: UITapGestureRecognizer) {

        if let targetView = sender.view {
            UIView.animate(withDuration: 0.3, animations: {
                let currentSpacing = self.stackView.customSpacing(after: targetView)
                if currentSpacing == 0 {
                    // targetView is already expanded, collapse it
                    self.stackView.setCustomSpacing(-self.viewOverlap, after: targetView)
                } else {
                    // expand view
                    self.stackView.setCustomSpacing(0, after: targetView)
                }
            })


        }
    }
}