How to set a view's color to match a translucent navigation bar's color?

3
votes

I need to increase the height of the navigation bar. For this, I have added a view (of desired height) under the navigation bar. The navigation bar is set to be translucent. So the nav bar color is rendered slightly different than the actual hex value. Now I need to match the navigation bar's color to the view below. Following is the code that I am using.

func setupNavigationBar() {
    title = "Profile"

    self.navigationController?.navigationBar.setBackgroundImage(UIImage(named: ""), for: .default)
    self.navigationController?.navigationBar.shadowImage = UIImage(named: "")

    headerView.backgroundColor = navigationController?.navigationBar.barTintColor
    headerView.isOpaque = false  
}

I am getting different shades as below.

enter image description here

How can i make the view's color to be the same as navigation bar's color? I can get near to the desired color by reducing the view's alpha but I am doubtful about that approach since there is no standard defined regarding it.

P.S. The navigation bar has to stay translucent.

2
iosswiftuiviewuinavigationbaruicolor
make navigation bar clear color – Lu_
The best solution for such a use case where you want to have a navigation bar with customizable height is to create a custom navigation bar (using UIView ot something else) and implement the transitions yourself. This is because even if you manage to match the color with navigation bar with your view, there will be cases when iOS navigation bar will animate (fade in or cross fade) during transitions and your view won't which will result in bad user experience. – kerry
@kerry I will consider the point you have mentioned. Thanks. – Sujal

2 Answers

1
votes

You just need to set opacity of headerView to 0.85

headerView.backgroundColor = navigationController?.navigationBar.barTintColor
headerView.layer.opacity = 0.85
headerView.isOpaque = false

Output

You can download the sample code from here:

Please ignore other unused code in the sample code.

Explanation:

When you're set navigationController style as translucent then the system automatically take layer opacity 0.85 for UINavigationController

I personally check it by iterating all subview of UINavigationController.

0
votes

Set the background colour to clear for the navigation bar using :

self.navigationController?.navigationBar.backgroundColor = UIColor.clear

Hope this helps.