CODEWITHSUNDEEP
iosiphoneuinavigationbarstatusbarlandscape
theory
theory

Reputation: 9887

How do I fix the navigation bar item height in landscape on iOS 8?

It seems to be a feature on iOS 8 that the status bar is hidden when in landscape mode. One can get the status bar back, which is fine, but I actually have no objection to it being hidden except that the navigation bar in my app has the top few pixels cut off, as you can see in this simulator screenshot:

iOS 8 landscape orientation cuts off navigation bar pixels

See how the gear icon is right up against the top of the screen? It should have a little more breathing room than that.

It's better if I restore the status bar, but I wouldn't mind leaving it out if I could get the navigation bar to have a little more space. Studying the Messages app on iOS 8, I see that the nav bar height is the same as what I'm seeing, but the compose button gets smaller. How do I update my app to reduce the size of the navigation bar items in landscape?

Upvotes: 2

Views: 2995

Answers (2)

theory
theory

Reputation: 9887

Turns out that I had been setting the font size of that settings button (which just has U+2699 (⚙) for its title) in -viewDidLoad:

UIBarButtonItem *settingsButton = self.navigationItem.leftBarButtonItem;
[settingsButton setTitleTextAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:28]}
                              forState:UIControlStateNormal
];

That's why it was too big in horizontal orientation on iOS 8, though just right in portrait.

To fix this issue, I deleted this code from -viewDidLoad and added two new methods to handle resizing it:

- (void)setSettingsButtonFontSize:(CGFloat)size {
    UIBarButtonItem *settingsButton = self.navigationItem.leftBarButtonItem;
    [settingsButton setTitleTextAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:size]}
                                  forState:UIControlStateNormal
    ];
}

- (void)setSettingsButtonFontSizeForVerticalSizeClass:(UIUserInterfaceSizeClass)sizeClass {
    [self setSettingsButtonFontSize:sizeClass == UIUserInterfaceSizeClassCompact ? 20 : 28];
}

The first method merely sets the specified font size; the second selects a size for based on a size class parameter.

To get it to size properly, I added this code to -viewWillAppear::

if ([self respondsToSelector:@selector(traitCollection)]) {
    [self setSettingsButtonFontSizeForVerticalSizeClass:self.traitCollection.verticalSizeClass];
} else {
    [self setSettingsButtonFontSize:28];
}

So I get the original behavior on iOS 7, but on iOS 8, the icon gets sized to 20 when the vertical size class is compact.

And finally, I added the new-to-iOS-8 method to handle rotations:

- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection
              withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
    [super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];
    [self setSettingsButtonFontSizeForVerticalSizeClass:newCollection.verticalSizeClass];
}

So now, on iOS 8 on the iPhone, the gear is 20 in landscape orientation and 28 in portrait. And now it looks good in landscape, not too crowded:

Proper UIBarButtonItem font sizing on iOS 8

Upvotes: 2

spybart
spybart

Reputation: 2593

You might be adjusting frames in the wrong place. I recommend setting all frames (i.e. the frame of the gears) in the viewDidLayoutSubviews method.

Upvotes: 0

Related Questions