How to make root navigation bar transparent, but child navigation bars not?

Question

I have been looking around on Stack for some guidance on this, but none of the questions have been asked in this depth nor are the answers updated to the latest swift version, or even work on the newest swift version.

Here's what I have:

A navigation controller with two bar items:
- A left button that segues to a view
- A right button that segues to a view

My goal: To make the navigation root view controller's navigation bar transparent (But have buttons and title still visible), but not the child navigation - without weird nuances, like having the previous color flash, or a cut off nav bar (see gif)

Things I've tried:

On the viewWillAppear(_ animated: Bool) function, make it transparent, then upon viewWillDisappear() function, undo it.

Here is my code:


     override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            print("Will appear")
            self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
            self.navigationController?.navigationBar.shadowImage = UIImage()
            self.navigationController?.navigationBar.isTranslucent = true
        }

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

            self.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
            self.navigationController?.navigationBar.shadowImage = nil
            self.navigationController?.navigationBar.isTranslucent = true
        }

This doesn't work.: What this does is it makes the root view controller's nav bar transparent, but then when I segue to another view controller from a bar item, it flashes the original color and then goes back to clear upon loading of the other view.

I also tried one of the suggestions below (from Md):


    override func viewWillAppear(_ animated: Bool) {
            self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
            self.navigationController?.navigationBar.shadowImage = UIImage()
            self.navigationController?.navigationBar.isTranslucent = true
            self.navigationController!.navigationBar.backgroundColor = UIColor.clear
        }


        override func viewDidDisappear(_ animated: Bool) {
            self.navigationController!.navigationBar.setBackgroundImage(nil, for: UIBarMetrics.default)
            self.navigationController?.navigationBar.shadowImage = nil
            self.navigationController?.navigationBar.isTranslucent = true
            self.navigationController!.navigationBar.backgroundColor = UIColor.red

        }

Here is the output: https://giphy.com/gifs/Bcu1Q6qUSV4jPhWo4P

What are some solutions to this? Or ideas to get around this?

Will update question with more info if needed.

Thanks all!

Have you tried alpha 0.5 on the root level view and 2.0 on child level views? — Kamil.S

Md Rashed Pervez Md Rashed Pervez · Accepted Answer · 2018-04-11T15:41:31

This code will make the root navigation bar transparent, but child navigation bars not-

 override func viewDidLoad() {
            super.viewDidLoad()

        }

     override func viewWillAppear(_ animated: Bool) {
 self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
                self.navigationController?.navigationBar.shadowImage = UIImage()
                self.navigationController?.navigationBar.isTranslucent = true
                self.navigationController!.navigationBar.backgroundColor = UIColor.clear
            }


            override func viewDidDisappear(_ animated: Bool) {
                self.navigationController!.navigationBar.setBackgroundImage(nil, for: UIBarMetrics.default)
                self.navigationController?.navigationBar.shadowImage = nil
                self.navigationController?.navigationBar.isTranslucent = true
                self.navigationController!.navigationBar.backgroundColor = UIColor.red

            }

Output - RootNavigation Bar -

Child Navigation Bar -

How to make root navigation bar transparent, but child navigation bars not?

1 Answers