Display clearColor UIViewController over UIViewController

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

Display UIViewController as a popover

I want to display a UIViewController as a small popover over an other UIViewController. The UIViewController should be display modal, but not take the whole screen. It should just show up on a lower t

display UIViewController

Is this the right way to call UIViewController programmtically when play button is pressed UIBarButtonItem *systemItem1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemPlay

no storyboard uiviewcontroller transparent over other uiviewcontroller

my goal is to present a transparent uiviewcontroller on top of another uiviewcontroller so that the background will be a viewcontroller.. I’m NOT using storyboard. For now i just added UIViews instea

iOS: UIViewController doesn’t display another UIViewController using storyboards

I am tryin to display multiple UIViewController objects inside a single view. For the time being I want to display a single UIViewController object when the app loads. But the app screen appears blank

Display clear colored ViewController over another ViewController in iOS 7 [duplicate]

This question already has an answer here: Display clearColor UIViewController over UIViewController 7 answers Prior to iOS 7, according to this popular Stackoverflow question, the way to show a

Draw a line over UIViewController

I have my app on iPhone with a UIViewController with some stuff inside.. image, textbox, etc… is there a way to draw a line or something like this using opengl directly inside the UIViewController?

Displaying a UIViewController/UIView over another view

I’m trying to create a picker controller with a ‘Done’ button positioned just above it, to display over a form that is in another view. I have created a sub-class of UIViewController and using IB I’ve

Implementing programatically UIView over a UIViewController

I’m trying to understand which methods of UIView I must override to be able to display something. I have a very simple application that: Has a single UIViewController Has a UIView The UIView creates

addSubview of UIViewController, view gets over released

EDIT: Solved the problem myself. Turned out it was a leftover in the dealloc method that caused a UIButton to be released twice… I’m trying to display a UIViewController on top of another UIViewCont

how to add a view over window in uiviewcontroller

Is it possible to add a subview over the window from a uiviewcontroller and then removing that also? Thanks Pankaj

Answers

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?

You cannot show a ViewController with a clear background if it is presented as modal. The only way to accomplish this is to add the second ViewController as a sub-view to the first.

VC2 *vc = [[VC2 alloc] init];
[self.view addsubview:vc.view];

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

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.

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 500×500 (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.

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.

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.

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:targetController animated:YES completion:nil];    

So for purely visual thinkers and storyboard fans, you can solve this like that:

1. Presenting View Controller Display clearColor UIViewController over UIViewController

2. Presented View Controller

Display clearColor UIViewController over UIViewController

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.

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

Display clearColor UIViewController over UIViewController

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

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”):

Display clearColor UIViewController over UIViewController

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.

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

Will work fine 🙂

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)

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)