How to Create iOS7-Like Dynamic Blur Effect Using FXBlurView
Azoft Blog How to Create iOS7-Like Dynamic Blur Effect Using FXBlurView

How to Create iOS7-Like Dynamic Blur Effect Using FXBlurView

By Victor Kotov on March 13, 2014

How to Implement Blurred Views in iOS 7 Using FXBlurView

Recently we investigated how to create transparent Activities for Android and today we continue the topic of mobile app UI design – but this time with iOS.

Task overview

For one of our latest projects, we needed to code pop-up views to appear on top of the main view of an app, so the main view would be visible yet blurred in the background behind the pop-ups, like this:

Main view.
Image 1. Main view

Pop-up view.
Image 2. Pop-up view

Solution

The FXBlurView library is the method we used for creating a blurred main view. If you already use cocoapods in your project, integrating this lib will be a piece of cake – although it isn’t very difficult even if you don’t use cocoapods.

Note: This solution doesn’t use any standard navigation methods between view controllers.

The view-controller architectural hierarchy appears in the following way (our project doesn’t use storyboards): we are using a root UIViewController for the main view; and then when we need to display a pop-up window, a copy of its UIViewController is created and added as a child view to the main view UIViewController. We could also implement this feature via a basic class method (e.g., BlurVC) and create an extra blurred copy of the main view inside the method:

- (void)showOnVC:(BaseVC *)vc {
    _parentVC = vc;
    [_parentVC addChildViewController:self];
    
    _blurView = [[FXBlurView alloc] initWithFrame:self.view.bounds];
    _blurView.underlyingView = vc.view;
    _blurView.tintColor = [UIColor clearColor];
    _blurView.updateInterval = 1;
    _blurView.blurRadius = 30.f;
    _blurView.alpha = 0.f;
    _blurView.frame = vc.view.bounds;
    
    [_parentVC.view addSubview:_blurView];
    [_parentVC.view addSubview:self.view];
    
    self.view.backgroundColor = [UIColor clearColor];
    self.view.alpha = 0.f;
    self.view.frame = vc.view.bounds;
 
    [UIView animateWithDuration:kAnimationDuration animations:^{
        _blurView.alpha = 1.f;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:kAnimationDuration animations:^{
            self.view.alpha = 1.0f;
        }];
    }];
}

A use case for displaying a Settings view:

- (IBAction)onPopupButtonTap:(id)sender {
    PopupVC *vc = [PopupVC new];
    [vc showOnVC:self];
}

The PopupVC class is inherited from the BlurVC class.

To conceal the pop-up view, let’s use the following method of the BlurVC class:

- (void)dismiss {
    [UIView animateWithDuration:kAnimationDuration
                     animations:^{
                         self.view.alpha = 0.f;
                     } completion:^(BOOL finished) {
                         [self removeFromParentViewController];
                         [self.view removeFromSuperview];
                         _parentVC = nil;
                         [UIView animateWithDuration:kAnimationDuration animations:^{
                             _blurView.alpha = 0.f;
                         } completion:^(BOOL finished) {
                             [_blurView removeFromSuperview];
                         }];
                     }];
}

That’s all there is to it! Here is a demo illustrating the use of the FXBlurView library and the architectural approach.

VN:F [1.9.22_1171]
Rating: 4.2/5 (12 votes cast)
VN:F [1.9.22_1171]
Rating: +3 (from 5 votes)
How to Create iOS7-Like Dynamic Blur Effect Using FXBlurView, 4.2 out of 5 based on 12 ratings



Request a Free Quote
 
 
 

Please enter the result and submit the form

Content created by Victor Kotov