iOS Modal ViewController with transparent background

Crafting compelling user interfaces in iOS often involves presenting information in a way that feels seamless and integrated with the underlying content. One powerful technique for achieving this is by using an iOS: Modal ViewController with transparent background. Unlike traditional modals that completely obscure the parent view, a transparent modal allows parts of the presenting view controller to remain visible, offering a nuanced visual hierarchy. This approach is particularly useful for displaying alerts, custom popovers, interactive overlays, or partial sheets that require context from the view beneath. Mastering this technique can significantly enhance the user experience, making applications feel more dynamic and responsive, rather than jarringly switching between full-screen views. Let’s delve into the specifics of how to implement and optimize these transparent view controllers in your Swift projects.

In iOS, the way one view controller presents another is governed by its modalPresentationStyle property. This crucial setting dictates the visual appearance and behavior of the presented view controller relative to its presenter. For achieving a transparent background, the most commonly used style is .overFullScreen. When you set a presented view controller’s modalPresentationStyle to .overFullScreen, its view is added on top of the presenting view controller’s view, but the presenting view controller’s view is not removed from the view hierarchy. This critical distinction allows the presenter to remain visible underneath if the presented view controller has any transparent areas.

While .overFullScreen is the primary choice, it’s also worth noting .overCurrentContext. This style is similar but presents over the view controller that initiated the presentation, rather than the root view controller. The key difference lies in which view controller’s context the modal is presented within. For full screen transparency effects, .overFullScreen is generally preferred because it ensures the presenting view controller’s content is fully visible underneath. Ensuring your modal view controller’s background color is set to .clear or has an alpha value less than 1.0 is equally important to make the underlying content truly visible. Without this, even with the correct presentation style, your modal will still appear opaque.

For developers looking to dive deeper into these presentation styles, Apple’s official documentation on UIViewController.ModalPresentationStyle provides comprehensive details and scenarios for each option. Understanding these options is foundational before attempting more complex custom presentation logic. Incorrectly setting this property is a common pitfall that prevents the desired transparent effect, often leading to frustration for developers expecting a partial overlay.

To implement an iOS: Modal ViewController with transparent background, the process involves a few straightforward steps in Swift. First, you need to instantiate your target view controller, which will be presented as the modal. This view controller should be designed with the intention of having a transparent or semi-transparent background. Crucially, the view controller’s main view background color, or any subviews that should allow transparency, must be set with an alpha component or explicitly to .clear. For instance, if you’re using a container view within your modal, ensure that container’s background is also transparent where needed.

The core of achieving transparency lies in setting the modalPresentationStyle of the view controller you intend to present. Set it to .overFullScreen before presenting. This ensures that the presenting view controller remains in the view hierarchy beneath your new modal. Without this specific presentation style, the presenting view controller’s view would be removed, rendering any transparency useless as there would be nothing beneath it to show. A common setup involves creating a custom UIViewController subclass, designing its UI, and then presenting it from another view controller.

Here’s a simplified breakdown of the steps:

Create a new UIViewController subclass (e.g., TransparentModalViewController).
In TransparentModalViewController’s viewDidLoad(), set its view’s background color to .clear or a color with an alpha value (e.g., UIColor.black.withAlphaComponent(0.5) for a dimming effect).
From your presenting view controller, instantiate TransparentModalViewController.
Set modalVC.modalPresentationStyle = .overFullScreen.
Present the modal: self.present(modalVC, animated: true, completion: nil).

This basic setup forms the foundation. For more complex layouts, you might embed your content within a smaller view inside the modal view controller, allowing the surrounding area to be fully transparent, revealing the content below while highlighting the modal’s specific information.

Infographic: Visualizing Modal Presentation Styles - Opaque vs. Transparent

Advanced Customization with UIPresentationController ----------------------------------------------------

While .overFullScreen provides basic transparency, advanced scenarios often demand more granular control over the presentation and dismissal of your iOS: Modal ViewController with transparent background. This is where UIPresentationController comes into play. A UIPresentationController is an abstract class that manages the visual styling and layout of a presented view controller. By creating a custom subclass of UIPresentationController, you gain immense power over the dimming view, layout of the presented content, adaptive presentations (e.g., for different device orientations or size classes), and even interactive dismissal gestures.

Implementing a custom presentation controller involves several key components. You’ll need to create a custom class that inherits from UIPresentationController. Within this class, you can override methods like presentationTransitionWillBegin() and dismissalTransitionWillBegin() to animate a custom dimming view or other visual effects. The containerView property of the presentation controller is where all views related to the presentation (including the presented view and any custom dimming views) reside. You can add a semi-transparent UIView to this container view to create a sophisticated dimming effect that gracefully appears and disappears with your modal.

For more control over the presented view’s frame, you can override the frameOfPresentedViewInContainerView property. This allows you to present a modal that doesn’t necessarily take up the full screen, like a custom action sheet or a pop-up in the center of the screen, all while retaining the transparent background effect. Combining a custom UIPresentationController with a custom UIViewControllerAnimatedTransitioning object (often implemented by a separate object conforming to UIViewControllerTransitioningDelegate) provides complete control over both the visual layout Question & Answer :

I’m trying to present a view controller modally, with a transparent background. My goal is to let both the presenting and presented view controllers’s view to be displayed at the same time. The problem is, when the presenting animation finishes, the presenting view controller’s view disappears.

- (IBAction)pushModalViewControllerButtonPressed:(id)sender { ModalViewController *modalVC = [[ModalViewController alloc] init]; [self presentViewController:modalVC animated:YES completion:nil]; }

I know I could just add the view as a subview, but I’d like to avoid this solution for some reason. How could I fix it?

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

Understanding iOS Modal Presentation Styles

Implementing a Basic Transparent Modal ViewController