iOS 7 dynamic blur effect like in Control Center

Nastya Gorban picture Nastya Gorban · Jul 17, 2013 · Viewed 34.7k times · Source

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.

Answer

Nastya Gorban picture Nastya Gorban · Sep 12, 2013

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