iOS 11 large navigation bar title unexpected veloc

Question

I am trying to implement the iOS 11 native large navigation bar title on my new application. By calling below functions in viewDidLoad():

navigationController?.navigationBar.prefersLargeTitles = true navigationController?.navigationItem.largeTitleDisplayMode = .always

I do get what I desired.

But, when I start scrolling up (the only view inside the main view is a scroll view), the scrolling makes the large title disappear at a faster velocity than actual scroll with the finger. (that is, if I move 2cm on screen, the scroll view actually scrolls more than 2cm, up until the large title shrinks to the 'usual' size.)

The below is the gif of my app being scrolled. I actually move very little, and it automatically scrolls up that much. This differs from the Apple-made applications (the app store for instance, shown below my app).

Does anyone have solution to solving this abnormal behaviour?

EDIT: Per request, I am adding the current View hierarchy. There isn't anything special in my code, I just set the title and flag for prefersLargeTitles.

Answer 1

I found this problem as well.

In Interface Builder

1. Select your "viewController"
2. Attribute Inspector tick "Under Opaque Bars" and "Under Top Bars"
3. Make your top constraints of your scrollView second Item to "SuperView" not "SafeArea"

Answer 2

I solved the problem with these constraints:

    NSLayoutConstraint.activate([
        scrollView.topAnchor.constraint(equalTo: view.topAnchor),
        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor),
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor)
        ])

You also have to set this property on your UIViewController subclass:

extendedLayoutIncludesOpaqueBars = YES

Answer 3

I have been debugging this for a couple days, and I have found a workaround.

First, What Was Going On?

It is the UIScrollView that is not performing well with the largeTitle. Since there is scrolling up on the scroll view at the same time as the navigation bar becoming smaller, there exists twice the scrolling compared to the actual scroll.

I confirmed this by intentionally setting:

scrollView.contentOffset.y = scrollView.contentOffset.y * 0.5

This indeed made it move as desired. But, this couldn't solve the problem entire problem because it did not yield a smooth transition while going from large navigation bar to small navigation bar. You can try the below code out.

if scrollView.contentOffset.y > 0 {
  if self.navigationController!.navigationBar.frame.size.height > 44.0 {
    scrollView.contentOffset.y = scrollView.contentOffset.y * 0.5
  }
}

This worked 'okay' when scrolled slowly, but when you fling downward, it acts slow at first (while navigation height is large), and then speeds up afterwards.

WORKAROUND

Simply put, you CANNOT use UIScrollView with the iOS 11 large navigation bar. You ought to use UITableViewController instead.
Since my view is composed of multiple horizontal UICollectionViews spread along vertically, I used UITableView with different sections to form the UI using storyboard. If you use UITableViewController, it performs as desired.
AppStore and all other Apple-made native apps must do it this way.

Answer 4

The problem in case of double velocity can be that your view size smaller then navigation controller view size and you have view hierarhy like(you can check it in view debugger)

V:|-[navbar]-[view]-|

so when scrolling your view's frame is changing during changing of content offset and it doubles velocity.

extendedLayoutIncludesOpaqueBars = true should help.

Answer 5

I found this happens when the navigation bar has large titles and is not translucent. If you are using a CollectionView or TableView, and it is constrained to the safe area or its superview, then it should handle the insets for you.

For scroll views, check out the Apple docs, there are some new variables (like contentInsetAdjustmentBehavior) for the safe area changes that were introduced in iOS 11: https://developer.apple.com/documentation/uikit/uiscrollview

To make the Navigation Bar Translucent

In viewDidLoad(), try adding:

navigationController?.navigationBar.isTranslucent = true

Or set this checkmark in IB:

translucent checkmark