iOS 7 style Blur view

Question

Does anybody know of any controls that will replicate the iOS7 style blur views.

I'm assumming there can be some kind of UIView subclass that will replicate the behavior.

I'm talking about these type views which blur the background extremely thickly so that they have pull effects from the background view.

Answer 1

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):

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.

Answer 2

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];