UINavigationBar with Large Titles - how to find extra height in iOS 11

Question

When using prefersLargeTitles for a UINavigationController's UINavigationBar in iOS 11, the nav bar increases height. The increase is from 44 to 96 on the iPhones I have checked, but I think those numbers can change per device (or at least we need to code as if they can).

I want to programmatically find the 'extra' height - the height of the large titles area that is added beneath the traditional UINavigationBar when a large title is displayed. I can easily find the entire height of the bar with the large title displayed, but is there a way to programmatically find the height of the large title portion of the bar alone (without any hardcoding)?

The reason I need this is that there are times that I want to programmatically scroll to the top of a UITableView, pulling down the large title (which has scrolled up under the "regular height" nav bar) so that it is showing, and the content offset I need is the extra height of the nav bar. I could use the total height of the navigation bar, but this would pull the UITableView down too far. To do this now, I need to hardcode as below:

[self.tableView setContentOffset:CGPointMake(0, -52) animated:NO];

Rodrigo

you don't need to know about the current layout to do so, just make the first cell visible, if you want to scroll to the top (scrollToRowAtIndexPath:atScrollPosition:animated:), that should be enough. – Session

Thank you, and I had tried that. However, my use case requires me to scroll to the point where the large nav title is showing, and this only scrolls to the point where the top row is showing. To get the large title to show, I need the 'extra height' of the nav bar - the area that shows the large title. I have tried to think of another way to do this, but at this point, I do believe I need that height. – Rodrigo

there is a golden rule here: if the answer to your question is to track system generated layouts' boundaries to adjust your own layout – you are probably raising the wrong question. – Session

@Session I get it, which is why I have been surprised to have this issue. I am hoping to find that this is the case for my current issue. However, in this particular case, so far, I have not been able to find any other way to scroll to exactly the point where the title is pulled down, and not past its top - and this is what I need to happen for my use case, which I do not believe is unreasonable. I am scrolling to show the large title as a result of changing the view in a container. – Rodrigo

@Session how would you scroll a tableview to show the top of the large title? Just curious, because I think we both agree I am missing something. – Rodrigo

Answer 1

I think you won't find a way to clearly resolve your problem. What you are asking for is a part of a navigation bar internals which is not exposed to the user. However, I think I can offer you a workaround.

To understand this let's take a look at the navigation bar (with large titles enabled) in the view debugger. As you can see on the below image there is an extra view containing the large title for a particular view controller. This view is not present when you don't support large titles.

Basically, what you want to know is the height of that view.

This is my proposed solution/workaround

extension UINavigationBar
{
    var largeTitleHeight: CGFloat {
        let maxSize = self.subviews
            .filter { $0.frame.origin.y > 0 }
            .max { $0.frame.origin.y < $1.frame.origin.y }
            .map { $0.frame.size }
        return maxSize?.height ?? 0
    }
}

What it does

1. Filters out subviews which start on the top of the navigation bar. They are most probably a background or the navigation area, we don't need them.
2. Finds the lowest subview in the in the navigation bar.
3. Maps the resulted subview frame to the frame size.
4. Returns the height of the found subview or 0 if none was found.

The obvious drawback of this approach is that it's tightly coupled to the structure of the navigation bar which may change in the future. However, it's unlikely that you will get something more than one or another dirty trick.

The result of the execution should look like follows.

print("Extra height: \(navigationController!.navigationBar.lagreTitleHeight)")
Extra height: 52.0

Hansiain

YES! Thank you! And as a side bar note, you want to calculate the extra height when the view controller first displays, before the extra-height part of the nav bar is scrolled under. Thank you! – Rodrigo

PS I just offered a bounty on this question as well if you care to take a shot. You apparently know what you are doing! #46780485 – Rodrigo

Answer 2

Seems like calling navigationBar.sizeToFit() forces the navigationBar to adjust its size as it shows large title. Therefore you can calculate top safe area easily. The solution that we came up with is next:

self.navigationController?.navigationBar.sizeToFit()
let navigationBarOffset = navigationController?.navigationBar.frame.origin.y ?? 0
let navigationBarHeight = navigationController?.navigationBar.frame.height ?? 0
let offset = -navigationBarOffset - navigationBarHeight
if collectionView.contentOffset.y > offset {
let contentOffset = CGPoint(x: 0, y: offset)
   collectionView.setContentOffset(contentOffset, animated: true)
}

Amundsen

Answer 3

As I understand it, you have your tableView origin under the navigationBar, at y = 0 in your UIViewController's view.

Your tableView should have its top bound fix to the top layout guide, or use the new safe area. That way you won't have to programmatically calculate what's the size of the navigationBar.

If you never used it, take a look at auto-layout.

Lubber

I use auto layout constantly. I have switched to iOS 11, safe areas, and large navigation titles. I think if you reread my question you will see that I am not trying to calculate the size of the nav bar - my nav bar is placed perfectly via auto layout. I am trying to calculate an offset for a scrollView under certain conditions. – Rodrigo

As I understand the offset you want for the scrollview is for the scrollview content not to be hidden, right ? – Lubber

The reason I need this is that there are times that I want to programmatically scroll to the top of a UITableView, pulling down the large title so that it is showing, and the content offset I need is the extra height of the nav bar. I could use the total height of the navigation bar, but this would pull the UITableView down too far. – Rodrigo

I didn't try it but I assume using auto-layout with top layout guide or safe-area would place your view just under the whole bar, large title included. That's what I understood from wwdc videos and documentation. – Lubber

It does. That's not my issue, however. The large title scrolls under the "regular height" nav bar when the tableView is scrolled to show more rows at the bottom. I need to (programmatically) scroll to the top of the tableView and then some so that the large title will come back down. – Rodrigo

That's why you should constraint your scroll view top edge to the bottom of the large title bottom edge. That's why auto-layout is for, you shouldn't specify hard coded values. I can't help you with the large title height. – Lubber

I am using a container view with a scrollview as the child. However, this same exact issue exists for a UITableView whose top is constrained to the top of the safe view. I think maybe someone else can probably help a bit more with this. – Rodrigo

Answer 4

You can simply scroll to the top of the table view without knowing the size of the navigation bar. UITableView comes with an API for that.

Option 1

// Get the first index path. You might want to check here whether data source item exists.
NSIndexPath *firstIndexPath = [NSIndexPath indexPathForRow:0
                                                 inSection:0];
// Scroll to it. You can play with scroll position to get what you want
[tableView scrollToRowAtIndexPath:firstIndexPath
                 atScrollPosition:UITableViewScrollPositionTop
                         animated:YES];

Option 2

CGPoint offset = CGPointMake(0.0, -tableView.contentInset.top);
[tableView setContentOffset:offset animated:YES];

Windywindzer

Thank you, and I had tried that. However, my use case requires me to scroll to the point where the large nav title is showing, and this only scrolls to the point where the top row is showing. To get the large title to show, I need the 'extra height' of the nav bar - the area that shows the large title. I have tried to think of another way to do this, but at this point, I do believe I need that height. – Rodrigo

What if you used UITableViewScrollPositionBottom in scrollToRowAtIndexPath? – Blanketyblank

I did try that and unfortunately it did not work. But thanks for the suggestion. – Rodrigo

Answer 5

I just experienced this same issue.

 -(void)layoutSubviews{
            [super layoutSubviews];
            CGRect rectStatusBar = [[UIApplication sharedApplication] statusBarFrame];
            if (rectStatusBar.size.height==44.f) {
               //statusBar shows
            }else{
                if (@available(iOS 11.0, *)) {
                    for ( UIView*view in self.subviews) {
                        if ([NSStringFromClass(view.classForCoder) isEqualToString:@"_UINavigationBarContentView"]) {
                            view.frame = CGRectMake( 0,20,view.frame.size.width,44);
                        }
                        else if ([NSStringFromClass(view.classForCoder) isEqualToString:@"_UIBarBackground"]) {
                            view.frame = CGRectMake(0,0,view.frame.size.width, 64);
                        }
                    }
                }
            }
        }

Airless

I'm not sure exactly what your issue is, but using hardcoded values is what I am trying to get away from, so unfortunately this is not a solution. – Rodrigo