Setting navigation bar back button image

Question

I want to set the back button in my UINavigationBar to this image:

I don't want the image to be embedded in the standard back button image, I just want this image to appear.

I know from looking at other questions that I can use:

[[UIBarButtonItem appearance] setBackButtonBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

to set the background image of the back button. But this causes the image to be stretched, and this particular image is not, as far as I can tell, suitable to be stretched.

Is there a way that I can replace back button image with my image?

I am supporting iOS 5.0 and up.

Answer 1

From the docs for UIBarButtonItem setBackButtonBackgroundImage:forState:barMetrics::

For good results, backgroundImage must be a stretchable image.

So, make it stretchable. I.e. specify which parts of the image can be stretched, and more importantly, which parts can not be stretched. In your case this will be the edges of the image (the part not containing the arrow).

UIImage resizableImageWithCapInsets:

The alternative is to supply a number of images (one for each bar metric) which is of a size that means it won't need to be scaled. raywenderlich user-interface-customization. But you're still going to want to make the image stretchable so you have control over what happens.

If you can't find a stretch spec which works, your fallback position is to create a template back button item for each instance of each view controller and set it as the backBarButtonItem for its navigation item.