iosswiftuiviewautolayoutuiviewanimationtransition

Autolayout error on height anchor when animation constraints


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.

example of requirement

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


Solution

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