iOS 13
Modal Presentation
Fullscreen Modal
iOS Development
Swift Programming

Presenting modal in iOS 13 fullscreen

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

In iOS 13, Apple introduced new modal presentation styles that significantly affect how view controllers are displayed. A major shift involved the introduction of the default card-like modal presentation style, which, while visually appealing and better for interaction, might not always align with a developer's requirements. This article provides a detailed look into presenting modals in fullscreen in iOS 13 by examining technical implementations, alternative presentation styles, and best practices.

Modality and Presentation Styles in iOS 13

By default, starting with iOS 13, modals present in a card-like fashion which partially covers the underlying views. However, there are situations where presenting a view in fullscreen might be necessary, such as when the task needs the user's full attention or when implementing functionality that does not harmonize well with the interactive card style.

There are three primary modal presentation styles utilized in iOS:

  1. FullScreen (UIModalPresentationFullScreen)
  2. PageSheet (UIModalPresentationPageSheet)
  3. FormSheet (UIModalPresentationFormSheet)

Among these, FullScreen is the style that was traditionally used before iOS 13 and can still be leveraged when complete screen coverage is required.

Enabling Fullscreen Modality in iOS 13

While the default is not fullscreen, enabling it requires only a small adjustment to your code:

swift
// Assuming a UIViewController instance named modalViewController
modalViewController.modalPresentationStyle = .fullScreen
present(modalViewController, animated: true, completion: nil)

Examples of Implementing Fullscreen Presentation

swift
1class MainViewController: UIViewController {
2    func showFullscreenModal() {
3        let modalVC = ModalViewController()
4        modalVC.modalPresentationStyle = .fullScreen
5        self.present(modalVC, animated: true, completion: nil)
6    }
7}
8
9class ModalViewController: UIViewController {
10    override func viewDidLoad() {
11        super.viewDidLoad()
12        self.view.backgroundColor = UIColor.white
13        // Additional setup
14    }
15}

Key Considerations

User Experience

When deciding to present a modal in fullscreen, weigh the user experience carefully. Fullscreen presentations can be intrusive, so ensure their use aligns with the app's design and functional requirements.

Compatibility

Ensure the app remains backward compatible with previous versions of iOS. Use conditional checks and API availability guards to maintain functionality across iOS versions.

Transition and Dismissal

Consider customizing transitions for fullscreen presentations to enhance the user experience. Additionally, ensure that the dismissal methods close the view cleanly and return users to their previous state.

Summary Table

| Presentation Style | Description | When to Use \ |---------------------|---------------------------------------------|------------------------------------------------------ | | FullScreen | Covers the entire screen. | For tasks requiring full engagement, potentially blocking interactions. | | PageSheet | Presents as a page sheet on larger devices. | For secondary tasks or information interactions. | | FormSheet | Presents a centered form on medium-sized devices. | Typically used for pop-up forms or short interactions. |

Additional Details

Customizing Appearance

Custom transitions can be invoked while presenting view controllers, which allows for a tailored user experience. Utilize UIViewControllerTransitioningDelegate to create custom animations and presentation controllers that define how the modal appears on and off the screen.

Handling Adaptive Presentation

With iOS's adaptive layout system, the presentation style might adapt based on the physical device size. Make adjustments using the UIPresentationController to manage resize events or modal adaptations, ensuring a seamless experience across different devices.

Best Practices

  • Utilize the modal presentation style that most closely correlates with user interaction need.
  • Avoid forced fullscreen modals for non-critical interactions.
  • Leverage custom animations to enhance user engagement while maintaining clarity and function.

By thoughtfully implementing modals in iOS 13, developers can create intuitive, user-friendly experiences that accommodate new design paradigms, provide a visually appealing interface, and adhere to functionality requirements.


Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.