iOS 11 large-title navigation bar not collapsing

Question

The Apple guy in the What's new in Cocoa Touch WWDC video said that the new large-title navigation bar will magically hook into the top-level scroll view of the underlying view controller and collapse/expand itself automatically while scrolling up and down. (And by "magically", he probably meant that they failed to monkey patch this functionality into the already embarassing UINavigationController-UINavigationBar-UINavigationitem APIs in a usable way, so they had to resort to hooking into some heuristically chosen scroll view behind the scenes)

Even though I was prepared that this "automatic" collapse/expand wouldn't work if I deviate the slightest from the basic UINavigationController + UITableView/UICollectionView setup, it seems that even in this simplest case it doesn't work as expected.

Here's what I have:

A UITabBarController which contains a UINavigationController, which contains a UIViewController, which has a UITableView as its view. Tapping the first cell in the table will push a second view controller on the navigation stack:

No code, just the storyboard.

I've checked "Prefers large titles" for the navigation bar to activate large titles. Now, if I run the app and scroll up/down on the table view, the navigation bar stays the same - large - size; it doesn't collapse:

However, I've found that if I set the second view controller's navigation item to use the small navigation bar (by setting "Large Title" to the value "Never"), then if I open that page and navigate back, the interactive collapse magically starts working on the first page:

Am I missing something here, or is this feature not working properly? Here's the sample project I'm using: https://github.com/tzahola/iOS-11-Large-Title-Navigation-Bar

And by the way, I'm using the officially released iOS 11, not the betas.

2017-09-23 Update: I've sent a bug report to Apple, and opened a ticket on openradar.me: http://www.openradar.me/radar?id=5017601935671296

I'm experiencing the same exact thing. My gut tells me that it's a bug — Michael, Sep 24 '17 at 23:37
Science I can't comment I'll share the answer I posted https://stackoverflow.com/a/47493375/8385022 — Sergio Trejo, Nov 26 '17 at 05:34

score 43 · Answer 1 · answered Aug 27 '18 at 08:19

43

If there is any other view in addition to tableView, also make sure tableView is on the top of that view(s), right under the Safe Area:

answered Aug 27 '18 at 08:19

kamil3

1,232
1
14
19

Thanks! this helped me! – DLee Mar 07 '19 at 11:38
This helped me too Thanks! – Raghav Chopra Sep 09 '20 at 05:54
Why though. I have a background gradient I can't put anything behind... – Eric Apr 22 '22 at 08:28

score 28 · Accepted Answer · edited Oct 08 '17 at 14:45

28

Good news! I've just figured out that if I set "Large Titles" to "Never" on the storyboard, and then set it via code, then it works:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeAutomatic;
}

Seems like Apple forgot to handle the case when the navigation item has its largeTitleDisplayMode set via the Interface Builder.

So until they fix this issue, leave "Large Titles" as "Never" on storyboards, and set them via code in viewDidLoad.

You just need to do that to the first view controller. Subsequent view controllers honor the value in storyboard.

edited Oct 08 '17 at 14:45

mohamede1945

7,092
6
47
61

answered Sep 23 '17 at 19:08

Tamás Zahola

9,271
4
34
46

Could you please specify, where can I find this "Large Titles" on Storyboards? All I can find is "Prefers large titles" checkmark option on navigation bars. On which controller do you call the above code snippet, on the list or on the detail page? – gklka Oct 03 '17 at 14:36
1

@gklka You should select the navigation item on the view controller contained by the navigation controller! – Tamás Zahola Oct 03 '17 at 17:06
As @TamásZahola explained. It's *very* important to add that code (and disable "Automatic" / set to "Never" in IB) to the very first (root?) view controller that will be loaded by the navigation controller. If you do that on subsequent view controllers, it won't have any effect! – Altimac Oct 30 '17 at 09:04

score 14 · Answer 3 · answered Oct 11 '17 at 15:49

14

Or instead of changing anything in storyboard, do this:

override func viewDidLoad() {
    super.viewDidLoad()
    if #available(iOS 11.0, *) {
        self.navigationItem.largeTitleDisplayMode = .never
        self.navigationItem.largeTitleDisplayMode = .always
    }
}

No matter which language!

This is because large titles on navigation item decides whether or not to collapse on the basis of large title behaviour on previous screen navigation item title.

answered Oct 11 '17 at 15:49

D4ttatraya

3,344
1
28
50

To add on, the [documentation](https://developer.apple.com/documentation/uikit/uinavigationitem/largetitledisplaymode) states that .always is meant to: "Always display a large title" (which would then presumably collapse), and .automatic, to: "Inherit the display mode from the previous navigation item". So if the main view controller is .always and the children are all .automatic, it should all act as .always. – Cloud Jun 01 '20 at 00:41

score 6 · Answer 4 · answered Aug 11 '20 at 12:14

6

Make sure that addSubview(tableView) placed before others addSuview(someview)

answered Aug 11 '20 at 12:14

Alexandr Arsenyuk

85
1
4

Great answer but I have to ask WHY ?! and do you have any documentation reference to this ? – Shawn Frank Jun 11 '21 at 12:07
This is what worked me. Seems that scrollview has to be first subview for auto collapse/expand to work. Thanks. – Spencer Müller Diniz Feb 04 '22 at 20:49
wow took me whole day and solution was so simple. – Mel Feb 07 '23 at 13:03

score 4 · Answer 5 · answered Apr 10 '20 at 12:54

4

Year 2020, iOS 13.0, this WAS NEVER mentioned here. I literally spent an hour or two for this.

Issue: Large title won't collapse when doing layout programmatically using Snapkit (an autolayout framework)

Solution: SETUP YOUR VIEWS (including navigationController stuff and tableView) inside loadView() NOT in viewDidLoad().

answered Apr 10 '20 at 12:54

Glenn Posadas

12,555
6
54
95

Ran into a similar issue. Using SnapKit to constrain a table view with `make.directionalEdges.equalTo(superview.safeAreaLayoutGuide).inset(insets)` meant the animation was broken, using `make.directionalEdges.equalToSuperview().inset(insets)` was fine. Bizarre. – Jon Shier May 27 '20 at 21:06

score 2 · Answer 6 · answered Oct 18 '17 at 01:26

2

@TamasZahola @mohamede1945

Guys I had the same problem. I was able to resolve this issue by adding following snippet on my first View Controller of Navigation Controller

navigationController?.navigationBar.prefersLargeTitles = true

answered Oct 18 '17 at 01:26

satish

21
2

Where? Are you using Storyboards? – Sam Ballantyne Jan 06 '18 at 17:28
Yes, I was using storyboard. – satish Jan 30 '18 at 18:57

score 0 · Answer 7 · answered Aug 29 '21 at 19:54

0

It's an odd bug. The fix is to toggle OFF prefersLargeTitles in the storyboard and to set this in viewDidLoad of your nav controller's root vc:

navigationController?.navigationBar.prefersLargeTitles = true

answered Aug 29 '21 at 19:54

flutterloop

546
3
15

score 0 · Answer 8 · answered Dec 14 '21 at 09:51

0

TableView of its container should be at the top of ViewController's view hierarchy (RootView on screenshot). Otherwise it won't work.

answered Dec 14 '21 at 09:51

Dmytro Yashchenko

750
4
12

iOS 11 large-title navigation bar not collapsing

8 Answers8

Linked