Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating a blurring overlay view

In the Music app of the new iOS, we can see an album cover behind a view that blurs it.

How can something like that be accomplished? I've read the documentation, but did not find anything there.

like image 486
kondratyevdev Avatar asked Jun 11 '13 10:06

kondratyevdev


People also ask

How do I add a blur overlay in Canva?

Simply select the photo, then click “filter” and “advanced options.” Slide to the right to blur, and to the left to sharpen.

What is the filter that blurs the background?

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.


1 Answers

You can use UIVisualEffectView to achieve this effect. This is a native API that has been fine-tuned for performance and great battery life, plus it's easy to implement.

Swift:

//only apply the blur if the user hasn't disabled transparency effects if !UIAccessibility.isReduceTransparencyEnabled {     view.backgroundColor = .clear      let blurEffect = UIBlurEffect(style: .dark)     let blurEffectView = UIVisualEffectView(effect: blurEffect)     //always fill the view     blurEffectView.frame = self.view.bounds     blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]      view.addSubview(blurEffectView) //if you have more UIViews, use an insertSubview API to place it where needed } else {     view.backgroundColor = .black } 

Objective-C:

//only apply the blur if the user hasn't disabled transparency effects if (!UIAccessibilityIsReduceTransparencyEnabled()) {     self.view.backgroundColor = [UIColor clearColor];      UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];     UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];     //always fill the view     blurEffectView.frame = self.view.bounds;     blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;      [self.view addSubview:blurEffectView]; //if you have more UIViews, use an insertSubview API to place it where needed } else {     self.view.backgroundColor = [UIColor blackColor]; } 

If you are presenting this view controller modally to blur the underlying content, you'll need to set the modal presentation style to Over Current Context and set the background color to clear to ensure the underlying view controller will remain visible once this is presented overtop.

like image 93
Jordan H Avatar answered Oct 26 '22 20:10

Jordan H