iOS: Modal ViewController with transparent background

For those trying to get this to work in iOS 8, the "Apple-approved" way to display a transparent modal view controller is by setting modalPresentationStyle on the presented controller to UIModalPresentationOverCurrentContext.

This can be done in code, or by setting the properties of the segue in the storyboard.

From the UIViewController documentation:

UIModalPresentationOverCurrentContext

A presentation style where the content is displayed over only the parent view controller’s content. The views beneath the presented content are not removed from the view hierarchy when the presentation finishes. So if the presented view controller does not fill the screen with opaque content, the underlying content shows through.

When presenting a view controller in a popover, this presentation style is supported only if the transition style is UIModalTransitionStyleCoverVertical. Attempting to use a different transition style triggers an exception. However, you may use other transition styles (except the partial curl transition) if the parent view controller is not in a popover.

Available in iOS 8.0 and later.

https://developer.apple.com/documentation/uikit/uiviewcontroller

The 'View Controller Advancements in iOS 8' video from WWDC 2014 goes into this in some detail.

Note:

  • Be sure to give your presented view controller a clear background color, lest it not actually be see-through!
  • You have to set this before presenting ie setting this parameter in the viewDidLoad of the presentedViewController won't have any affect

In iOS 8.0 and above it can be done by setting the property modalPresentationStyle to UIModalPresentationOverCurrentContext

//Set property **definesPresentationContext** YES to avoid presenting over presenting-viewController's navigation bar

self.definesPresentationContext = YES; //self is presenting view controller
presentedController.view.backgroundColor = [YOUR_COLOR with alpha OR clearColor]
presentedController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

[self presentViewController:presentedController animated:YES completion:nil];

See Image Attached


This following code only works on the iPad.

self.view.backgroundColor = [UIColor clearColor];
self.modalPresentationStyle = UIModalPresentationCurrentContext;
[self presentModalViewController:modalVC animated:YES];

I would go with adding a sub view.

Here is a very good discussion. Look at the comments specifically. Not only the answer.

Modal View

If I were you I wouldn't do it. I would add a sub view and do it. It seems to give me a better control over things.

EDIT:

As mentioned by Paul Linsay, since iOS 8 all that's needed is UIModalPresentationOverFullScreen for the modalPresentationStyle of the ViewController being presented. This would also cover of navigationBar and tabBar buttons.


This code works fine on iPhone under iOS6 and iOS7:

presentedVC.view.backgroundColor = YOUR_COLOR; // can be with 'alpha'
presentingVC.modalPresentationStyle = UIModalPresentationCurrentContext;
[presentingVC presentViewController:presentedVC animated:YES completion:NULL];

In this case you miss slide-on animation. To retain animation you still can use the following "non-elegant" extension:

[presentingVC presentViewController:presentedVC animated:YES completion:^{
    [presentedVC dismissViewControllerAnimated:NO completion:^{
        presentingVC.modalPresentationStyle = UIModalPresentationCurrentContext;
        [presentingVC presentViewController:presentedVC animated:NO completion:NULL];
    }];
}];

If our presentingV is located inside of UINavigationController or UITabbarController you need to operate with that controllers as presentingVC.

Further, in iOS7 you can implement custom transition animation applying UIViewControllerTransitioningDelegate protocol. Of course, in this case you can get transparent background

@interface ModalViewController : UIViewController <UIViewControllerTransitioningDelegate>

First, before presenting you have to set modalPresentationStyle

modalViewController.modalPresentationStyle = UIModalPresentationCustom;

Then you have to implement two protocol methods

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
    CustomAnimatedTransitioning *transitioning = [CustomAnimatedTransitioning new];
    transitioning.presenting = YES;
    return transitioning;
}

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
    CustomAnimatedTransitioning * transitioning = [CustomAnimatedTransitioning new];
    transitioning.presenting = NO;
    return transitioning;
}

The last thing is to define your custom transition in CustomAnimatedTransitioning class

@interface CustomAnimatedTransitioning : NSObject <UIViewControllerAnimatedTransitioning>
@property (nonatomic) BOOL presenting;
@end

@implementation CurrentContextTransitionAnimator

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext 
{
    return 0.25;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext 
{
    UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

    if (self.presenting) {
        // custom presenting animation
    }
    else {
        // custom dismissing animation
    }
}

I struggled a bit with the Interface Builder of XCode 7 to set the Presentation Style as @VenuGopalTewari suggested. In this version, there seems to be no Over Current Context or Over Full Screen presentation mode for the segue. Thus, to make it work, I set the mode to Default:

enter image description here with enter image description here

Additionally I set the presentation mode of the modally presented view controller to Over Full Screen:

enter image description here