Translucent NavigationBar behaves strange when calling

Question

I have a UINavigationController in which I define the navigationBar for all UIViewControllers as follows:

navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.isTranslucent = true

I do this because there are some views,

for example: the profile view of a user, which needs to be transparant in order to show a backgroundImage behind the username and profile picture.

This of course means the height of the navigationBar becomes zero, so I need to set all my views accordingly and do this by pinning my topAnchors to view.safeAreaLayoutGuide.topAnchor.

I continue by calculating the height of the navigationBar. My code to get the height is:

navBarHeight = UIApplication.shared.statusBarFrame.height + (self.navigationController?.navigationBar.frame.height)!

This works like a charm. I can then create a custom UIView with the height set to the navBarHeight, adding the color I want on my regular views and it works just fine.

However, it doesn't work when something comes up in the status bar.

For example: when I am calling, or when my personal homespot has active connection, when I am recording (voice or screen), a red, green or blue overlay is visible in the statusBar and the height increases. If I then open my app, the height is not right and the height of the navigationBar view is too high, making my main content partly invisible on top.

How can I take this into account?

If it was navegationBar `isTranslucent = true` the y equal zero will be from the beginning of the View, But `isTranslucent = false` the y equal zero started from below navegationbar — a.masri, Dec 28 '18 at 20:38
Translucency is set to true for all ViewControllers. So the y-value always starts from the beginning of the view, but this doesn't really help me as I need to change the navBarHeight variable in my OP I guess? — PennyWise, Dec 28 '18 at 20:44

score 1 · Answer 1 · edited Dec 29 '18 at 11:48

I have now fixed this by adding a custom view that has the backgroundColor I want for my navigationBar. I then set constraints for the top to view.topAnchor and for the bottom to view.safeAreaLayoutGuide.topAnchor. This is the span between the very top of the screen and the top of the safeAreaLayoutGuide, which runs just underneath the navigationBar.

I am not entirely sure if this is the best possible solution, so please let me know if there is a better way and/or what issues I might face with this approach.

Translucent NavigationBar behaves strange when calling

1 Answers1