Why is layoutIfNeeded() not animating navigationBar's BarButtonItem?

Question

I am trying to make a simple e-commerce app with a dynamic barButton to show users their total cart cost. I wanted to add an animation to it. So that the button needs to collapse and expand whenever its value changes. I used layoutIfNeeded() method after updating button's constraints. However the animation is not working. The code is a bit complex so I am sharing a code sample and a video to give you a rough idea what I have done so far. What could be changed to get desired animation?

Gif

Code

class ProductsViewController: UIViewController {

  ...
  var cartBarButton: UIBarButtonItem!
  var cartBarButtonWidthConstraint: NSLayoutConstraint?
  var price: Double = 0
  ...

  override func viewDidLoad() {
    super.viewDidLoad()

    configureCartButton()
    ...
  }

  func configureCartButton() {

    let cartButton = CustomCartButton(color: color, image: image, title: price.currencyString)

    cartButton.addTarget(self, action: #selector(updateCartCost), for: .touchUpInside)
        
    cartBarButton = UIBarButtonItem(customView: cartButton)
    cartBarButton.customView?.translatesAutoresizingMaskIntoConstraints = false
        
    cartBarButtonWidthConstraint = cartBarButton.expand(considering: price) // expand() method is extension to UIBarButtonItem, returns barButton's widthAnchor constraint
    cartBarButtonWidthConstraint?.isActive = true
        
    navigationItem.rightBarButtonItem = cartBarButton

  }

  @objc private func updateCartCost() {
    
    cartBarButtonWidthConstraint?.isActive = false
    cartBarButtonWidthConstraint = cartBarButton.collapse(to: 25) // collapse() method is an extension to UIBarButtonItem
    cartBarButtonWidthConstraint?.isActive = true
    UIView.animate(withDuration: 1) {
      self.view.layoutIfNeeded()
    }

    price += 90
    cartBarButtonWidthConstraint?.isActive = false
    cartBarButtonWidthConstraint = cartBarButton.expand(considering: price)
    cartBarButtonWidthConstraint?.isActive = true
    UIView.animate(withDuration: 1) {
      self.view.layoutIfNeeded()
    }
    self.cartButton.title = self.price.currencyString
  }

}

Answer 1

You are changing the constraint to collapse and the constraint to expand at the same time and doing both animations at the same time.

You should move all of the code to do the expansion in the completion handler of the collapse animation. This should allow the two changes to happen one after the other instead being all done at once.

Something like this (not verified it will compile but it gives you the idea):

@objc private func updateCartCost() {
    cartBarButtonWidthConstraint?.isActive = false
    cartBarButtonWidthConstraint = cartBarButton.collapse(to: 25) // collapse() method is an extension to UIBarButtonItem
    cartBarButtonWidthConstraint?.isActive = true
    UIView.animate(withDuration: 1, animations: {
      self.view.layoutIfNeeded()
    }) { finished in
        price += 90
        cartBarButtonWidthConstraint?.isActive = false
        cartBarButtonWidthConstraint = cartBarButton.expand(considering: price)
        cartBarButtonWidthConstraint?.isActive = true
        UIView.animate(withDuration: 1) {
             self.view.layoutIfNeeded()
        }
    }

    self.cartButton.title = self.price.currencyString
}