Phyber - 11 months ago 81
Swift Question

# Navigation bar color is not under status bar

I am trying to make transparent navigation bar, but when I set it to transparent It looks like this... :
transparent

I want it to look like this
non-transparent

but transparent and blurred like in the App Store but with background color. The problem is that the background color of the navigationcontroller is not under status bar like normal
My code is here:

self.navigationBar.backgroundColor = UIColor.init(red: 255/255, green: 0, blue: 0, alpha: 0.7)

EDIT: I have custom class for UINavigationController and the view controller is embedded in a UINavigationController

Swift 3, Xcode 8.0 beta 5.

Let's break this problem into parts. First, you will need to use a UIVisualEffectView created with a UIBlurEffect to get the blurred/transparent effect that you want. Then you will need to figure out how to display that in the navigation bar so that it fills the whole nav bar and that status bar.

Part 1

I created a subclass of UIVisualEffectView in order to add a gradient. We can use this view to create the desired blurred/transparent effect.

// You can tweak these colors and their alpha to get the desired gradient.
// You can also mess with the gradient's locations.
$0.colors = [ UIColor.white.withAlphaComponent(0.3).cgColor, UIColor(red: 1, green: 0, blue: 0, alpha: 0.7).cgColor ] return$0

override init(effect: UIVisualEffect?) {
super.init(effect: effect)
}

override func layoutSubviews() {
super.layoutSubviews()

// Make sure the gradient's frame always matches the blur effect.
}

}

Part 2

Now we need to use this view in the nav bar. I did this in a UIViewController that is embedded in a UINavigationController.

// Remove the nav bar's background
navBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
navBar.backgroundColor = .clear

// Create the blur/transparent view. You can mess with styles here to get
// different effects.