1.14. Displaying an Image on a Navigation Bar

Problem

You want to display an image instead of text as the title of the current view controller on the navigation controller.

Solution

Use the titleView property of the view controller’s navigation item:

- (void)viewDidLoad{
    [super viewDidLoad];

    /* Create an Image View to replace the Title View */
    UIImageView *imageView =
    [[UIImageView alloc]
     initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 40.0f)];

    imageView.contentMode = UIViewContentModeScaleAspectFit;

    /* Load an image. Be careful, this image will be cached */
    UIImage *image = [UIImage imageNamed:@"Logo"];

    /* Set the image of the Image View */
    [imageView setImage:image];

    /* Set the Title View */
    self.navigationItem.titleView = imageView;

}

Note

The preceding code must be executed in a view controller that is placed inside a navigation controller.

I have already loaded an image into my project’s assets group and I’ve called this image “Logo”. Once you run this app with the given code snippet, you’ll see something similar to that shown in Figure 1-35.

An image view in our navigation bar

Figure 1-35. An image view in our navigation bar

Discussion

The navigation item of every view controller can display two different types of content in the title area of the view controller to which it is assigned:

  • Simple text

  • A view

If you want to use text, you can use the title property of the navigation item. However, if you want more control over the title or if you simply want to display an image or any other view up on the navigation bar, you can use the titleView property of the navigation item of a view controller. You can assign any object that is a subclass of the UIView class. In our example, we created an image view and assigned an image to it. Then we displayed it as the title of the current view controller on the navigation controller.

The titleView property of the navigation bar is just a simple view, but Apple recommends that you limit the height of this view to no more than 128 points. So think about it in terms of the image. If you are loading an image that is 128 pixels in height, that will translate to 64 points on a Retina display, so in that case you are fine. But if you are loading an image that is 300 pixels in height, on a Retina display, that will translate to 150 points in height, so you’ll be clearly over the 128-points limit that Apple recommends for the title bar view height. To remedy this situation, you need to ensure that your title view is never taller than 128 points height-wise and set the view’s content mode to fill the view, instead of stretching the view to fit the content. This can be done by setting the contentMode property of your title bar view to UIViewContentModeScaleAspectFit.

Get iOS 7 Programming Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.