iOS 7 style Blur view iOS 7 style Blur view ios ios

iOS 7 style Blur view


You might be able to modify something like Bin Zhang's RWBlurPopover to do this. That component uses my GPUImage to apply a Gaussian blur to components underneath it, but you could just as easily use a CIGaussianBlur for the same. GPUImage might be a hair faster though.

That component relies on you being able to capture the view behind the one you're presenting, though, and may have trouble with views that animate behind this content. The need to take a trip through Core Graphics to rasterize the background view will slow things down, so we probably don't have sufficiently direct access to be able to do this in a performant manner for overlays on animating views.

As an update to the above, I recently reworked the blurs in GPUImage to support variable radii, allowing for the complete replication of the blur size in iOS 7's control center view. From that, I created the GPUImageiOS7BlurFilter class that encapsulates the proper blur size and color correction that Apple appears to be using here. This is how GPUImage's blur (on the right) compares to the built-in blur (on the left):

Apple's blur GPUImage's blur

I use a 4X downsampling / upsampling to reduce the number of pixels the Gaussian blur has to operate over, so an iPhone 4S can blur the entire screen in roughly 30 ms using this operation.

You still have the challenge of how to pull content into this blur from views behind this one in a performant manner.


I am using FXBlurView which works great on iOS5+

https://github.com/nicklockwood/FXBlurView

CocoaPods:

-> FXBlurView (1.3.1)   UIView subclass that replicates the iOS 7 realtime background blur effect, but works on iOS 5 and above.   pod 'FXBlurView', '~> 1.3.1'   - Homepage: http://github.com/nicklockwood/FXBlurView   - Source:   https://github.com/nicklockwood/FXBlurView.git   - Versions: 1.3.1, 1.3, 1.2, 1.1, 1.0 [master repo]

I added it by using:

FXBlurView *blurView = [[FXBlurView alloc] initWithFrame:CGRectMake(50, 50, 150, 150)];[self.blurView setDynamic:YES];[self.view addSubview:self.blurView];


WARNING: someone in the comments stated that Apple rejects apps using this technique. That did NOT happen to me, but just for your consideration.

This may surprise you, but you can use a UIToolbar, which already includes that standard effect (only iOS 7+). In you view controller's viewDidLoad:

self.view.opaque = NO;self.view.backgroundColor = [UIColor clearColor]; // Be sure in fact that EVERY background in your view's hierarchy is totally or at least partially transparent for a kind effect!UIToolbar *fakeToolbar = [[UIToolbar alloc] initWithFrame:self.view.bounds];fakeToolbar.autoresizingMask = self.view.autoresizingMask;// fakeToolbar.barTintColor = [UIColor white]; // Customize base color to a non-standard one if you wish[self.view insertSubview:fakeToolbar atIndex:0]; // Place it below everything