Display clearColor UIViewController over UIViewController

Question

I have a UIViewController view as a subview/modal on top of another UIViewController view, such as that the subview/modal should be transparent and whatever components is added to the subview should be visible. The problem is that I have is the subview shows black background instead to have clearColor. I'm trying to make UIView as a clearColor not black background. Does anybody know what is wrong with it? Any suggestion appreciated.

FirstViewController.m

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
UIViewController *vc = [storyboard instantiateViewControllerWithIdentifier:@"SecondViewController"];

[vc setModalPresentationStyle:UIModalPresentationFullScreen];
[self presentModalViewController:vc animated:NO];  

SecondViewController.m

- (void)viewDidLoad 
{
     [super viewDidLoad];
     self.view.opaque = YES;
     self.view.backgroundColor = [UIColor clearColor];
}

---

RESOLVED: I fixed the issues. It is working so well for both of iPhone and iPad. Modal View Controller with no black background just clearColor/transparent. The only thing that I need to change is I replaced UIModalPresentationFullScreen to UIModalPresentationCurrentContext. How simple is that!

FirstViewController.m

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
UIViewController *vc = [storyboard instantiateViewControllerWithIdentifier:@"SecondViewController"];
vc.view.backgroundColor = [UIColor clearColor];
self.modalPresentationStyle = UIModalPresentationCurrentContext;
[self presentViewController:vc animated:NO completion:nil];

---

NOTICE: If you are using a modalPresentationStyle property of navigationController:

FirstViewController.m

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
UIViewController *vc = [storyboard instantiateViewControllerWithIdentifier:@"SecondViewController"];
vc.view.backgroundColor = [UIColor clearColor];
self.navigationController.modalPresentationStyle = UIModalPresentationCurrentContext;
[self presentViewController:vc animated:NO completion:nil];

---

NOTICE: The bad news is that the above solution doesn't work on iOS 7. The good news is that I fixed the issue for iOS7! I asked somebody for help and here is what he said:

When presenting a view controller modally, iOS removes the view controllers underneath it from the view hierarchy for the duration it is presented. While the view of your modally presented view controller is transparent, there is nothing underneath it except the app window, which is black. iOS 7 introduced a new modal presentation style, UIModalPresentationCustom, that causes iOS not to remove the views underneath the presented view controller. However, in order to use this modal presentation style, you must provide your own transition delegate to handle the presentation and dismiss animations. This is outlined in the 'Custom Transitions Using View Controllers' talk from WWDC 2013 https://developer.apple.com/wwdc/videos/?id=218 which also covers how to implement your own transition delegate.

You may see my solution for the above issue in iOS7: https://github.com/hightech/iOS-7-Custom-ModalViewController-Transitions

Readytowear

make sure you set the modalPresentationStyle of the rootViewController, otherwise it won't work – Riorsson

Please take a look at the comment on this answer https://mcmap.net/q/127467/-ios-modal-viewcontroller-with-transparent-background, it works – Trilinear

This https://mcmap.net/q/129737/-present-a-modal-view-controller-with-transparent-background/1603234 make me smile, now your turn :) – Fool

I had to do self.modalPresentationStyle = UIModalPresentationCurrentContext; with the presented view controller to make it work, not with the presenting one. – Raveaux

Check Brody's answer below. modalViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext; will solve the issue, – Conlin

I got stuck with it until I understand that the modalPresentationStyle property have to be set before presenting the viewController : (swift) presentedViewController.modalPresentationStyle = .overCurrentContext ; self.present(presentedViewController, animated: true, completion: nil) – Caterwaul

Answer 1

RESOLVED: I fixed the issues. It is working so well for both of iPhone and iPad. Modal View Controller with no black background just clearColor/transparent. The only thing that I need to change is I replaced UIModalPresentationFullScreen to UIModalPresentationCurrentContext. How simple is that!

FirstViewController.m

    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
    UIViewController *vc = [storyboard instantiateViewControllerWithIdentifier:@"SecondViewController"];
    vc.view.backgroundColor = [UIColor clearColor];
    self.modalPresentationStyle = UIModalPresentationCurrentContext;
    [self presentViewController:vc animated:NO completion:nil];

---

NOTICE: If you are using a modalPresentationStyle property of navigationController:

FirstViewController.m

    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
    UIViewController *vc = [storyboard instantiateViewControllerWithIdentifier:@"SecondViewController"];
    vc.view.backgroundColor = [UIColor clearColor];
    self.navigationController.modalPresentationStyle = UIModalPresentationCurrentContext;
    [self presentViewController:vc animated:NO completion:nil];

---

NOTICE: The bad news is that the above solution doesn't work on iOS 7. The good news is that I fixed the issue for iOS7! I asked somebody for help and here is what he said:

When presenting a view controller modally, iOS removes the view controllers underneath it from the view hierarchy for the duration it is presented. While the view of your modally presented view controller is transparent, there is nothing underneath it except the app window, which is black. iOS 7 introduced a new modal presentation style, UIModalPresentationCustom, that causes iOS not to remove the views underneath the presented view controller. However, in order to use this modal presentation style, you must provide your own transition delegate to handle the presentation and dismiss animations. This is outlined in the 'Custom Transitions Using View Controllers' talk from WWDC 2013 https://developer.apple.com/wwdc/videos/?id=218 which also covers how to implement your own transition delegate.

You may see my solution for the above issue in iOS7: https://github.com/hightech/iOS-7-Custom-ModalViewController-Transitions

Readytowear

self.modalPresentationStyle = UIModalPresentationCurrentContext; did it. – Cribwork

hi, thanx for posting this problem and thanx for posting its answer :-) – Ironworker

btw.. I have observed that because of self.modalPresentationStyle = UIModalPresentationCurrentContext; it is not presenting modalViewController with animation .. any ideas? – Ironworker

@Miraaj try to change from [self presentModalViewController:vc animated:NO]; to [self presentModalViewController:vc animated:YES]; – Readytowear

@Readytowear .. thnx for your reply :-) ... I did the same but no success :-( .. if I remove UIModalPresentationCurrentContext it shows animation but does not work as expected.. may be time for a new post in SO ;) – Ironworker

@Miraaj Then setting modalPresentationStyle back to UIModalPresentationFullScreen before showing UIViewController should work self.modalPresentationStyle = UIModalPresentationFullScreen; [self performSegueWithIdentifier:@"CustomSegue" sender:self]; – Readytowear

@Readytowear it fixes animation, but the background is not transparent again. – Permissible

Fix, please, this line: [self presentViewController:vc animated:NO completion:NULL]; – Bibliographer

Running this in iOS 6 and 7, the new view controller is clear while animating the presentation, but once it is in place the background turns black. It turns clear again when animating the dismissal. Has anyone else had this issue? – Deadpan

@pkamb I updated the solution for iOS 7. https://mcmap.net/q/129739/-display-clearcolor-uiviewcontroller-over-uiviewcontroller I hope that helps you. – Readytowear

Thanks for sharing. Works in iOS 7 simulator. Don't like all the delegate stuff but looks like I'll have to do it, at least for now – Pastoralize

Works well for iOS 7 on iPad. – Sunbathe

This doesn't seem to work when presenting from a tabviewcontroller on ios 5.1 . For ios 7(only) I sucessfully adopted jarvApps's solution. So at this moment there is no sollution for ios 5.1 (don't know about 6) when presenting from tab view controller. Any suggestions would be great – Corella

Just tested this on iOS 8. Simply changing the modalPresentationStyle to UIModalPresentationCustom seems to do the trick (hides the black background and does not remove the other views). I don't see the need to implement the TransitionDelegate.h/m and AnimatedTransitioning.h/m classes from the GitHub project. – Loginov

tested the example project. But the view is not transparent. Anyone knows why? – Cimabue

This answer would be easier to understand if you edited it to just contain the current working solution and took out all the explanation about how you got to it. – Nationalism

Answer 2

iOS8+

In iOS8+ you can now use the new modalPresentationStyle UIModalPresentationOverCurrentContext to present a view controller with a transparent background:

MyModalViewController *modalViewController = [[MyModalViewController alloc] init];
modalViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;           
[self presentViewController:modalViewController animated:YES completion:nil];    

Deity

Should be the accepted answer. Previously accepted answer is still valid for legacy reasons, but this is the recommended method. – Moody

If you're developing for ios 8 only, go with this answer! It works – Destroyer

This is good, but shouldn't the last line be [self presentViewController:modalViewController animated:YES completion:nil];? (instead of targetController)? – Apheliotropic

In order to work this for me I added modalViewController.view.backgroundColor = UIColor.clearColor() thanks for the solution – Malherbe

can anyone provide me the code for pushviewcontroller too (I mean for navigation controller ) . – Insensible

thanks a lot:) this works.But all the sub views on the presented vc are also becoming transparent. For example i am developing a custom alert controller with a dim view back ground. now with this change even the alertview has also become transparent along with the view background when alpha is set to 0.8 – Shemeka

@iThink did you find an answer? is this possible? – Histrionism

@Histrionism I had used UIView class instead of UIViewController. – Insensible

i am just pushing another view from one view . the pushed view would appear transparent after this code . i have used it many times earlier . it is as simple as this . --> settings *set = [[settings alloc] initWithNibName:@"settings" bundle:nil]; --> set.view.backgroundColor = [ [UIColor blueColor] colorWithAlphaComponent:0.3f]; --> [self.navigationController pushViewController:set animated:YES ]; ... but now with latest ios and xcode , it is not at all working . i mean pushed view is not getting transparent . any one has any solution for this ? – Barbra

Answer 3

So for purely visual thinkers and storyboard fans, you can do:

1. Presenting View Controller

2. Presented View Controller

Lyrebird

This should be the accepted answer. This is all you have to do for this to work, then set the background color of the view on the modal controller to clear. – Landreth

Agreed, storyboard options overwrite the code in this case. – Cognoscenti

This answer is so sweet, I now have diabetes. – Mackenzie

Answer 4

Swift 3 & iOS10 solution :

//create view controller
let vc = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "RoadTripPreviewViewController")
//remove black screen in background
vc.modalPresentationStyle = .overCurrentContext
//add clear color background
vc.view.backgroundColor = UIColor.clear
//present modal
self.present(vc, animated: true, completion: nil)

Gavin

Answer 5

This is from xCode 7 beta 4 using a control drag segue. Simply set the background of your destination to clear, and set the segue properties in IB as this (nb. Presentation can also be "Over Full Screen"):

Antonyantonym

THANK YOU. i did your segue fix + the ViewControllers answer by @Lyrebird and it worked!! – Agentival

This answered my question. Thank you very much. Have an up vote :D – Checkers

Answer 6

I found the easiest way to get it to work on iOS7 and iOS8 is to add set the presentationStyle to UIModalPresentationOverCurrentContext on the modallyPresentedVC (ViewController which you want to present modally) because of iOS8:

[modallyPresentedVC setModalPresentationStyle:UIModalPresentationOverCurrentContext];
[modallyPresentedVC.navigationController setModalPresentationStyle:UIModalPresentationOverCurrentContext];

and UIModalPresentationCurrentContext on presentingVC (the controller which presents the modallyPresented) because of iOS7:

[presentingVC setModalPresentationStyle:UIModalPresentationCurrentContext];
[presentingVC.navigationController setModalPresentationStyle:UIModalPresentationCurrentContext];

Because things are handled differently on iOS7 and iOS8. Of course you don't have to set the navigationController properties if you are not using one. Hope that helps.

Carmine

Answer 7

Swift2 version :

let vc = self.storyboard!.instantiateViewControllerWithIdentifier("YourViewController") as! YourViewController
vc.view.backgroundColor = UIColor.clearColor()
vc.modalPresentationStyle = UIModalPresentationStyle.OverFullScreen // orOverCurrentContext to place under navigation
self.presentViewController(vc, animated: true, completion: nil)

Nisan

Answer 8

Another way (no need to create custom transition and works on iOS 7)

Using Storyboard:

Create the Child View Controller with freedom size, set view width to 500x500 (for example) and add the next method:

- (void)viewWillLayoutSubviews{
    [super viewWillLayoutSubviews];
    self.view.superview.bounds = CGRectMake(0, 0, 500, 500);
    self.view.superview.backgroundColor = [UIColor clearColor];
}

Then create a Modal segue with Form Sheet and test it.

Quagga

You are amazing!!! this actually works!!! (setting the "freedom" size in IB doesn't affect anithing cose it is a simulated metric, but anyway, it works!!!) and it is so simple!!! – Corella

Answer 9

iOS 7 solution with custom segue:

CustomSegue.h
#import <UIKit/UIKit.h>

    @interface CustomSegue : UIStoryboardSegue <UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning>

    @end



CustomSegue.m
#import "CustomSegue.h"

@implementation CustomSegue

-(void)perform {

    UIViewController* destViewController = (UIViewController*)[self destinationViewController];
    destViewController.view.backgroundColor = [UIColor clearColor];
    [destViewController setTransitioningDelegate:self];
    destViewController.modalPresentationStyle = UIModalPresentationCustom;
    [[self sourceViewController] presentViewController:[self destinationViewController] animated:YES completion:nil];
}


//===================================================================
// - UIViewControllerAnimatedTransitioning
//===================================================================

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

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext {

    UIView *inView = [transitionContext containerView];
    UIViewController* toVC = (UIViewController*)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIViewController* fromVC = (UIViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];

    [inView addSubview:toVC.view];

    CGRect screenRect = [[UIScreen mainScreen] bounds];
    [toVC.view setFrame:CGRectMake(0, screenRect.size.height, fromVC.view.frame.size.width, fromVC.view.frame.size.height)];

    [UIView animateWithDuration:0.25f
                     animations:^{

                         [toVC.view setFrame:CGRectMake(0, 0, fromVC.view.frame.size.width, fromVC.view.frame.size.height)];
                     }
                     completion:^(BOOL finished) {
                         [transitionContext completeTransition:YES];
                     }];
}


//===================================================================
// - UIViewControllerTransitioningDelegate
//===================================================================

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {

    return self;
}

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
    //I will fix it later.
    //    AnimatedTransitioning *controller = [[AnimatedTransitioning alloc]init];
    //    controller.isPresenting = NO;
    //    return controller;
    return nil;
}

- (id <UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id <UIViewControllerAnimatedTransitioning>)animator {
    return nil;
}

- (id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id <UIViewControllerAnimatedTransitioning>)animator {
    return nil;
}

@end

Solution based on hightech code.

Thadthaddaus

When I dismiss the by [self dismissViewControllerAnimated:YES completion:NULL]; I get an exception ?? – Holotype

Yes for this code. Or you have to implement animationControllerForDismissedController method for animation begin work. – Thadthaddaus

Answer 10

For Me this Works:

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main_iPhone" bundle:nil];
    UIViewController *vc = [storyboard instantiateViewControllerWithIdentifier:@"MMPushNotificationViewController"];

    vc.view.backgroundColor = [UIColor clearColor];
    self.modalPresentationStyle = UIModalPresentationCurrentContext;
#ifdef __IPHONE_8_0
    if(IS_OS_8_OR_LATER)
    {
        self.providesPresentationContextTransitionStyle = YES;
        self.definesPresentationContext = YES;
        [vc setModalPresentationStyle:UIModalPresentationOverCurrentContext];
    }
#endif


    [self presentViewController:vc animated:NO completion:nil];

MMPushNotificationViewController is the Transparent View controller and also I have made the MMPushNotificationViewController's view color as clearcolor. Now All that I have Done and made my Transparentviewcontroller.

Spire

Answer 11

You also can 're-add' the window to the view.

OneViewController *vc = [[OneViewController alloc] init];
if ([self respondsToSelector:@selector(presentViewController:animated:completion:)]) {
    [self presentViewController:vc animated:YES completion:nil];
} else {
    [self presentModalViewController:vc animated:YES];
}

[[[UIApplication sharedApplication] keyWindow] insertSubview:self.view atIndex:0];

And in this way, presenting can be animated.

Curtsy

Answer 12

For iOS7

There is now a way to achieve this using the iOS7 custom transitions, this way :

MyController * controller = [MyController new];
[controller setTransitioningDelegate:self.transitionController];
controller.modalPresentationStyle = UIModalPresentationCustom;
[self controller animated:YES completion:nil];

To create your custom transition, you need 2 things :

• A TransitionDelegate object (implementing <UIViewControllerTransitionDelegate>)
• An "AnimatedTransitioning" object (implementing <UIViewControllerAnimatedTransitioning>)

You can find more informations on custom transitions in this tutorial.

Silkworm

Any specific reasons why you have added mainviewcontroller and second view controller class in animator class? why didn't you directly use UIViewController *toVC = (UIViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; UIViewController *fromVC = (UIViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; – Earache

It's not my tutorial so I don't know the ins and outs about this. Your point seems valid though. – Silkworm

Answer 13

Works Great on iOS7 and iOS8

UIViewController* vc=[[UIViewController alloc]initWithNibName:@"VC" bundle:nil];

vc.view.alpha=0.7;
[vc setModalPresentationStyle:UIModalPresentationOverCurrentContext];

self.navigationController.modalPresentationStyle = UIModalPresentationCurrentContext;

[self presentViewController:vc animated:NO completion:nil];

Varicella

A duplicate of the second best answer. – Moody

Answer 14

For iOS 7 and only by using Interface Builder it can be accomplished by setting the Presentation to "Over Current Context" on all the view controllers involved in the modal presentation. Even for navigation controllers.

For instance, set it on all these view controllers:

NavController -> RootViewController -> ModalViewController

Automobile

Answer 15

I haven't played around with Storyboard/Interface builder much, but what pops out at me is that you're telling the view to be clear colored (ie. 100% alpha/see-through) and also telling it to be opaque (0% alpha--completely solid). These two things don't seem to mesh. I'd comment out the self.view.opaque = YES; line and see if it works then ;)

Ah, something else I just thought of--its entirely possible that your view controller DOES have the alpha background, but of course the alpha will be showing through to the color of the base window or root view controller of the program, which is by default black. The very base layer of your entire app can't have a transparent background--transparent to what? What's behind it? There has to be something to see THROUGH the transparency. Does that make sense?

Barden

I tried to comment out the self.view.opaque = YES; line and it doesn't working. :-( – Readytowear

Did you read the second part of my answer? You might not be able to do what you want, depending on your setup. What are you placing behind the clearColor VC? Maybe we can sort this out ^^ – Barden

Answer 16

Just use "self.modalPresentationStyle = UIModalPresentationCurrentContext;", in presenting view

Will work fine :)

Chippewa

This is just repeating what the existing answers have already said. – Marlonmarlow