Navigationbar transition animation - ios

Question

I have two view controllers and i am using push segue to show them. My storyboard looks like this:
But i want to use standalone navigation bar on second view controller. To do this i wrote following code:
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
self.navigationController?.setNavigationBarHidden(true, animated: true)
self.navigationController?.interactivePopGestureRecognizer?.delegate = nil
placeNavigationBar()
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
self.navigationController?.setNavigationBarHidden(false, animated: true)
}
var normalButton: UIButton!
var counter = 0
let item = UINavigationItem()
let navigationBar = UINavigationBar()
private func placeNavigationBar() {
let backButtonImage = UIImage(named: "backButton")
normalButton = UIButton(frame: CGRect(x: 0, y: 0, width: backButtonImage!.size.width, height: backButtonImage!.size.height))
normalButton.setImage(backButtonImage, for: .normal)
normalButton.setTitleColor(.systemBlue, for: .normal)
normalButton.contentHorizontalAlignment = .leading
normalButton.contentVerticalAlignment = .center
normalButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 3.0, bottom: 0.0, right: -3.0)
normalButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 0)
let backBarButton = UIBarButtonItem(customView: normalButton)
backBarButton.tintColor = .systemBlue
let leftLabel = UILabel()
leftLabel.text = "anony-12345678645"
leftLabel.textColor = .black
let profilePicture = UIImageView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
profilePicture.translatesAutoresizingMaskIntoConstraints = false
profilePicture.image = #imageLiteral(resourceName: "test2")
profilePicture.contentMode = .scaleAspectFill
profilePicture.clipsToBounds = true
profilePicture.widthAnchor.constraint(equalToConstant: 30).isActive = true
profilePicture.heightAnchor.constraint(equalToConstant: 30).isActive = true
profilePicture.layer.cornerRadius = 15
item.leftBarButtonItems = [backBarButton, UIBarButtonItem(customView: profilePicture) ,UIBarButtonItem(customView: leftLabel)]
navigationBar.isTranslucent = false
navigationBar.barTintColor = .white
self.view.addSubview(navigationBar)
navigationBar.translatesAutoresizingMaskIntoConstraints = false
navigationBar.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
navigationBar.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
navigationBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
navigationBar.items = [item]
navigationBar.delegate = self
}
It is working well but i am not happy with the navigation bar transition animation. This video shows how it looks now:
https://www.youtube.com/watch?v=1wakUhA940c
What i want:
https://youtu.be/h3-HzKQsxWc
Check the navigation bar transitions on both videos, in second video the navigation bar comes to top of the first view controller's navigation bar. But in the first video the second navigation bar just pushes the first navigation bar to off screen.
How can i achive the same tranisiton in second video?

Answer 1

I did something similar where the initial controller had a custom navigation bar look-alike, and what I did was to call navigationController.setNavigationBarHidden(_, animated: true) on each controller on their viewWillAppear methods, with true on the main controller and false on the rest.
You could do the same, and add a separate UINavigationBar to your view. If you set its constraints properly (basically pin it to the safeArea.top of your controller), it will expand to the safe area.
You will have to populate the navigation bar by accessing it directly instead of your controller's navigationItem, but it's not a big deal and you'll get the transition you want.
If you want this to happen between all the controllers in the stack, just hide the navigation bar on the navigation controller and set a navigation bar on each view yourself.

Answer 2

What you don't prefer is actually the default behavior, animation of iOS. Now, one way to do what you do prefer is making your own navigation bar.
You may hide or show (toggle) the visibility of your navigation bar in your viewWillAppear method by using the following:
/// Shows the navigation bar.
public func showNavBar(animated: Bool) {
self.navigationController?.setNavigationBarHidden(false, animated: animated)
}
/// Hides the navigation bar.
public func hideNavBar(animated: Bool) {
self.navigationController?.setNavigationBarHidden(true, animated: animated)
}
And then start doing the layout of your navigationBar in Storyboard.
Lastly, making use of Simulated Metrics, like selecting NONE to Top Bar will help you visualize what you're doing.