Search code examples
iosobjective-cuitableviewuinavigationcontrolleruiviewanimationtransition

iOS 7 UINavigationController transition to UITableView: black-translucent layer during animation


in my new iOS app I'd like to use a fixed background for the entire app and its views.

When clicking the navigation item to show up the settings table controller an ugly black-translucent layer or something like this appears in a fraction of a second on the whole screen until the animation is done.

Any idea to remove this undesired behaviour? Thank you!

Demo:

Image

better .mp4 version of the demo @ Dropbox

edit: The UINavigationController contains the background image.

My Settings TableViewController was modified like this:

self.tableView.backgroundView = nil;
self.tableView.opaque = NO;
self.tableView.backgroundColor = [UIColor clearColor];

Solution

  • It's because of the standard UINavigationController push animation in iOS 7. When a new ViewController is pushed onto the stack, it overlays itself on top of the previous ViewController, with a slight shadow underneath it.

    The solution I think is to implement your own transition. Like this:

    Create a new UINavigationController class, I name it CustomNavigationController

    CustomNavigationController.h

    @interface UINavigationController (Retro)
    
    - (void)pushViewControllerCustom:(UIViewController *)viewController;
    
    @end
    

    CustomNavigationController.m

    @implementation UINavigationController (Retro)
    
    - (void)pushViewControllerCustom:(UIViewController *)viewController {
        CATransition *transition = [CATransition animation];
        transition.duration = 0.2;
        transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
        //Fade here look nice, no more black shadow stuff
        transition.type = kCATransitionFade;
        transition.subtype = kCATransitionFromRight;
        [self.view.layer addAnimation:transition forKey:nil];
    
        [self pushViewController:viewController animated:NO];
    }
    
    @end
    

    To use it:

    - (IBAction)barButtonItemPressed:(id)sender
    {
        TableViewController *tableView = [self.storyboard instantiateViewControllerWithIdentifier:@"table"];
        [self.navigationController pushViewControllerCustom:tableView];
    }