Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS: Modal ViewController with transparent background

People also ask

How do I present a transparent ViewController?

When you modally present a view controller the , it goes on the stack which in turn hides the view controller below it. So all you can do is to present a transparent view with animation similar to modally presenting a view controller.

How do you make a ViewController transparent in Swift?

#1 Open the ViewController This would open the ViewController without any fancy animations, but we want moooore. So, to make the UI popover transparent, we need to set the modalPresentationStyle to . overFullScreen .

How do you make a modal view in Swift?

In the Project navigator, click to select ContentView. If the canvas isn't visible, select Editor > Editor and Canvas to show it. Go to the preview window en click the live view button, Press the “show modal” button to present the modal. A swipe down will dismiss the modal, but the “Dismiss” button can also be used.


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


Create a segue to present modally and set Presentation property of that segue to over current context it will work 100 %

enter image description here


The solution to this answer using swift would be as follows.

let vc = MyViewController()
vc.view.backgroundColor = UIColor.clear // or whatever color.
vc.modalPresentationStyle = .overCurrentContext
present(vc, animated: true, completion: nil)