Iphone/Ipad Add Image and Text to Navigation Title

Question

I am simply trying to add an image and text to the navigationItem title. This is what I am doing, but it only shows the image and not the title. This seems like it would be pretty easy.

Example (

self.navigationItem.titleView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo_small_white.png"]] autorelease];
self.navigationItem.title = @"Company";

Solution 1

By setting a custom title view, you're replacing the standard view that normally shows the title text. From the documentation for titleView in UINavigationItem:

If you set this property to a custom title, it is displayed instead of the title.

So you need to add your own view (possibly a UILabel) to display your title — one way of doing this would be to add a UILabel and the UIImageView above as subviews of a container UIView, and set that as the titleView.

Solution 2

Here is my code:

UIView *myView = [[UIView alloc] initWithFrame: CGRectMake(0, 0, 300, 30)]; 
UILabel *title = [[UILabel alloc] initWithFrame: CGRectMake(40, 0, 300, 30)];

title.text = NSLocalizedString(@"My Title", nil);
[title setTextColor:[UIColor whiteColor]];
[title setFont:[UIFont boldSystemFontOfSize:20.0]];

[title setBackgroundColor:[UIColor clearColor]];
UIImage *image = [UIImage imageNamed:@"MyLogo.png"];
UIImageView *myImageView = [[UIImageView alloc] initWithImage:image];

myImageView.frame = CGRectMake(0, 0, 30, 30); 
myImageView.layer.cornerRadius = 5.0;
myImageView.layer.masksToBounds = YES;
myImageView.layer.borderColor = [UIColor lightGrayColor].CGColor;
myImageView.layer.borderWidth = 0.1;

[myView addSubview:title];
[myView setBackgroundColor:[UIColor  clearColor]];
[myView addSubview:myImageView];
self.navigationItem.titleView = myView;

Solution 3

In Swift 2:

var myView: UIView = UIView(frame: CGRectMake(0, 0, 300, 30))
var title: UILabel = UILabel(frame: CGRectMake(40, 0, 300, 30))
title.text = "The Title"
title.textColor = UIColor.blackColor()
title.font = UIFont.boldSystemFontOfSize(20.0)
title.backgroundColor = UIColor.clearColor()
var image: UIImage = UIImage(named: "your-image")!
var myImageView: UIImageView = UIImageView(image: image)
myImageView.frame = CGRectMake(0, 0, 30, 30)
myImageView.layer.cornerRadius = 5.0
myImageView.layer.masksToBounds = true
myImageView.layer.borderColor = UIColor.lightGrayColor().CGColor
myImageView.layer.borderWidth = 0.1
myView.addSubview(title)
myView.backgroundColor = UIColor.clearColor()
myView.addSubview(myImageView)

self.navigationItem.titleView = myView

Related gotcha: titleView centres automatically, if this isn't the case with the above example then you're likely using a smaller screensize (eg. iPhone). Simply change the width of the UIView and UILabel from 300 to less, as suited. It'll snap back to centre when there is room.

Comments

[Renetik]

Shortest is self.navigationItem.titleView = [UIImageView.alloc initWithImage:[UIImage imageNamed:@"image.png"]];