自定义 NavigationBar 按钮在 iOS 7 中看起来不同

Posted 2023-03-12

【中文标题】自定义 NavigationBar 按钮在 iOS 7 中看起来不同

【英文标题】：Custom NavigationBar Buttons Look Different in iOS 7

【发布时间】：2013-09-26 20:52:30

【问题描述】：

使用 ios 7 SDK 构建我的应用会改变导航栏及其按钮的外观：

上图显示了在使用 iOS 6 的设备上运行时的外观，下图显示了在使用 iOS 7 的设备上运行的相同应用。

导航栏是使用背景图片创建的：

UIImage *navigationBarBackgroundImage = [[UIImage imageNamed:@"MyTopNavigationBackground"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 4, 0)];

UINavigationBar *bar = [UINavigationBar appearanceWhenContainedIn:[MyNavigationController class], nil];
[bar setBackgroundImage:navigationBarBackgroundImage forBarMetrics:UIBarMetricsDefault];
[bar setTintColor:[UIColor colorWithRed:0.17 green:0.62 blue:0.23 alpha:1.0]];

左栏按钮的创建者：

- (UIBarButtonItem *)slideoverMenuBarButtonItem 
    return [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"bar_button_icon_menu.png"]
                                        style:UIBarButtonItemStylePlain
                                       target:self
                                       action:@selector(slideoverMenu)];

我更关心按钮外观发生了什么。处理向新 iOS 7 外观过渡的“最佳做法”是什么？

【参考方案1】：

导航栏背景：

您需要使用可拉伸的图像来填充导航栏。因为您的图像看起来是一个相当简单的渐变，所以这样的事情应该会让您接近：

[[UINavigationBar appearance] setBackgroundImage:[navigationBarBackgroundImage stretchableImageWithLeftCapWidth:0 topCapHeight:0]];

你的背景图片变成 1w x 64h png。

条形按钮图片：

使用[UIImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]

 UIImage *buttonImage = [UIImage imageNamed:@"bar_button_icon_menu.png"];
 return [[UIBarButtonItem alloc] initWithImage:[buttonImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
                                            style:UIBarButtonItemStylePlain
                                           target:self
                                           action:@selector(slideoverMenu)];

由于默认行为是使用应用程序着色颜色绘制不透明图像像素，因此“始终原始”模式将防止这种情况发生。

【讨论】：

这在 iOS 7 上效果很好，但是在 iOS 6 下运行时我必须测试这个方法的可用性（imageWithRenderingMode）。

【参考方案2】：

由于状态栏现在是导航栏的一部分，因此您的自定义导航栏背景图像应该能够跨越状态栏和导航栏，或者应该足够高。

【参考方案3】：

按钮在同一个地方，但你的导航栏向上移动。大概是试图阻止这种“想要全屏”的尝试。

见项目定义页面General -> Deployment info -> Status bar style 或在代码中覆盖它。

另外，iOS 属性 setSelectedImage 中还有新的，也检查一下