Search code examples
iosuiimageuibarbuttonitemuiappearance

UIBarButtonItem appearance difference between iOS 5 and iOS 6


I'm using the appearance proxy to set the background image of the back button in the navigation bar.

[[UIBarButtonItem appearance] setBackButtonBackgroundImage:[[UIImage imageNamed:@"arrow-back-button"] resizableImageWithCapInsets:UIEdgeInsetsMake(0., 9., 0., 0.)]
                                                  forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

This works great for iOS 6, looks absolutely perfect. In iOS 5, however, the background image starts repeating, almost as if the button is taller or something.

iOS 5:

iOS 5 version

iOS 6:

iOS 6 version

The image used (with a coloured background to highlight the size).

Back button image

Can anyone help me make the back button look correct in iOS 5?

EDIT:

Here is the result if I don't use resizableImageWithCapInsets:.

iOS 5 with no resizableImage


Solution

  • The tiling behavior you are experiencing is normal for iOS 5.x. That is the only behavior it knows how to do to resize the image. I don't know why it seems to resize in 5.x but not in 6.x, but the only way to fix this behavior in iOS 5.x is to make a PNG that is the same size as the background of your UIBarButtonItem (with alpha filler) and set that as a non-resizable background image.