UINavigationController cuts off content when height is changed? (gif)

Question

I have put a UINavigationController into an expandable "Drawer". My goal is to let each viewController in the navigation stack to have its own "preferred" height.

Let's say VC1 needs to be tall. When navigating back to VC1 from VC2 I want it to animate its height to be tall. The animation logic seems to be working, even with the interaction of swipe.

But for some reason, the viewControllers in the navigationController are "cut off". Their constraints are correct, but they aren't updated(?). Or a portion of the content simply won't render, until I touch the view again. The invisible area on the bottom will even accept touches.

Take a look:

The expected result is that the contentViewControllers (first and second) always extend to the bottom of the screen. They are constraint to do this, so the issue is that they won't "render"(?) during the transition.

In the UINavigationController's delegates, I do the following:

func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
    transitionCoordinator?.animate(alongsideTransition: { (context) in
            drawer.heightConstraint.constant = targetHeight
            drawer.superview?.layoutIfNeeded()
        }, completion: { (context) in
            print("done")
        })
}

The height change is perfect. But the content in the navigation won't comply. The navigationController is constrained to leading, trailing, bottom, and a stored heightConstraint that changes its constant.

As soon as I touch/drag the navigationController/content it instantly "renders the unrendered", and everything is fine. Why is this happening?

When inspecting the view hierarchy, it looks like this:

The NavigationController is as tall as it needs to be, but the content is the same height as the entire Drawer was when the transition started, and it doesn't update until I touch it. Why?

Edit: I've pushed the code to my GitHub if you want to take a look. Beware though, there are several other issues there as well (animation etc.), don't mind them. I only want to know why the navigation won't render "future" heights.

Answer 1

You can solve the above problem by having a custom animationController for your navigationController and setting the appropriate frame for the destinationView in animateTransition function of your custom UIViewControllerAnimatedTransitioning implementation. The result would be like the one in the following gif image.

Your custom UIViewControllerAnimatedTransitioning may look like the one below.

final class TransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    let presenting: Bool

    init(presenting: Bool) {
        self.presenting = presenting
    }

    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return TimeInterval(UINavigationController.hideShowBarDuration)
    }

    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        guard let fromView = transitionContext.view(forKey: .from) else { return }
        guard let toView = transitionContext.view(forKey: .to) else { return }

        let duration = transitionDuration(using: transitionContext)

        let container = transitionContext.containerView
        if presenting {
            container.addSubview(toView)
        } else {
            container.insertSubview(toView, belowSubview: fromView)
        }

        let toViewFrame = toView.frame
        toView.frame = CGRect(x: presenting ? toView.frame.width : -toView.frame.width, y: toView.frame.origin.y, width: toView.frame.width, height: toView.frame.height)

        UIView.animate(withDuration: duration, animations: {
            toView.frame = toViewFrame
            fromView.frame = CGRect(x: self.presenting ? -fromView.frame.width : fromView.frame.width, y: fromView.frame.origin.y, width: fromView.frame.width, height: fromView.frame.height)
        }) { (finished) in
            container.addSubview(toView)
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        }
    }
}

And, in your navigation controller provide custom animationController as follows.

func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationController.Operation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
   switch operation {
   case .push:
      return TransitionAnimator(presenting: true)
   case .pop:
      return TransitionAnimator(presenting: false)
   default:
      return nil
   }
}

PS :- I've also given a pull request in your github repo.

Answer 2

You can update controllers height yourself:

first you need to keep a reference to controllers:

class ContainedNavigationController: UINavigationController, Contained, UINavigationControllerDelegate {

    private var controllers = [UIViewController]()
    func navigationController(_ navigationController: UINavigationController, didShow viewController: UIViewController, animated: Bool) { controllers = viewControllers }

/* Rest of the class */

Then you can update their heights accordingly. Don't forget to add new controller.

    private func updateHeights(to height: CGFloat, willShow controller: UIViewController) {
        controller.view.frame.size.height = height
        _ = controllers.map { $0.view.frame.size.height = height }
    }

You can use it in your code like this:

    func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
        
        if let superHeight = view.superview?.superview?.bounds.size.height, let drawer = (view.superview as? Drawer), let targetHeight = (viewController as? Contained)?.currentNotch.height(availableHeight: superHeight){
            
            transitionCoordinator?.animate(alongsideTransition: { (context) in
                drawer.heightConstraint.constant = targetHeight
                drawer.superview?.layoutIfNeeded()
                
                self.updateHeights(to: targetHeight, willShow: viewController) // <- Here
            }, completion: { (context) in
                self.updateHeights(to: targetHeight, willShow: viewController) // <- Here
            })
        }
    }

Result:

_{Maybe this is not the cleanest code can done, but I just want to solve the issue and giving you the idea}

---

Update

That shadow you have seen so far when you drag from the edge is a view called UIParallaxDimmingView. I have added a fix for that size too. So no more visual issues:

    private func updateHeights(to height: CGFloat, willShow controller: UIViewController) {
        controller.view.frame.size.height = height
        _ = controllers.map { $0.view.frame.size.height = height }

        guard controllers.contains(controller) else { return }
        _ = controller.view.superview?.superview?.subviews.map {
            guard "_UIParallaxDimmingView" == String(describing: type(of: $0)) else { return }
            $0.frame.size.height = height
        }
    }

I have added a pull request from my fork.

Answer 3

You can to set size like bellow: refrence -> https://github.com/satishVekariya/Drawer/tree/boom-diggy-boom

class FirstViewController: UIViewController, Contained {
   // your code 

   override func updateViewConstraints() {
       super.updateViewConstraints()
       if let parentView = parent?.view {
          view.frame.size.height = parentView.frame.height
       }
   }   
}

Your navigation vc:

class ContainedNavigationController:UINavigationController, Contained, UINavigationControllerDelegate{
   ///Your code

   func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
       viewController.updateViewConstraints()
           // Your code start
           // end
   }

   func navigationController(_ navigationController: UINavigationController, didShow viewController: UIViewController, animated: Bool) {
       viewController.updateViewConstraints()
   }

}

Answer 4

You can set height constraint and call layoutIfNeeded method without transition block.

Below is the code snippet for the same:

func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {

    if let superHeight = view.superview?.superview?.bounds.size.height, let drawer = (view.superview as? Drawer), let targetHeight = (viewController as? Contained)?.currentNotch.height(availableHeight: superHeight){
        drawer.heightConstraint.constant = targetHeight
        drawer.layoutIfNeeded()
    }
}

@sti Please let me know if it helps, please do up vote for the same