UINavigationItem#titleView alignment problems

Question

I am finding little information about using UINavigationItem#titleView with a custom font. When I have done so, the font is misaligned vertically in the navigation bar.

This entry is partly to document a hack, and also hoping someone has a succinct answer to this problem, as I feel I am missing something simple.

First the hack, using my own UILabel derived class:

@interface NavigationItemLabel : UILabel
- (void)setFrame:(CGRect)frame;
@end

@implementation NavigationItemLabel
- (void)setFrame:(CGRect)frame {
    // Called by UINavigationBar layoutSubviews.
    frame.origin.y -= self.font.descender;
}
@end

For some reason, frame.origin.y == -11, no matter what font I use. Does anyone have any intuition as to why this is?

Adding my font's descender (custom font called Gabriola) seems to help. Without this hack, the text is aligned with the bottom of the descenders on the center of the navigation bar.

This doesn't work for all fonts.

Does anyone have a better solution?

Thanks.

Answer 1

If you are deploying to iOS 5+, you could check out the titleVerticalPositionAdjustmentForBarMetrics property the in the UINavigationBar documentation:

- (CGFloat)titleVerticalPositionAdjustmentForBarMetrics:(UIBarMetrics)barMetrics
Returns the title’s vertical position adjustment for given bar metrics.

Also, you should check out titleTextAttributes (also iOS5+), which you can use to set a custom font:

NSDictionary *attributes = @{
    UITextAttributeFont: yourFont
};
[navBar setTitleTextAttributes:attributes];

If you're NOT on iOS5, I'd suggest wrapping the UILabel inside a UIView and setting your UIView as titleView instead (this allows you to further adjust the wrapped label's position by changing its frame).

If you have access to the WWDC 2012 videos (i.e. if you've got a developer account), I'd strongly recommend watching the talk on Advanced Appearance Customization on iOS (this stuff is included there).

Hope it helps somehow.

Answer 2

I had the same problem using Grotesque and there was a great SO solution shown by @kolyuchiy here. (It involves downloading the Apple Font Tool Suite command line utilities and adjusting the ascender attribute for your custom font).