替换导航栏后退按钮而不拉伸答案

【问题标题】：Replace Navigation bar back button without stretching替换导航栏后退按钮而不拉伸
【发布时间】：2014-12-13 04:45:08
【问题描述】：

我正在尝试替换默认导航栏后退按钮图像：

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

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

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

我得到的是：

我想要的是：

怎么样？原始图像为 11x44 点。

编辑：应用后，

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

我明白了：

我花了几个小时试图让箭头向下移动，使其与导航栏中的标题文本垂直对齐，但无济于事。我看到其他线程有同样的问题，但没有解决方案。为什么会如此困难？似乎每个替换后退按钮图像的人都必须处理这个问题。

【问题讨论】：

您必须将图像设置为 1x、2x、3x
当然。 2x 图像是 22x88。 back_button@2x.png

标签： ios uiimage uinavigationbar uibarbuttonitem uinavigationitem

【解决方案1】：

试试这个代码：

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];
}

不要忘记将 3 张图片 1x、@2x 和 @3x 放入您的图片资源中。

请检查苹果文档中的 UIElements 是否有后退按钮。

谢谢！

【讨论】：

有趣。我从未听说过 backIndicatorImage。这几乎可以工作，但后退按钮在 64 像素导航栏中垂直居中。由于状态栏占据了顶部 20px，我需要图像垂直居中在导航栏的下部 44px 中。有什么办法可以做到这一点，还是我必须以 64 像素的高度保存图像？
@soleil 尝试在 resizableImageWithCapInsets 中进行一些更改，我认为您可以做到。
我也从未听说过backIndicatorImage。感谢分享。
@AshishKakkad 使用 resizableImageWithCapInsets 会破坏 backIndicatorImage 的全部目的，对吗？我只需要支持iOS 7+。请参阅我对原始问题的编辑。

【解决方案2】：

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

【讨论】：