iOS 7中的自定义导航栏按钮看起来不同

时间:2013-09-26 20:52:31

标签: iphone ios objective-c ipad user-interface

使用iOS 7 SDK构建我的应用程序会更改导航栏及其按钮的外观:

navbar comparison

顶部图片显示在使用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外观过渡的“最佳实践”是什么?

3 个答案:

答案 0 :(得分:5)

导航栏背景

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

[[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)];

}

由于默认行为是使用应用程序色调颜色绘制非透明图像像素,“始终原始”模式将阻止这种情况发生。

答案 1 :(得分:1)

由于状态栏现在是导航栏的一部分,因此您的自定义导航栏背景图像应该能够跨状态栏和导航栏延伸,或者应该足够高,以便两者都可以。

答案 2 :(得分:0)

按钮位于同一位置,但导航栏向上移动。可能试图阻止这种“想要全屏”的尝试。

在项目定义页面中查看常规 - >部署信息 - >状态栏样式 或者在代码中覆盖它。

此外,iOS属性setSelectedImage中有新内容,请检查