Keep UI Elements in place when transitioning between UIViewControllers

Question

I am wondering what is the best practice to keep some of the UI elements in place when going forward/backward between UIViewController for example if I am using UINavigationController.

To be specific. I am making an app that has several similar view controllers (they can be instances of one main view controller). Then user clicks the next button and goes to the next page; or swipe back to go to the previous page. I have a progress bar on top and one or more buttons on bottom that I wish to keep static in place while the rest of the content are changing with an animation (a simple push might work). Now my question is, if is it better put the content inside a container view? or to implement custom transition to keep those items in place while moving the rest?

Here is an image of the concept:

Answer 1

In the navigation controller delegate you can implement navigationController(_ navigationController:, animationControllerFor:, from:, to:) to return a custom UIViewControllerAnimatedTransitioning object. If you go this route you will have to implement the whole animation yourself though.

If you want to keep the basic animations from UINavigationController and just keep your elements steady you can go another route. In your view controller implement viewWillAppear: and/or viewWillDisappear:. In there you can get the transitionCoordinator and call animate(alongsideTransition:, completion:) on that. With that you can run your custom animations in parallel to the system provided animations.

To keep fixed elements you add another copy of the fixed elements to the container view you can get from the context object that is passed to your block. In the completion block you then can remove it again.

Sounds complicated, but it actually is rather easy if you look at the code:

override func viewWillDisappear(animated: Bool) {
  super.viewWillDisappear(animated)

  let fixedViewCopy = UIView(...) 
  fixedViewCopy.frame = self.fixedView.frame

  transitionCoordinator?.animate(
     alongsideTransition: { context in
       context.containerView.addSubview(fixedViewCopy)
     },
     completion: { _ in
       fixedViewCopy.removeFromSuperview()
     }
  )
}