Customizing the BackBarButtonItem

Question

I'm trying to customize the backBarButtonItem with a custom image (the text 'back' is included in that image), here is the current result:

https://i.stack.imgur.com/jn9u4.png

Does anyone know why this might be happening?

Here is my code on viewDidLoad (actually runs both on the parent controller and then again on the new controller that has the back button)

UIImage *backButtonImage = [UIImage imageNamed:@"Graphics/Shared/navigation_back_button.png"];


UIBarButtonItem *backButton = [[UIBarButtonItem alloc] 
                               initWithImage:backButtonImage
                               style:UIBarButtonItemStylePlain 
                               target:nil 
                               action:nil];


self.navigationItem.backBarButtonItem = backButton;

Edit: I'm using iOS 5 by the way! Maybe appearance proxy is usable but so far when I tried to use it for the back button stuff (in appDelegate) the app simple crashes.

be sure to approve the appropriate answer! – Neil Jun 06 '12 at 02:02 — Neil, Jun 06 '12 at 02:02

score 17 · Accepted Answer · edited May 23 '17 at 12:09

Okay I solved the issue, using a bit of a rough trick, but at least it works. If anyone does come up with a more standard solution though, please let me know!

Here's my code:

UIImage *backButtonImage = [[UIImage imageNamed:@"Graphics/Shared/navigation_back_button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage  forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, backButtonImage.size.height*2) forBarMetrics:UIBarMetricsDefault];

This is in my appdelegate's method:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

To stop it stretching when using it as a background, I used the idea from iOS 5: How to implement a custom (image) back button

But then tweaked it so rather than having to set-

self.title = @" ";

On every view load (and that might also mess with the nav bar title itself)

I just set the offset for the 'back' button text to twice the image height, so you'll never see it.

Why go to all this trouble, rather than use a left button item with it's own method to pop the view controller?

The main reason is that you lose the standard back button sliding animation for changing views. Also, this means I don't need to use a custom button or write a custom method for going back. It simply just works.

Hope this solves someone else's problem too, I know I was stuck on it for a good 3 hours!

check my answer which avoid the image-stretching and title-position-adjust issue. — Gon, Feb 13 '14 at 14:17

score 0 · Answer 2 · answered Jun 06 '12 at 01:32

0

The "UIBarButtonItemStylePlain" designation specifies a button style.

Try creating your back button this way instead:

UIImage *backButtonImage = [UIImage imageNamed:@"Graphics/Shared/navigation_back_button.png"];
CGRect frameimg = CGRectMake(0, 0, backButtonImage.size.width, backButtonImage.size.height);
UIButton *someButton = [[UIButton alloc] initWithFrame:frameimg];
[someButton setBackgroundImage:backButtonImage forState:UIControlStateNormal];
// you have to do your own backButtonAction to pop the view controller, b.t.w.
[someButton addTarget:self action:@selector(backButtonAction:)
     forControlEvents:UIControlEventTouchUpInside];
[someButton setShowsTouchWhenHighlighted:YES];

UIBarButtonItem *backButton =[[UIBarButtonItem alloc] initWithCustomView:someButton];
[someButton release];

self.navigationItem.backBarButtonItem = backButton;

answered Jun 06 '12 at 01:32

Michael Dautermann

88,797
17
166
215

Thanks for the attempt Michael, but when I use your code the back button simply reverts completely the normal blue style with no customization. (I think I've tried a lot of variants similar to this method already) I notice from your 'release' line of code that I should point out I'm using iOS 5! So this probably changes a lot, my mistake for not making that clear originally. – Dom Chapman Jun 06 '12 at 02:46
4

Apple's docs state: **When configuring your bar button item, do not assign a custom view to it; the navigation item ignores custom views in the back bar button anyway.** – Ashley Mills Jul 12 '13 at 09:20
1

@AshleyMills is quite right. This answer only works for `leftBarButtonItem` and `rightBarButtonItem`, not for `backBarButtonItem`. – Gon Feb 13 '14 at 14:04

score 0 · Answer 3 · answered Jun 06 '12 at 01:37

0

In this case I found it easier to replace the barButtonItem, simply with a custom button.

Not exactly sure how you have designed you project, but it worked for me.

The setting for the custom button

The back button, resulting look

Then attach this code to it:

//go back to the previous screen

-(IBAction)back{

[self dismissModalViewControllerAnimated:YES];

}

answered Jun 06 '12 at 01:37

Neil

2,004
3
23
48

1

That's all good but then I lose the standard sliding animation when I pop the view controller. It also happens for this project I'm not using interface builder or nib/xib files at all. I'm programmatically creating everything. – Dom Chapman Jun 06 '12 at 02:44
Not really anwering his question. You lose the ability to use and utilize the standard UINavigationBar – Avi Shukron Aug 18 '12 at 08:29

score 0 · Answer 4 · answered Feb 13 '14 at 14:15

I tried it a lot today and got this solution. It separated background image and button image, seems easier and not that tricky.

UIImage *bgImage = [UIImage imageNamed:@"the-same-image-as-your-navbar-background-image"];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:bgImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:bgImage forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];

UIImage *buttonImage = [UIImage imageNamed:@"your-back-button-image"];
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:buttonImage style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.backBarButtonItem = backButton;

Customizing the BackBarButtonItem

4 Answers4