iOS - stack fullscreen viewController when presenting another viewController

Question

I have a UITabBarViewController with two tabs. I want to present a viewController fullscreen in one of the tabs. I have used the following code to do so.

    let navCtrl = UINavigationController(rootViewController: eventViewController)
    navCtrl.modalPresentationStyle = .fullScreen        
    self.navigationController?.present(navCtrl, animated: true)

It works. And EventViewController is fullscreen. However, when presenting another viewController in EventViewController, EventViewController is still fullscreen. But I want it to shrink in size and stack-up as it normally do( as in the image). In order to do so, I have changed modalPresentationStyle to overCurrentContext.

    let navCtrl = UINavigationController(rootViewController: eventViewController)
    navCtrl.modalPresentationStyle = .overCurrentContext        
    self.navigationController?.present(navCtrl, animated: true)

It does so, but it causes another problem: If I change tabs and dismiss EventViewController, the presenting viewController is black as described in this question (none of the answers was helpful).

Basically I want the EventController to be fullscreen but shrink in size when presenting another controller in it. How to do so?

Update

A simple project with the same issue.

class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let ctrl = TabZeroViewController()
        ctrl.tabBarItem.image = UIImage(named: "archived-task")
        ctrl.tabBarItem.title = "One"


        let test = TabOneViewController()
        test.tabBarItem.image = UIImage(named: "Test")
        test.tabBarItem.title = "Test"

        let tabBarList = [ctrl, test ]

        self.viewControllers = tabBarList.map {
            let nav = UINavigationController(rootViewController: $0)
            nav.interactivePopGestureRecognizer?.isEnabled = true
            return nav
        }
    }
}



class TabZeroViewController: UITableViewController {


    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.delegate = self
        self.tableView.dataSource = self

        self.view.backgroundColor = .white
    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell =  UITableViewCell()
        cell.textLabel?.text = "\(indexPath.row)"
        return cell
    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let ctrl = ModalTableViewController()

        let nav = UINavigationController(rootViewController: ctrl)
        nav.modalPresentationStyle = .fullScreen

        self.navigationController?.present(nav, animated: true)
    }

}

class ModalTableViewController: UITableViewController {
    override func viewDidLoad() {
        self.view.backgroundColor = .red
        let button = UIButton()
        button.setTitle("Cancel", for: .normal)
        button.addTarget(self, action: #selector(dismissModal), for: .allEvents)
        let item = UIBarButtonItem()
        item.customView = button
        self.navigationItem.leftBarButtonItem = item
        self.tableView.dataSource = self
        self.tableView.delegate = self
    }

    @objc func dismissModal() {
        self.dismiss(animated: true, completion: nil)
    }


    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell =  UITableViewCell()
        cell.textLabel?.text = "Event"
        return cell
    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let ctrl = EventViewController()
        let nav = UINavigationController(rootViewController: ctrl)
         nav.modalPresentationStyle = .overCurrentContext
        self.navigationController?.present(nav, animated: true)
    }
}


class TabOneViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }
}




class EventViewController: UITableViewController {

    override func viewDidLoad() {
        self.view.backgroundColor = .red
        let button = UIButton()
        button.setTitle("Cancel", for: .normal)
        button.addTarget(self, action: #selector(dismissModal), for: .allEvents)
        let item = UIBarButtonItem()
        item.customView = button
        self.navigationItem.leftBarButtonItem = item
        self.tableView.dataSource = self
        self.tableView.delegate = self
    }

    @objc func dismissModal() {
        self.dismiss(animated: true, completion: nil)
    }


    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell =  UITableViewCell()
        cell.textLabel?.text = "Event"
        return cell
    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let ctrl = EventViewController()
        let nav = UINavigationController(rootViewController: ctrl)
        self.navigationController?.present(nav, animated: true)
    }
}

Add this code in willConnectTo of SceneDelegate.

 if let windowScene = scene as? UIWindowScene {
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = TabBarController()
        self.window = window
        window.makeKeyAndVisible()
    }

While you are on first tab, select a table cell to open the ModalTableViewController. And then change tabs and dismiss ModalTableViewController.

First of all you need to update that in navigation controller you are presenting a view controller but the navigation controller are intended to use for pushing view controllers. As it may cause unexpected behaviour. — Najeeb ur Rehman, Feb 24 '20 at 20:18
I have run the same flow and it works as expected. One thing to ask: The navigation controller that has EventViewController as a root is not showing on the whole screen, how could you change tabs while it is displaying. Please clear this point to me. — Najeeb ur Rehman, Feb 26 '20 at 20:46
You did present a navigation controller and when you dismiss any controller that will not dismiss the attached navigation controller, thats why you are facing the issue for **Black screen**. — neeraj joshi, Feb 27 '20 at 16:44
@neerajjoshi, Follow this steps, 1. set `modalPresentationStyle = .overCurrentContext ` 2. present viewCtrl 3. choose the other tab and then choose the same tab. 4 dismiss the presented viewCtrl. — mahan, Feb 28 '20 at 10:32
@mahan , May I play with your source code? If yes then, You can create sample project with such scenario & upload on GitHub . — Vishal Sharma, Mar 03 '20 at 09:52
@SharmaVishal. Cant do it for personnel reason. However, I included all code of a simple project so that you can test if you wish so. — mahan, Mar 03 '20 at 20:48
@NajeeburRehman I include more code. If you wish you can try it yourself. — mahan, Mar 03 '20 at 20:50
@mahan I have tried the code that you have shared but to me its working fine. I am not getting black screen. Here is the link of video how this code works to me https://share.getcloudapp.com/nOuNDOE4 — Najeeb ur Rehman, Mar 04 '20 at 19:52
@mahan is there something I not getting correctly about your expectation ? — Najeeb ur Rehman, Mar 04 '20 at 19:54

score 0 · Answer 1 · answered Mar 04 '20 at 15:13

As for example project - presenting view over full screen hides TabBar. But I changed code a bit to propose working solution. Probably you would want to change it a bit, but I hope this will push you in good direction :)

It was actually needed to dismiss ModalTableViewController to avoid black screen.

class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let ctrl = TabZeroViewController()
        ctrl.tabBarItem.image = UIImage(named: "archived-task")
        ctrl.tabBarItem.title = "One"


        let test = TabOneViewController()
        test.tabBarItem.image = UIImage(named: "Test")
        test.tabBarItem.title = "Test"

        let tabBarList = [ctrl, test ]

        let viewControllers: [UIViewController] = tabBarList.map {
            let nav = UINavigationController(rootViewController: $0)
            nav.interactivePopGestureRecognizer?.isEnabled = true
            nav.tabBarItem = $0.tabBarItem
            return nav
        }

        self.setViewControllers(viewControllers, animated: false)
    }

    override var selectedViewController: UIViewController? {
        get {return super.selectedViewController}
        set {
            if super.selectedViewController?.presentedViewController != nil {
                super.selectedViewController?.dismiss(animated: false, completion: nil)
            }
            super.selectedViewController = newValue
        }
    }
}



class TabZeroViewController: UITableViewController {


    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.delegate = self
        self.tableView.dataSource = self

        self.view.backgroundColor = .white
    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell =  UITableViewCell()
        cell.textLabel?.text = "\(indexPath.row)"
        return cell
    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let ctrl = ModalTableViewController()

        let nav = UINavigationController(rootViewController: ctrl)
        nav.modalPresentationStyle = .currentContext

        self.present(nav, animated: true)
    }

}

class ModalTableViewController: UITableViewController {
    override func viewDidLoad() {
        self.view.backgroundColor = .red
        let button = UIButton()
        button.setTitle("Cancel", for: .normal)
        button.addTarget(self, action: #selector(dismissModal), for: .allEvents)
        let item = UIBarButtonItem()
        item.customView = button
        self.navigationItem.leftBarButtonItem = item
        self.tableView.dataSource = self
        self.tableView.delegate = self
    }

    @objc func dismissModal() {
        self.presentingViewController?.dismiss(animated: false, completion: nil)
    }


    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell =  UITableViewCell()
        cell.textLabel?.text = "Event"
        return cell
    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let ctrl = EventViewController()
        let nav = UINavigationController(rootViewController: ctrl)
         nav.modalPresentationStyle = .fullScreen
        self.navigationController?.present(nav, animated: true)
    }
}


class TabOneViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
    }
}




class EventViewController: UITableViewController {

    override func viewDidLoad() {
        self.view.backgroundColor = .red
        let button = UIButton()
        button.setTitle("Cancel", for: .normal)
        button.addTarget(self, action: #selector(dismissModal), for: .allEvents)
        let item = UIBarButtonItem()
        item.customView = button
        self.navigationItem.leftBarButtonItem = item
        self.tableView.dataSource = self
        self.tableView.delegate = self
    }

    @objc func dismissModal() {
        self.dismiss(animated: true, completion: nil)
    }


    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell =  UITableViewCell()
        cell.textLabel?.text = "Event"
        return cell
    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let ctrl = EventViewController()
        let nav = UINavigationController(rootViewController: ctrl)
        self.navigationController?.present(nav, animated: true)
    }
}

Good luck!

score 0 · Answer 2 · answered Mar 04 '20 at 21:05

Try this code to present screen modally:

 func getImageFromView() -> UIImage {

        let layer = UIApplication.shared.keyWindow?.layer
        let scale = UIScreen.main.scale
        UIGraphicsBeginImageContextWithOptions(layer?.frame.size ?? CGSize.zero, false, scale)
        if let context = UIGraphicsGetCurrentContext() {
            layer?.render(in: context)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image ?? UIImage()
        }
        return UIImage()
    }


/// This is the method to present  screen modally
/// - parameter controller: controller instance on which screen will be presented
func presentScreenModally(controller: UIViewController, animated: Bool) {
    let loginController  = UIStoryboard.loadLoginViewController()//Get instance of controller form storyboard
    loginController.bgTranParentImg = getImageFromView()

    let bgImage = getImageFromView()
    let presentationStyleViewController = UIStoryboard.loadPresentationStyleController()// This is another controller, which I am pasting below
    presentationStyleViewController.bgimage = bgImage
    presentationStyleViewController.loginController = loginController
    presentationStyleViewController.addChild(loginController)
    controller.view.window?.addSubview(presentationStyleViewController.view)
    loginController.view.frame = presentationStyleViewController.containerView.bounds
    presentationStyleViewController.containerView.addSubview(loginController.view)

    let navigationController = UINavigationController(rootViewController: presentationStyleViewController)
    navigationController.navigationBar.isHidden = true
    navigationController.modalPresentationStyle = .fullScreen
    controller.navigationController?.present(navigationController, animated: animated, completion: nil)
}

PresentationStyleViewController class:

class PresentationStyleViewController: UIViewController {

    @IBOutlet var containerView: UIView!
    @IBOutlet var containeTopConstraint: NSLayoutConstraint!
    @IBOutlet var containerBottomConstraint: NSLayoutConstraint!
    @IBOutlet var backgroundImage: UIImageView!

    var bgimage: UIImage?
    let topPadding: CGFloat = 30
    var loginController: LoginViewController?

    override func viewDidLoad() {
        super.viewDidLoad()
        self.uiSetup()
    }

    override func viewDidAppear(_ animated: Bool) {
        restorePopup()
    }

    /// Initial UI setup
    func uiSetup() {
        containeTopConstraint.constant = self.view.frame.size.height
        backgroundImage.image = bgimage
    }

    @IBAction func panGesture(_ sender: UIPanGestureRecognizer) {
        guard let piece = sender.view else {return}
        let translation = sender.translation(in: piece.superview)
        containeTopConstraint.constant = translation.y >= topPadding ? translation.y : topPadding

        if sender.state == .ended || sender.state == .cancelled {
            if containeTopConstraint.constant > self.view.frame.size.height/4 && translation.y > 0 {
                self.dismissPopup()
            } else {
                self.restorePopup()
            }
        }
    }

    /// Dismisses popup and controller
    func dismissPopup() {
        containeTopConstraint.constant = self.view.frame.size.height
        UIView.animate(withDuration: 0.3,
                       animations: {
                        self.view.layoutIfNeeded()
        }, completion: { (_) in
            self.loginController?.btnClick_cross(UIButton())
            self.dismiss(animated: false)
        })
    }

    /// Restores popup at initial position
    func restorePopup() {
        containeTopConstraint.constant = topPadding
        UIView.animate(withDuration: 0.3,
                       animations: {
                        self.view.layoutIfNeeded()
        }, completion: nil)
    }
}

iOS - stack fullscreen viewController when presenting another viewController

Update

2 Answers2