Push ViewController with transparent background

Question

I want to have a blurred image as a fixed background in my app. My ViewController structure is like this:

HostViewController (with background image and VisualEffectView)
– NavigationController (modally presented over the HostViewController)
–– ViewController (with clear background color)

When I want to push to another ViewController (which has also clear background color) from the NavigationController, the new ViewController overlaps the first ViewController which is visible through the new ViewController. That looks quite strange and ugly. My question is how I could achieve a push animation with a fixed background without the ViewControllers overlaying each other?

You can see a sample of this effect in the app "TuneShell" which can be found in the App Store.

Thanks in advance, Fabian.

---

EDIT: To clarify my problem I added this gif:

As you can see in the gif, when I push to the Playlist-ViewController, the rootViewController is visible through the new Playlist-ViewController while it's animating. I want to fix that.

WHAT I WANT TO ACHIEVE:

http://fabian-thies.tk/demo.gif

Answer 1

I have a solution for this way back, but I don't think this is the best one and keep in mind that this is just a workaround.

First thing to do is set your global background like:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    ..
    self.window.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"blur.jpeg"]];

    return YES;
}

blur.jpeg is a clear(not blurred) image I'm using this for example (got it from google)

Next is subclassing UIViewController for global use, but its up to you how to implement it globally.

//BGBlurViewController.h
//
@interface BGBlurViewController : UIViewController

@end

//BGBlurViewController.m
//
@implementation BGBlurViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    UIToolbar *background = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    [background setBarStyle:UIBarStyleBlackTranslucent];
    [self.view addSubview:background];
    [self.view sendSubviewToBack:background];
}

@end

I'm using UIToolbar as a background of UIViewController and achieve blur effect.

---

This is how to use the subclassed UIViewController (BGBlurViewController)

//RootViewController
//
#import "BGBlurViewController.h"

@interface ViewController : BGBlurViewController

@end

and another:

//View next to rootViewController
//
#import "BGBlurViewController.h"

@interface ViewController2 : BGBlurViewController

@end

NOTE: I'm setting the backgroundColor of the UIViewController s (ViewController and ViewController2) to Default /none in storyboard, again this is just a workaround...

---

Here is the sample output in runtime:

Hope this would help you.. Cheers..