SwiftUI custom UINavigationBar color and transparency

24 Views Asked by At

I am using UIToolbar and UINavigationBar, but for this example I will use navBarAppearance.backgroundColor = UIColor.black.withAlphaComponent(0.4) for custom transparency and color. Not sure where the issue lies but the UINavigationBar doesn't remain true black while there is no list content behind it. As you can see in the image bellow it is slightly gray, and I believe its just the nature of using the withAlphaComponent(0.4), as I raise the number it gets darker but it also lowers the intensity of the transparency.

Here is an image of UINavigationBar without any content behind it: enter image description here

Here is an image of a sample when list rows are behind. I like how transparent it is here. enter image description here

Looking at for example native app on iPhone like messages, they perfectly use what I am trying to achieve. Their UIToolbar remains true black until messages are passed behind it. Same can be seen in an app like Signal and Facebook messanger.

For example (messages app) here it's true black when empty: enter image description here

And finally when messages are behind: enter image description here

Here is my code for simplicity of the case:

 init() {
        // Customize UINavigationBar
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.shadowColor = .clear
        navBarAppearance.backgroundColor = UIColor.black.withAlphaComponent(0.4)

        UINavigationBar.appearance().standardAppearance = navBarAppearance
        //UINavigationBar.appearance().compactAppearance = navBarAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
    }

How would I achieve the same effect such as in the message apps? I am aware I could completely remove the ini()... and just use the system default scheme, but then I cannot control the intensity, colors etc.

0

There are 0 best solutions below