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:

http://i.imgur.com/rFxFt.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.

Answer 1

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!

Answer 2

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;

Answer 3

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.

Then attach this code to it:

//go back to the previous screen

-(IBAction)back{

[self dismissModalViewControllerAnimated:YES];

}

Answer 4

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;