Question

所以我在线找到了以下UI模式，并且我一直试图在Xcode中实现它。但是，我一直没有成功。我不确定是否要创建最佳方法是

创建三个不同的UIViewControllers（在这种情况下，我不确定如何使它们进入和离开视域/如何使其彼此重叠）
或将UITableView与自定义重叠单元格一起使用。但是，我不确定这种方法是否可以让我在按下每个单元格时进行适当的动画处理。对于第二种方法，我看到了post，但是该解决方案不允许在重叠区域进行触摸交互，这是我所需要的。

我在网上寻找可以使用此类功能的库，但找不到任何库。我正在尝试实现的动画可以在here中找到。

Answer 1

我将使用StackView来保存ViewController的所有视图。然后，您可以将堆栈视图的interval属性设置为负值，以使视图重叠。如果希望在点击时显示其中一个视图控制器的完整视图，则可以向该视图添加一个点击手势识别器，以将仅该视图的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)
                }
            })


        }
    }
}

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

1 个答案: