无需拉伸即可替换导航栏后退按钮

Question

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:

What I want is this:

How? The original image is 11x44 points.

EDIT: After applying this,

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

I get this:

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.

Answer 1

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!

Answer 2

您可以使用基于@“back_button”图像的CGContextRef创建一个新的UIImage，在其右侧绘制一个1点宽度的透明空间，这样就可以调用resizableImageWithCapInsets:UIEdgeInsetsMake(0, backButtonImage.size.width - 1, 0, 0) 。