iOS How to create a UIView that blur contents under itself

Question

I have a UIView that partially cover some contents and I would like apply a blur effect exactly like the iOS Notification Center.

I'm not looking for a way to apply blur on UIImage, but on UIView with other contents (UIView, UIButton, ecc) under it.

enter image description here

Ideas ? Thanks.

This class should provide what you are looking for: https://github.com/JagCesar/iOS-blur — Juan Boero, Mar 18 '14 at 23:09

score -1 · Answer 1 · edited May 23 '17 at 11:43

-1

First change the UIView into an UIImage. You can use the following as a category of UIView.

@implementation UIView (ConvertToUIImage)

- (UIImage *)asImage {
    NSAssert(self, @"Do not use this method on nil instance of UIView.");
    if (!self) return 0;

    UIGraphicsBeginImageContextWithOptions(self.frame.size, YES, 0);
    [self drawViewHierarchyInRect:self.frame afterScreenUpdates:NO];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    NSAssert(image, @"Image must not be nil at this point.");
    return image;
}

@end

Next you need to blur the UIImage, there is a related question here Creating a blur effect in iOS7

Finally, use the UIImage as a background.

edited May 23 '17 at 11:43

Community

1
1

answered Mar 18 '14 at 23:20

Pétur Ingi Egilsson

4,368
5
44
72

I have a `UIView` and I need `UIView`, as I wrote in the question I'm not looking for a way to apply blur to `UIImage` – Fry Mar 19 '14 at 08:34
Look at the screenshot you posted. The home screen can be thought of as viewA and the notification-center as viewB. The idea is to create a UIImage representation of viewA, before showing viewB. Then blur the UIImage, and finally add it as background of viewB. Now if you present viewB it will appear to be transparent on top of viewA, where viewA is blurred - just like in the posted screenshot. The details are laid out in the book Programming iOS 7 by Matt Neuburg, among other similiar tricks. Did I misunderstand your requirements? – Pétur Ingi Egilsson Mar 20 '14 at 11:11

score -3 · Accepted Answer · answered Mar 18 '14 at 21:28

-3

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

just past from an other answer how ever i use toolbar in my projects and works perfect, i am using alpha=0.98 enter image description here

answered Mar 18 '14 at 21:28

m-farhan

1,436
13
14

2

That will not provide blurred effect. – Pétur Ingi Egilsson Mar 18 '14 at 23:22

iOS How to create a UIView that blur contents under itself

2 Answers2