Make a transparent navigation bar on push and restore it on pop

user_3636256 0
Viewed 3169

I'm trying to create an effect that even though it's close to what I desire but it has some UI glitches which I'll explain.

I have, let's say, my Home navigation controller which I tap a cell that pushes a new view controller.

On that view controller's viewWillAppear(:) I've implemented the following:

self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.navigationBar.backgroundColor = .clear
self.navigationController?.navigationBar.tintColor = .white
self.navigationController?.navigationBar.barTintColor = .clear
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)

By doing this, the pushed view controller will have its navigationBar transparent, and still keeps the buttons visible (which is what I desire), but on the push animation, it shows a black bar on the parent controller, because it hides the parent's navigationBaras well.

And then on the pushed view controllers viewWillDisappear(_:) I've implemented the following:

self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
self.navigationController?.navigationBar.isTranslucent = false
self.navigationController?.navigationBar.backgroundColor = .white
self.navigationController?.navigationBar.barTintColor = .white

By doing this, I'm trying to reset the parent's navigationBar default properties, but by doing so I see a black bar during the animation, before it completes the animation, which causes a bad UI/UX.

Am I doing something wrong here, or there is any better approach on this?

Thank you.

uinavigationbar swift ios
2 Answers

So after some digging and some pretty useful hints from @Paulo I have managed to solve this as I wanted to.

This is something that should be way more simple to achieve, and Apple should give developers that simplicity option and not tweaking around some hack to achieve it, but anyway.

I found that one of the secret was that I was abusing the navigationBar.isTranslucent = true / false when navigating through the view controllers.

In order to do this I set the default navigationBar properties in the parentViewController, the one that will push to the view controller with the transparent navigationBar; I've done it as the following:

self.navigationController?.navigationBar.backgroundColor = .white
self.navigationController?.navigationBar.barTintColor = .white
self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)

On the pushedViewController viewWillAppear(_:) you need to implement the following:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    guard self.navigationController?.topViewController === self else { return }
    self.transitionCoordinator?.animate(alongsideTransition: { [weak self](context) in
        self?.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self?.navigationController?.navigationBar.shadowImage = UIImage()
        self?.navigationController?.navigationBar.backgroundColor = .clear
        self?.navigationController?.navigationBar.barTintColor = .clear
    }, completion: nil)
}

Here I set the desired navigationBar transparency, but as you notice, no need to use the isTranslucent property, I noticed by forcing it the UI would show some flickering and weird layout on the push animation.

Then on the same view controller (pushed) you need to implement the default, desired, navigationBar properties that you've implemented in the parentViewController:

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    self.transitionCoordinator?.animate(alongsideTransition: { [weak self](context) in
        self?.navigationController?.navigationBar.setBackgroundImage(nil, for: UIBarMetrics.default)
        self?.navigationController?.navigationBar.shadowImage = nil
        self?.navigationController?.navigationBar.backgroundColor = .white
        self?.navigationController?.navigationBar.barTintColor = .white
        }, completion: nil)
}

And by doing this everything should work as expected.

Hope it helps someone in the future.

user_36362560

After DAYS of figuring this out I think I've come up with the best (but far from perfect) solution for this. This way you can customize navigation bar when transition takes place and also handle interrupted transitions, like when user cancels popping back.

    func yourCustomizationMethod(bar: UINavigationBar) {
            // Modify the navigation bar
        }
            
    override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
    guard navigationController?.topViewController == self else {
        return
    }
    // The coordinator is nil in some cases
    if let coordinator = transitionCoordinator,
        coordinator.animate(alongsideTransition: { context in
            guard let bar = self.navigationController?.navigationBar else {
                return
            }
            self.yourCustomizationMethod(bar: bar)
        }, completion: nil) {
        return
    } else if let bar = navigationController?.navigationBar {
        yourCustomizationMethod(bar: bar)
    }
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    // Customize only if user transition gets canceled to avoid multiple customizations.
    guard transitionCoordinator?.isCancelled == true,
        let bar = navigationController?.navigationBar else {
        return
    }
    yourCustomizationMethod(bar: bar)
}
user_72355850
Related