3

I'm trying to replace the default nav bar back button image:

UIImage *backButtonImage = [UIImage imageNamed:@"back_button"] ;

backButtonImage = [backButtonImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, backButtonImage.size.width, 0, 0)];

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

What I get is this: enter image description here

What I want is this: enter image description here

How? The original image is 11x44 points.

EDIT: After applying this,

[UINavigationBar appearance].backIndicatorImage = backButtonImage;
[UINavigationBar appearance].backIndicatorTransitionMaskImage = backButtonImage;

I get this:enter image description here

I've spent hours trying to get the arrow to move down so that it's vertically aligned with the title text in the navigation bar, to no avail. I've seen other threads with the same problem, but no solution. Why would this be so difficult? It seems like something everyone who replaces the back button image would have to deal this.

2

2 Answers 2

4

Try this code :

UIImage *backBtnIcon = [UIImage imageNamed:@"backNavIcon.png"];

if (([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)) {
    [UINavigationBar appearance].backIndicatorImage = backBtnIcon;
    [UINavigationBar appearance].backIndicatorTransitionMaskImage = backBtnIcon;
}
else{
UIImage *backButtonImage = [backBtnIcon resizableImageWithCapInsets:UIEdgeInsetsMake(0, backBtnIcon.size.width - 1, 0, 0)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage  forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, -backButtonImage.size.height*2) forBarMetrics:UIBarMetricsDefault];
}

Don't forget to put the 3 images 1x, @2x and @3x in your image assets.

Please check the UIElements at apple document for back button.

Thanks!

4
  • 1
    Interesting. I had never heard of backIndicatorImage. This almost works, but the back button gets centered vertically in the 64 px nav bar. Since the status bar takes up the top 20px, I need the image vertically centered in the lower 44px of the nav bar. Is there any way to do this or do I have to save the image out with a 64px height?
    – soleil
    Dec 13, 2014 at 4:59
  • @soleil try to do some changes inside resizableImageWithCapInsets I think you can do it. Dec 13, 2014 at 6:23
  • 1
    I, too, had never heard of backIndicatorImage. Thanks for sharing this.
    – Anon
    Dec 13, 2014 at 7:03
  • @AshishKakkad using resizableImageWithCapInsets would defeat the whole purpose of backIndicatorImage right? I only need to support iOS 7+. See my edit to the original question.
    – soleil
    Dec 13, 2014 at 16:35
1

You can create a new UIImage using CGContextRef base on your @"back_button" image, draw a 1 point width transparent space at the right of it, so you can call resizableImageWithCapInsets:UIEdgeInsetsMake(0, backButtonImage.size.width - 1, 0, 0).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.