Autolayout error on height anchor when animation constraints - ios

Question

I have a requirement to render a UIView at the footer of my app, when the user takes some sort of action, that view scrolls to the top of the view and fixes in position.
Imagine almost a tab bar view animating into a navigation bar.
I have essentially mocked this out by have 2 anchors for my view, top and bottom.
I then toggle these anchors and use UIView.animate with layoutIfNeeded to move the position.
The contents of my component are then anchored to the safe area of the parent, meaning I avoid the top and bottom issues on the X series.
However when my view starts to animate I am getting an autolayout error in my terminal
(
"<NSLayoutConstraint:0x600002e38ff0 UILabel:0x7fe64bc04570'Foo Bar Boo Baz'.height == 44 (active)>",
"<NSLayoutConstraint:0x600002e38d70 UILabel:0x7fe64bc04570'Foo Bar Boo Baz'.top == UILayoutGuide:0x600003408d20'UIViewSafeAreaLayoutGuide'.top (active)>",
"<NSLayoutConstraint:0x600002e38e10 UILabel:0x7fe64bc04570'Foo Bar Boo Baz'.bottom == UILayoutGuide:0x600003408d20'UIViewSafeAreaLayoutGuide'.bottom (active)>",
"<NSLayoutConstraint:0x600002e39130 UIView:0x7fe64bc166b0.bottom == Home.AnimatedCustomNavigationView:0x7fe64bc02970.bottom (active)>",
"<NSLayoutConstraint:0x600002e390e0 V:|-(0)-[UIView:0x7fe64bc166b0] (active, names: '|':Home.AnimatedCustomNavigationView:0x7fe64bc02970 )>",
"<NSLayoutConstraint:0x600002e41810 'UIView-Encapsulated-Layout-Height' Home.AnimatedCustomNavigationView:0x7fe64bc02970.height == 896 (active)>",
"<NSLayoutConstraint:0x600002e38cd0 'UIViewSafeAreaLayoutGuide-bottom' V:[UILayoutGuide:0x600003408d20'UIViewSafeAreaLayoutGuide']-(34)-| (active, names: '|':UIView:0x7fe64bc166b0 )>",
"<NSLayoutConstraint:0x600002e38c30 'UIViewSafeAreaLayoutGuide-top' V:|-(0)-[UILayoutGuide:0x600003408d20'UIViewSafeAreaLayoutGuide'] (active, names: '|':UIView:0x7fe64bc166b0 )>"
)
Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x600002e38ff0 UILabel:0x7fe64bc04570'Foo Bar Boo Baz'.height == 44 (active)>
Which appears to caused by the height anchor.
I am not sure how I can achieve this effect and also fix this error.
import UIKit
class AnimatedCustomNavigationView: UIView {
private lazy var navBar = UIView(frame: .zero)
private var navBarTopAnchor: NSLayoutConstraint!
private var navBarBottomAnchor: NSLayoutConstraint!
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = theme.color(.background)
navBar.backgroundColor = .purple
let label = UILabel(frame: .zero)
label.text = "Foo Bar Boo Baz"
label.sizeToFit()
addSubview(navBar)
navBar.addSubview(label)
[navBar, label].forEach { $0.translatesAutoresizingMaskIntoConstraints = false }
NSLayoutConstraint.activate([
// MARK: - NavBar Container
navBar.leadingAnchor.constraint(equalTo: self.leadingAnchor),
navBar.trailingAnchor.constraint(equalTo: self.trailingAnchor),
// MARK: - Label
label.topAnchor.constraint(equalTo: navBar.safeAreaLayoutGuide.topAnchor),
label.leadingAnchor.constraint(equalTo: navBar.leadingAnchor, constant: 16),
label.bottomAnchor.constraint(equalTo: navBar.safeAreaLayoutGuide.bottomAnchor),
label.trailingAnchor.constraint(equalTo: navBar.trailingAnchor, constant: -16),
label.heightAnchor.constraint(equalToConstant: 44)
])
navBarTopAnchor = navBar.topAnchor.constraint(equalTo: topAnchor)
navBarTopAnchor.isActive = false
navBarBottomAnchor = navBar.bottomAnchor.constraint(equalTo: bottomAnchor)
navBarBottomAnchor.isActive = true
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
self.navBarTopAnchor.isActive = true
self.navBarBottomAnchor.isActive = false
UIView.animate(withDuration: 1.5, delay: 0, options: .curveEaseInOut, animations: {
self.layoutIfNeeded()
}, completion: nil)
}
}
required init?(coder aDecoder: NSCoder) {
return nil
}
}
To simulate a user action for now, I have wrapped my animation call in a DispatchQueue.main.asyncAfter

Answer 1

You need to correctly order the .isActive = false should be before .isActive = true
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
self.navBarBottomAnchor.isActive = false
self.navBarTopAnchor.isActive = true
UIView.animate(withDuration: 1.5, delay: 0, options: .curveEaseInOut, animations: {
self.layoutIfNeeded()
}, completion: nil)
}