How can I produce an effect similar to the iOS 7 blur view? How can I produce an effect similar to the iOS 7 blur view? ios ios

How can I produce an effect similar to the iOS 7 blur view?


Why bother replicating the effect? Just draw a UIToolbar behind your view.

myView.backgroundColor = [UIColor clearColor];UIToolbar* bgToolbar = [[UIToolbar alloc] initWithFrame:myView.frame];bgToolbar.barStyle = UIBarStyleDefault;[myView.superview insertSubview:bgToolbar belowSubview:myView];


Apple released code at WWDC as a category on UIImage that includes this functionality, if you have a developer account you can grab the UIImage category (and the rest of the sample code) by going to this link: https://developer.apple.com/wwdc/schedule/ and browsing for section 226 and clicking on details. I haven't played around with it yet but I think the effect will be a lot slower on iOS 6, there are some enhancements to iOS 7 that make grabbing the initial screen shot that is used as input to the blur a lot faster.

Direct link: https://developer.apple.com/downloads/download.action?path=wwdc_2013/wwdc_2013_sample_code/ios_uiimageeffects.zip


Actually I'd bet this would be rather simple to achieve. It probably wouldn't operate or look exactly like what Apple has going on but could be very close.

First of all, you'd need to determine the CGRect of the UIView that you will be presenting. Once you've determine that you would just need to grab an image of the part of the UI so that it can be blurred. Something like this...

- (UIImage*)getBlurredImage {    // You will want to calculate this in code based on the view you will be presenting.    CGSize size = CGSizeMake(200,200);    UIGraphicsBeginImageContext(size);    [view drawViewHierarchyInRect:(CGRect){CGPointZero, w, h} afterScreenUpdates:YES]; // view is the view you are grabbing the screen shot of. The view that is to be blurred.    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    // Gaussian Blur    image = [image applyLightEffect];    // Box Blur    // image = [image boxblurImageWithBlur:0.2f];    return image;}

Gaussian Blur - Recommended

Using the UIImage+ImageEffects Category Apple's provided here, you'll get a gaussian blur that looks very much like the blur in iOS 7.

Box Blur

You could also use a box blur using the following boxBlurImageWithBlur: UIImage category. This is based on an algorythem that you can find here.

@implementation UIImage (Blur)-(UIImage *)boxblurImageWithBlur:(CGFloat)blur {    if (blur < 0.f || blur > 1.f) {        blur = 0.5f;    }    int boxSize = (int)(blur * 50);    boxSize = boxSize - (boxSize % 2) + 1;    CGImageRef img = self.CGImage;    vImage_Buffer inBuffer, outBuffer;    vImage_Error error;    void *pixelBuffer;    CGDataProviderRef inProvider = CGImageGetDataProvider(img);    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);    inBuffer.width = CGImageGetWidth(img);    inBuffer.height = CGImageGetHeight(img);    inBuffer.rowBytes = CGImageGetBytesPerRow(img);    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);    pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));    if(pixelBuffer == NULL)        NSLog(@"No pixelbuffer");    outBuffer.data = pixelBuffer;    outBuffer.width = CGImageGetWidth(img);    outBuffer.height = CGImageGetHeight(img);    outBuffer.rowBytes = CGImageGetBytesPerRow(img);    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);    if (error) {        NSLog(@"JFDepthView: error from convolution %ld", error);    }    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();    CGContextRef ctx = CGBitmapContextCreate(outBuffer.data,                                         outBuffer.width,                                         outBuffer.height,                                         8,                                         outBuffer.rowBytes,                                         colorSpace,                                         kCGImageAlphaNoneSkipLast);    CGImageRef imageRef = CGBitmapContextCreateImage (ctx);    UIImage *returnImage = [UIImage imageWithCGImage:imageRef];    //clean up    CGContextRelease(ctx);    CGColorSpaceRelease(colorSpace);    free(pixelBuffer);    CFRelease(inBitmapData);    CGImageRelease(imageRef);    return returnImage;}@end

Now that you are calculating the screen area to blur, passing it into the blur category and receiving a UIImage back that has been blurred, now all that is left is to set that blurred image as the background of the view you will be presenting. Like I said, this will not be a perfect match for what Apple is doing, but it should still look pretty cool.

Hope it helps.