One of the most frustrating things about developing for iOS is that you can do powerful things without breaking a sweat (e.g. animation), but sometimes getting the simplest things right involves a painful process of tweaking, scouring the internet and head-banging experimentation.
I recently wanted to display a logo image in the navigation bar of one of my screens. Sounds simple, right? Well it very nearly is, as there's a property
Well, not quite. Problem is, the logo can end up blurry, and fail to resize correctly when you rotate the iPhone / iPad. And it turns out solving those two issues is not straightforward.
Since I've found the magic formula that makes iOS display a nice, sharp and correctly-sized navigation image on all devices and versions (tested v5 and up), I thought I'd share it. It goes like this:
1. Create an image called
2. In your view controller's
Note we use a width of 3 for the
And that's all there is to it. Simple when you know how...
I recently wanted to display a logo image in the navigation bar of one of my screens. Sounds simple, right? Well it very nearly is, as there's a property
self.navigationItem.titleView
that is available in your view controller. Create an image view for your logo image, and use it to set this titleView
property. Piece of cake.Well, not quite. Problem is, the logo can end up blurry, and fail to resize correctly when you rotate the iPhone / iPad. And it turns out solving those two issues is not straightforward.
Since I've found the magic formula that makes iOS display a nice, sharp and correctly-sized navigation image on all devices and versions (tested v5 and up), I thought I'd share it. It goes like this:
Navigation Logo
1. Create an image called
navigation-logo.png
with height of 44 pixels - any width is fine. Create another image called navigation-logo@2x.png
with height of 88 pixels - again, any width is fine. Add them to your XCode project.2. In your view controller's
viewDidLoad
method, add the following: - (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
UIImageView *imageView = [[UIImageView alloc]
initWithFrame:CGRectMake(0,0,3,44)];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.clipsToBounds = NO;
imageView.image = [UIImage imageNamed:@"navigation-logo"];
controller.navigationItem.titleView = imageView;
}
Note we use a width of 3 for the
UIImageView
. This is important - if it's 2 (or any even number), then the image will be blurry. Setting clipToBounds=NO
and contentMode=UIViewContentModeScaleAspectFill
means the image will display outside the image view's width (fine), and will be correctly proportioned.And that's all there is to it. Simple when you know how...