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

Solution 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

Solution 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];    

Solution 3

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

1. Presenting View Controller

2. Presented View Controller

Solution 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)

Solution 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"):

View more solutions

Comments

[Thorsten]

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

[onmyway133]

Please take a look at the comment on this answer stackoverflow.com/a/25990081/1418457, it works

[Hemang]

This stackoverflow.com/q/27598846/1603234 make me smile, now your turn :)

[Tulleb]

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

[GoodSp33d]

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

[Laurent Maquet]

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)

[hightech]

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

[WendiKidd]

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 ^^

[lucasart]

self.modalPresentationStyle = UIModalPresentationCurrentContext; did it.

[Devarshi]

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

[Devarshi]

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

[hightech]

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

[Devarshi]

@hightech .. 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 ;)

[hightech]

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

[Dmitry Khryukin]

@hightech it fixes animation, but the background is not transparent again.

[adnako]

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

[Drew C]

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?

[hightech]

@pkamb I updated the solution for iOS 7. stackoverflow.com/a/11252969/1344459 I hope that helps you.

[Nikolay Spassov]

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

[Basem Saadawy]

Works well for iOS 7 on iPad.

[Radu Simionescu]

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!!!

[Radu Simionescu]

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

[Satyam Raikar]

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:UITransitionContextFromViewControllerKe‌​y];

[Alexis C.]

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

[RyJ]

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.

[tyegah123]

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

[Asadullah Ali]

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

[Tomasz Bąk]

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

[Tomasz Bąk]

A duplicate of the second best answer.

[Mário Carvalho]

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

[SuperDuperTango]

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

[Pramod]

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

[Max Gribov]

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

[Alok]

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

[Suragch]

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.

[CSawy]

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

[Duck]

saved my bacon! Thanks

[Pang]

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

[Jesse]

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.

[C0D3]

Agreed, storyboard options overwrite the code in this case.

[ravoorinandan]

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

[Crashalot]

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

[Alok]

@Crashalot I had used UIView class instead of UIViewController.

[Nate4436271]

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

[GeneCode]

This answer is so sweet, I now have diabetes.

[Moxarth]

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 ?