Avoid iOS status bar jitter when switching between pages of UIPageViewController - ios

Question

I'm building a simple app that uses a UIPageViewController with two pages. On one page, I want to show the status bar, but on the other page I do not. To make the transition look nice, I slide the status bar in and out after the user fully arrives on a page of the UIPageViewController, depending on which page it is.
This works fine on devices with the sensor housing (notch) like the iPhone XR, but it looks very glitchy on devices with a normal rectangular-shaped screen, like the iPhone 8.
iPhone XR example — Height of navigation bar and content below it stay consistent.
iPhone 8 example — When status bar starts animating (sliding) in, the content jumps up, but then returns to it's original position as the navigation bar animates down.
Best Possible Solution?
It seems like one of the best solutions would be to somehow force the navigation bar to always be the full height of the navigation bar + status bar height, so the navigation bar and content stay in the same place while the status bar animates down. This would be similar to the behavior on iPhone XR screen. How can I achieve this?
Existing Code
On my UIPageViewController, I keep track of a currentViewController attribute, and update the overridden prefersStatusBarHidden variable accordingly.
private var currentViewController: UIViewController?
override var prefersStatusBarHidden: Bool {
if let current = currentViewController,
current == settingsNavigationController {
return false
} else {
return true
}
}
To set the currentViewController variable and call the necessary setNeedsStatusBarAppearanceUpdate() method, I override the didFinishAnimating method of UIPageViewControllerDelegate:
extension PageViewController: UIPageViewControllerDelegate {
func pageViewController(_ pageViewController: UIPageViewController,
didFinishAnimating finished: Bool,
previousViewControllers: [UIViewController],
transitionCompleted completed: Bool) {
currentViewController = pageViewController.viewControllers?.first
UIView.animate(withDuration: 0.2) { () -> Void in
self.setNeedsStatusBarAppearanceUpdate()
}
}
}
To make it less jarring, I use the .slide animation (if I leave this out so there's no animation, it's still jumpy on rectangular screens):
override var preferredStatusBarUpdateAnimation: UIStatusBarAnimation {
return .slide
}
UPDATE:
Thanks to Leon Deriglazov's answer, I've been able to avoid the jumpiness of the content by subclassing the UINavigationController. I added the following code to trigger an animation (with the same duration as the status bar animation) that moves the content up while the status bar slides down, making the content appear to stay in the same place:
class SettingsNavigationController: UINavigationController {
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
UIView.animate(withDuration: 0.2) {
self.additionalSafeAreaInsets.top = 0
}
}
override func viewDidDisappear(_ animated: Bool) {
super.viewDidDisappear(animated)
additionalSafeAreaInsets.top = 20
}
}
Note: this does not contain the additional logic necessary to detect what type of device it is.
Here's what it looks like:
While I'd ideally like to avoid having the navigation bar animated down with the status bar, like on the iPhone XR screen, this is a much smoother experience. If anyone has any ideas about how to keep the navigation bar fixed in the same location I'd still appreciate that.

Answer 1

I would consider employing additionalSafeAreaInsets in your Settings controller to make it always account for the height of the status bar. Then you might have to switch it out when you present the status bar (not 100% sure about that).