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

不要害怕这里的巨大代码.您可以将代码段复制并粘贴到新的单一视图应用程序中,以查看其行为.该问题位于与旋转动画一起执行的动画完成块内的某处.

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
    }
}

以下是我无法解决的问题的几个截图.仔细观察角落：

我会假设在重新激活不同的约束阵列和强制重新计算之后,视图将立即捕捉到布局指南,但如图所示.此外,我不明白为什么红色视图与堆栈视图不同步,即使stackview应该始终遵循它的superview,这是红色视图.

PS：测试它的最好方法是iPhone X Plus模拟器.

解决方法

使用大小类

一个完全不同的方法来平滑地动画化工具栏动画是利用autoLayout大小类,特别是hR(高度常规)和hC(高度紧凑),并为每个类别创建不同的约束.

↻ replay animation

>进一步的改进是实际使用两个不同的工具栏,一个用于垂直显示,一个用于水平显示.这并不意味着一个要求,但它解决了工具栏本身的大小(†).
>最后的改进是在Interface Builder中实现这些更改,只产生0行代码,这当然也不是强制的.

↻ replay animation

零行代码

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

>请注意,UIStackView嵌入在工具栏中,因此遵循动画.您可以通过常数来控制工具栏的摆动量;我选择1024,以便他们快速移出屏幕,只有在转换结束时才会重新出现.

>(†)进一步利用Interface Builder和大小类,您仍然可以使用单个工具栏,但如果这样做,它将在转换过程中调整大小.再次,UIStackView是嵌入式的,并且它的方向也是依赖于大小类,并且操作系统处理所有动画,而不需要创建协调器：

►在GitHub查找此解决方案,并在Swift Recipes上查看更多详细信息.