Не знаете, как имитировать желаемую функциональность пользовательского интерфейса

Question

Итак, я нашел следующий шаблон пользовательского интерфейса в сети и пытался реализовать его в Xcode. Тем не менее, я был неудачным. Я не уверен, что для создания оптимального подхода будет

1. создайте три разных UIViewControllers (в этом случае я не уверен, как заставить их анимироваться внутри и вне поля зрения / как заставить их перекрывать друг друга)
2. или использовать UITableView с настраиваемыми перекрывающимися ячейками. Тем не менее, я не уверен, позволит ли этот подход правильно анимировать после нажатия на каждую ячейку. Для этого второго подхода я видел этот пост , но это решение не допускает сенсорного взаимодействия в перекрывающихся областях, что мне нужно.

Я искал в Интернете библиотеки, которые бы обеспечивали такую ​​функциональность, но я не смог найти ни одной. Анимацию, которую я пытаюсь достичь, можно найти здесь .

Answer 1

Я бы использовал StackView для хранения всех представлений ваших ViewControllers.Затем вы можете установить свойство spacing 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)
                }
            })


        }
    }
}