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.

Solution 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.

Solution 2

Since iOS 7+ you should use backIndicatorImage property of UINavigationBar to set your custom indicator image. Also you need to provide backIndicatorTransitionMaskImage(you may use the same image for both).

Swift:

UINavigationBar.appearance().backIndicatorImage = UIImage(named: "back-button-image")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "back-button-image")

Objective-C:

[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back-button-image"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back-button-image"]];

Solution 3

swift version :-

    self.navigationController?.navigationBar.backIndicatorImage = UIImage(named: "HomeLeft@2x")
    self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = UIImage(named: "HomeLeft@2x")
    self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: UIBarButtonItemStyle.Plain, target: nil, action: nil)

put this in viewDidLoad()

Comments

[Darren]

Thanks for your reply and the documentation link. I am familiar with making stretchable images, but you can see from my image that it will not look good if stretched horizontally. I want to know if I can replace the button image, not just set the background image.

[Wain]

When creating the stretchable image you specify which parts are and aren't stretched. You just need to set that the section of the image containing the arrow is not stretched and the edges around it are.

[Darren]

Oh I see, sorry I misread your answer. But is it possible to not stretch the center of an image, and allow stretching of the edges? I thought resizableImageWithCapInsets allowed you to set edges of the image that won't be stretched. How can I create an image in which the edges are stretchable but the center is not?

[Wain]

I can do with reading more carefully too :-) You can set the stretch to treat the arrow as a 'corner' section of the image but the offset you get might not look great depending on the size of the original and how much it gets stretched.

[Darren]

OK thanks. Your answer is pretty much in line with what I was thinking, but I wanted to confirm it.

[Rob van der Veer]

How does this solution remove the text on the back button? I have the same problem (didn't want to start a new question). I used a workaround to set the alpha of the back button titleLabel.. Is there a proper way to set the back button to an image only (using the appearance proxy preferably)?