iOS 7 dynamic blur effect like in Control Center

Question

I'm trying to make a controller that will be similar to Control Center in iOS7. From WWDC session #226 I've learnt how to get blurred image with different effects

UIGraphicsBeginImageContextWithOptions(image.size, NULL, 0);

[view drawViewHierarchyInRect:rect];

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

lightImage = [newImage applyLightEffect];

So, in other words, we just capture some image (make screenshot), perform blur effect and use this blurred image for our needs.

But if you open control center above some dynamic content you'll notice that control center's blurred background is changing as well as content does.

Does anybody know how to replicate this behavior?

The only way I see it is to capture content and make blur effect with some interval (e.g. half a second). But it looks redundantly.

Nastya Gorban · Accepted Answer · 2013-09-13T12:05:03.903

44

Here are ready solutions that I've found:

1. The most unexpected: Use UIToolBar

- (id) initWithFrame:(CGRect)frame
{
    if ((self = [super initWithFrame:frame]))
    {
        [self setup];
    }
    return self;
}

- (id) initWithCoder:(NSCoder *)coder
{
    if ((self = [super initWithCoder:coder]))
    {
        [self setup];
    }
    return self;
}

- (void) setup
{
    if (iOS7OrLater)
    {
        self.opaque = NO;
        self.backgroundColor = [UIColor clearColor];

        UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:self.bounds];
        toolbar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        toolbar.barTintColor = self.tintColor;
        [self insertSubview:toolbar atIndex:0];
    }
}

UIToolbar can be used for this needs, bacuse it has his only build-in blur mechanism, and this mechanism is dynamic, what is good. But the bad thing is that in some reason it ignores colors and makes background looks irredeemably...

Toolbar effect

Update:

To avoid color breaking, do not use barTintColor. You also may change style of toolbar if you want dark styled blur (use UIBarStyleBlack).

2. FXBlurView.

Unlike toolbar it more positive, but it's dynamic mechanism is rare yet and in fact it can be used only for static background. (dynamic = NO).

FBBlurView effect

edited Sep 13 '13 at 12:05

answered Sep 12 '13 at 15:52

Nastya Gorban

1,251
1
14
20

3

When you set a tintColor, blur breaks. Just use a default toolbar or the one with dark barStyle. And please don't use an FXBlurView in dynamic mode because it will drain users' batteries faster than it can render blur. – Filip Radelic Sep 13 '13 at 05:40
Thanks, @FilipRadelic! As you said, I removed tintColor and set UIBarStyleBlack for toolbar. It's dynamic and now looks almost perfect :). I'll update my answer. – Nastya Gorban Sep 13 '13 at 11:58
Any ideas if this type of implementation will result in getting rejected by apple? Or on the contrary, will they celebrate the creative approach? – cohen72 Sep 24 '13 at 17:20
1

If you are not using private API's or violating UI guide lines, they won't reject – mskw Sep 26 '13 at 01:34
If you want more control and real-time animation, ypu can use this sublcass of UIView: http://stackoverflow.com/a/19506076/774394. – Ivo Leko Nov 15 '13 at 23:19
I managed to achieve some very cool effects using the toolbar approach. Thanks! – AXE Jan 16 '14 at 14:03
You can set semitransparent background color for your view and put toolbar on top, will at least let you saturate its blur. – pronebird Jun 07 '14 at 15:29
Instead of using the full bar you could just use the toolbar layer... add the toolbar layer as a sublayer of your view. – Hugues BR Aug 03 '15 at 13:36
ie: [self.blurView.layer addSublayer:self.toolBar.layer] (you need to retain the uitoolbar as a property to be sure to keep it around..) – Hugues BR Aug 03 '15 at 13:41
the idea of the blur effect is to have transparency to see what happens in the controller that is in the background. FXBlurView not working as expected because the controller completely paralyzed background – jose920405 Sep 10 '15 at 14:31

score 13 · Answer 2 · edited Feb 27 '15 at 10:15

13

In iOS8 we can implement blur effect on views using UIVisualEffect class.

edited Feb 27 '15 at 10:15

len

139
1
7

answered Jun 05 '14 at 12:46

petesalt

356
3
20

score 8 · Answer 3 · answered Jan 05 '15 at 11:30

You can use below code to apply blur effect on view.

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

visualEffectView.frame = MYview.bounds;
[MYview addSubview:visualEffectView];

score 2 · Answer 4 · answered Apr 06 '14 at 13:53

2

I've found LiveFrost to be a great, and easy to integrate project for live blurring.

https://github.com/radi/LiveFrost/

answered Apr 06 '14 at 13:53

rounak

9,217
3
42
59

Sahil Kapoor · Answer 5 · 2015-10-15T06:36:27.233

1

You can use UIVisualEffect from storyboard.

Drag the Visual Effect With Blur on the storyboard. The desired effect can be achieved by setting alpha of the BACKGROUND COLOR. The subviews should be added to View of Visual Effect View and they are not affected by the background blur.

The Vibrancy effect must be selected in View options above.

See image:

edited Oct 15 '15 at 06:36

answered Dec 12 '14 at 09:11

Sahil Kapoor

11,183
13
64
87

score 0 · Answer 6 · answered Apr 06 '14 at 13:29

0

Using navigation bar to provide blurring will not work on older devices running iOS 7. As they are running lighter version of iOS 7 with almost no t

answered Apr 06 '14 at 13:29

Atif Khan

125
1
7

iOS 7 dynamic blur effect like in Control Center

6 Answers6

Linked

Related