Cut-off title label in UINavigationBar in iOS 5

Question

Using the iOS 5 SDK I'm writing an app that uses a custom, script style font in its UINavigationBar instance. The problem with this font is that, since it is in the script style, its glyphs exceed the bounds. You can see the problem in-app here:

For a clearer example, you can see my photoshop document here:

Any idea how I might fix this issue? My first instinct was to set the clipsToBounds property of the UILabel in the UINavigationBar, but there is apparently no apple-approved way to access this object directly. This has plagued me for some time while I was using iOS 5 in beta, so maybe you can help now that the NDA has lifted.

Thanks!

Answer 1

You could use UINavigationItem 's titleView to set a UILabel with a custom font, and then override setTitle: to update your custom label. If necessary, you could then call sizeToFit on the label or manually update its frame after using sizeWithFont: or any of the other NSString sizing methods.

Answer 2

I had the exact same problem and can't seem to find any recent solutions on the topic.

Here's an article I found though with a great explanation of the problem: https://web.archive.org/web/20161228102731/http://tinymission.com/post/subclassing-uibutton

The author of this article says:

You see, Apple (or whoever designed the UIButton class) decided to auto-calculate the width of the button's label based on the reported width of the font letters. ... The issue comes up primarily with italic and cursive fonts. ... The way they nest is that the font designer actually draws the letter intentionally outside of its calculated bounds. This allows two cursive letters to touch and other styles of letters to be closer together so that a letter like 'f' doesn't look abnormally far away from a letter 't'.

Hope this helps any future people who stumble across this post with the same problem!

Answer 3

Can you access the clipToBounds or adjustsFontSizeToFitWidth property of the UILabel?

Alternatively you could choose a font size that made the label fin in the UILabel view. A description is available on how to adjust the font size to a given rect here:

How to adjust font size of label to fit the rectangle?

Answer 4

If you are using a navigation controller you can set the titleView of a certain UIViewController that is being displayed. This title view can be a UIImageView with the title as a .png resource.

For example:

Inside your UIViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
            self.navigationController.navigationItem.titleView = [[UIImageView alloc] initWithImage:@"yourheader.png"];
    }

    return self;
}

You can play a little with the size of your image to make it fit properly.

Hope this can help.