UIBarButtonItem appearance and setBackButtonBackgroundImage

Question

I change my back button when pushing a new viewcontroller in my navigationcontroller. But it doesnt look nice and its stretched. Also, how can I remove the "News" title in my back button? here's my code. see the image

and the code is

[[UIBarButtonItem appearance] setBackButtonBackgroundImage:[UIImage imageNamed:@"back_button.png"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

I want to achieve something like this http://i228.photobucket.com/albums/ee262/romano2717/photo4.png

Solution

Use the following code to put the image in position.

int imageSize = 20; //REPLACE WITH YOUR IMAGE WIDTH

UIImage *barBackBtnImg = [[UIImage imageNamed:@"NavBackButton"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, imageSize, 0, 0)];

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

You can use resizableImageWithCapInsets to specify which pixels should not be stretched. If you put your image-width in there it won't stretch your image.

You don't have to put it in the .m file btw. (You could use the appDelegate.m file) just make sure it get's called before the NavigationBar is drawn.

Comments

[Diffy]

When I add this code the back button is gone after pushing the new viewcontroller to the navigation.

[Cyrille]

This crashes with -[_UIBarItemAppearance setBackBarButtonItem:]: unrecognized selector sent to instance 0x208448d0 on 6.0.1

[ArdenDev]

any idea how to remove the title ??

[Tieme]

Sure: [[self navigationItem] setTitle:nil];

[Tieme]

Or do you mean the button's title?

[dulgan]

I'd like to know the trick to remove the buttons title for back button in the whole app ;)

[Munna89]

try [[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(-99, -99) forBarMetrics:UIBarMetricsDefault];

[Morkrom]

^ title position adjustment is NOT a good UIAppearance solution... the back button's frame is still set for it's title, resulting in misalignment issues on smaller screens.