How to add blur effect on status bar in iOS 11 correctly without warnings?

Question

I used to add blur effect on status bar with following code:

// Add blur effect on status bar

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.extraLight)

let blurEffectView = UIVisualEffectView(effect: blurEffect)

blurEffectView.translatesAutoresizingMaskIntoConstraints = false

view.addSubview(blurEffectView)

blurEffectView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true

blurEffectView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

blurEffectView.topAnchor.constraint(equalTo: self.topLayoutGuide.topAnchor).isActive = true

blurEffectView.bottomAnchor.constraint(equalTo: self.topLayoutGuide.bottomAnchor).isActive = true

It works since Xcode 6 or 7, even for Xcode 9. However, the last two lines start to give warning since Xcode 9:

'topLayoutGuide' was deprecated in iOS 11.0: Use view.safeAreaLayoutGuide.topAnchor instead of topLayoutGuide.bottomAnchor

By following the warning, if I change

topLayoutGuide

to the suggested value, the result is not right (all screen is blank).

How to add blur effect on status bar in iOS 11 correctly without warnings?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Since OP doesn't like using inset heights, just do this:

blurEffectView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
blurEffectView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
blurEffectView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
blurEffectView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

How to add blur effect on status bar in iOS 11 correctly without warnings?

Sign up