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.

Leave a Comment