ios - 旋转事件时无法修复自动布局动画

Question

不要害怕接下来会出现的庞大代码。您可以将代码片段复制并粘贴到新的单 View 应用程序中，以查看其行为方式。问题出在与旋转动画一起执行的动画完成 block 内的某处。

import UIKit

let sizeConstant: CGFloat = 60

class ViewController: UIViewController {

    let topView = UIView()
    let backgroundView = UIView()
    let stackView = UIStackView()
    let lLayoutGuide = UILayoutGuide()
    let bLayoutGuide = UILayoutGuide()
    var bottomConstraints = [NSLayoutConstraint]()
    var leftConstraints = [NSLayoutConstraint]()

    var bLayoutHeightConstraint: NSLayoutConstraint!
    var lLayoutWidthConstraint: NSLayoutConstraint!

    override func viewDidLoad() {

        super.viewDidLoad()

        print(UIScreen.main.bounds)

        //        self.view.layer.masksToBounds = true

        let views = [
            UIButton(type: .infoDark),
            UIButton(type: .contactAdd),
            UIButton(type: .detailDisclosure)
        ]
        views.forEach(self.stackView.addArrangedSubview)

        self.backgroundView.backgroundColor = UIColor.red
        self.backgroundView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(self.backgroundView)

        self.topView.backgroundColor = UIColor.green
        self.topView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(self.topView)

        self.stackView.axis = isPortrait() ? .horizontal : .vertical
        self.stackView.distribution = .fillEqually
        self.stackView.translatesAutoresizingMaskIntoConstraints = false
        self.backgroundView.addSubview(self.stackView)

        self.topView.topAnchor.constraint(equalTo: self.topLayoutGuide.bottomAnchor).isActive = true
        self.topView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        self.topView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
        self.topView.heightAnchor.constraint(equalToConstant: 46).isActive = true

        self.view.addLayoutGuide(self.lLayoutGuide)
        self.view.addLayoutGuide(self.bLayoutGuide)

        self.bLayoutGuide.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
        self.bLayoutGuide.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        self.bLayoutGuide.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
        self.bLayoutHeightConstraint = self.bLayoutGuide.heightAnchor.constraint(equalToConstant: isPortrait() ? sizeConstant : 0)
        self.bLayoutHeightConstraint.isActive = true

        self.lLayoutGuide.topAnchor.constraint(equalTo: self.topView.bottomAnchor).isActive = true
        self.lLayoutGuide.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
        self.lLayoutGuide.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        self.lLayoutWidthConstraint = self.lLayoutGuide.widthAnchor.constraint(equalToConstant: isPortrait() ? 0 : sizeConstant)
        self.lLayoutWidthConstraint.isActive = true

        self.stackView.topAnchor.constraint(equalTo: self.backgroundView.topAnchor).isActive = true
        self.stackView.bottomAnchor.constraint(equalTo: self.backgroundView.bottomAnchor).isActive = true
        self.stackView.leadingAnchor.constraint(equalTo: self.backgroundView.leadingAnchor).isActive = true
        self.stackView.trailingAnchor.constraint(equalTo: self.backgroundView.trailingAnchor).isActive = true

        self.bottomConstraints = [
            self.backgroundView.topAnchor.constraint(equalTo: self.bLayoutGuide.topAnchor),
            self.backgroundView.leadingAnchor.constraint(equalTo: self.bLayoutGuide.leadingAnchor),
            self.backgroundView.trailingAnchor.constraint(equalTo: self.bLayoutGuide.trailingAnchor),
            self.backgroundView.heightAnchor.constraint(equalToConstant: sizeConstant)
        ]

        self.leftConstraints = [
            self.backgroundView.topAnchor.constraint(equalTo: self.lLayoutGuide.topAnchor),
            self.backgroundView.bottomAnchor.constraint(equalTo: self.lLayoutGuide.bottomAnchor),
            self.backgroundView.trailingAnchor.constraint(equalTo: self.lLayoutGuide.trailingAnchor),
            self.backgroundView.widthAnchor.constraint(equalToConstant: sizeConstant)
        ]

        if isPortrait() {

            NSLayoutConstraint.activate(self.bottomConstraints)

        } else {

            NSLayoutConstraint.activate(self.leftConstraints)
        }
    }

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {

        let willBePortrait = size.width < size.height

        coordinator.animate(alongsideTransition: {

            context in

            let halfDuration = context.transitionDuration / 2.0

            UIView.animate(withDuration: halfDuration, delay: 0, options: .overrideInheritedDuration, animations: {

                self.bLayoutHeightConstraint.constant = 0
                self.lLayoutWidthConstraint.constant = 0
                self.view.layoutIfNeeded()

            }, completion: {

                _ in

                // HERE IS THE ISSUE!

                // Putting this inside `performWithoutAnimation` did not helped
                if willBePortrait {

                    self.stackView.axis = .horizontal
                    NSLayoutConstraint.deactivate(self.leftConstraints)
                    NSLayoutConstraint.activate(self.bottomConstraints)

                } else {

                    self.stackView.axis = .vertical
                    NSLayoutConstraint.deactivate(self.bottomConstraints)
                    NSLayoutConstraint.activate(self.leftConstraints)
                }
                self.view.layoutIfNeeded()

                UIView.animate(withDuration: halfDuration) {

                    if willBePortrait {

                        self.bLayoutHeightConstraint.constant = sizeConstant

                    } else {

                        self.lLayoutWidthConstraint.constant = sizeConstant
                    }
                    self.view.layoutIfNeeded()
                }
            })
        })

        super.viewWillTransition(to: size, with: coordinator)
    }

    func isPortrait() -> Bool {

        let size = UIScreen.main.bounds.size
        return size.width < size.height
    }
}

以下是我无法解决的问题的一些屏幕截图。仔细观察角落:

我假设在重新激活不同的约束数组并强制重新计算之后， View 会立即捕捉到布局指南，但如图所示，它不会。此外，我不明白为什么红色 View 与堆栈 View 不同步，即使堆栈 View 应该始终遵循它的 super View ，这里是红色 View 。

PS:最好的测试方法是iPhone X Plus模拟器。

Answer 1

使用尺寸分类

平滑设置工具栏动画的一种完全不同的方法是利用 autoLayout 大小类，特别是 hR(高度 Regular)和 hC (height Compact)，并为每个创建不同的约束。

↻ replay animation

• 进一步的改进是实际使用两个不同 工具栏，一个用于垂直显示，一个用于水平显示。这绝不是一项要求，但它解决了工具栏本身的大小调整问题^(†)。

• 最后的改进是在 Interface Builder 中实现这些更改，正好产生 0 行代码，这当然也不是强制性的。

↻ replay animation

---

零行代码

所提出的解决方案都没有修改UIViewControllerTransitionCoordinator，它不仅大大简化了源代码开发和维护，而且不需要依赖硬编码值或支持实用程序。您还可以在 Interface Builder 中进行预览。一旦在 IB 中完成，如果绝对需要，您仍然可以将逻辑转换为运行时编程。

• 请注意，UIStackView 嵌入到工具栏中，因此跟随动画。您可以通过常数控制工具栏在视线之外的摆动量；我选择了 1024，以便它们快速移出屏幕，并且仅在转换结束时重新出现。

  

• (†) 进一步利用 Interface Builder 和大小类，您仍然可以使用单个工具栏，但如果这样做，它会在过渡期间调整大小。同样，UIStackView 是嵌入式的，它的方向也取决于大小类，并且操作系统无需创建协调器即可处理所有动画:

  

  

---

► 在 GitHub 上找到此解决方案以及有关 Swift Recipes 的更多详细信息.