UINavigationBar Back Button stretchable image too long

Question

I am using the following code to customise the back button of our UINavigationBar. However, the image is stretched too far, resulting in an image like the following. Please can you tell me how to prevent this?

Thanks!

[[UIImage imageNamed:@"back_button"] stretchableImageWithLeftCapWidth:14 topCapHeight:0]

Original Back Button Image:

Answer 1

The minimum width of the UIBarButtonItem is largely determined by the size of the image you provide. You should export your back arrow image from your editor so that there is only 1 pixel of tileable image content in the middle column of the image, such that the left and right portions can be used as the left and right caps:

Answer 2

As per the image, it seems image is stretched correctly. Just check the back button frame. Also please verify, if there is no whitespace in end of the string "Profile".

Answer 3

stretchableImageWithLeftCapWidth:topCapHeight is deprecated in iOS 5.

This doesn't answer your question. It's just a hint.

Deprecated UIImage Methods

Answer 4

I have an image with a noise texture on it and wanted to do the same thing. I finally arrived at this solution which I believe does exactly what you want (at least in iOS 6):

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] init];
UIImage *buttonBg = [[UIImage imageNamed:@"back-arrow.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 6)];
[backButton setBackButtonBackgroundImage:buttonBg forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
backButton.title = @"Back";

You can customize your edge insets to exclude portions that shouldn't stretch.