Custom NavigationBar Buttons Look Different in iOS 7

Question

Building my app using the iOS 7 SDK changes the look of the navigation bar and its buttons:

The top image shows what it looks like when run on a device using iOS 6, the bottom image shows the same app running on a device using iOS 7.

The navigation bar is created using a background image:

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

The left bar button is created by:

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

I'm more concerned with what is happening to the button appearance. What are the "best practices" for handling this transition to the new iOS 7 look?

Answer 1

Navigation bar background:

You need to use a stretchable image to fill the navigation bar. Because your image appears to be a fairly simple gradient, something like this should get you close:

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

and your background image becomes a 1w x 64h png.

Bar button image:

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

}

as the default behavior is to paint your non-transparent image pixels with the application tint color, "always original" mode will prevent that from happening.

Answer 2

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

Answer 3

the button is in the same place, but you navigation bar moves upwards. Probably try to block this attempt of "want full screen".

See in the project definition page General -> Deployment info -> Status bar style or in code if you override it.

Besides, there's new in iOS property setSelectedImage, check it too