在升级到 Xcode 5.1和 iOS 7.1之后的切换过程中,导航栏上出现了黑色阴影

当我在主细节导航控制器的父控制器和子控制器之间来回导航时,我在顶部导航栏的右侧看到一个黑影。在我升级到 Xcode 5.1之后就开始了。感觉很粗糙,让人分心。我怎样才能摆脱它?

27924 次浏览
self.navigationController.navigationBar.translucent = NO;

For Newer Swift Versions:

navigationController?.navigationBar.isTranslucent = false

This seems to be a bug that was introduced in iOS 7.1. In my case it is caused by a UIToolbar placed directly below the navigation bar. The dark shadow also appears in the translucent tab bar.

The shadow seems to be caused by the background view of the UIToolbar. I now use this workaround in the view controller with the toolbar that hides the toolbar's background view during the transition:

- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];


UIView *toolbarBackgroundView = [self.toolbar findViewRecursively:^BOOL(UIView *subview, BOOL *stop) {
BOOL isToolbarBackgroundView = ([subview isKindOfClass:[UIImageView class]]
&& [NSStringFromClass(subview.class) isEqualToString:@"_UIToolbarBackground"]);
if (isToolbarBackgroundView) {
*stop = YES;
}
return (! isToolbarBackgroundView);
}];
if (toolbarBackgroundView) {
// fade toolbar background view back in
[UIView animateWithDuration:0.1f animations:^{
toolbarBackgroundView.alpha = 1.0f;
}];
}
}


- (void)viewWillDisappear:(BOOL)animated
{
[super viewWillDisappear:animated];


UIView *toolbarBackgroundView = [self.toolbar findViewRecursively:^BOOL(UIView *subview, BOOL *stop) {
BOOL isToolbarBackgroundView = ([subview isKindOfClass:[UIImageView class]]
&& [NSStringFromClass(subview.class) isEqualToString:@"_UIToolbarBackground"]);
if (isToolbarBackgroundView) {
*stop = YES;
}
return (! isToolbarBackgroundView);
}];
if (toolbarBackgroundView) {
// hide toolbar background view
toolbarBackgroundView.alpha = 0.0f;
}
}

This is the code for [UIView findViewRecursively:]

@interface UIView (FindSubview)


- (UIView*)findViewRecursively:(BOOL(^)(UIView* subview, BOOL* stop))recurse;


@end


@implementation UIView (FindSubview)


- (UIView*)findViewRecursively:(BOOL(^)(UIView* subview, BOOL* stop))recurse {
for (UIView* subview in self.subviews) {
BOOL stop = NO;
if (recurse(subview, &stop)) {
UIView* view = [subview findViewRecursively:recurse];
if (view) return view;
} else if (stop) {
return subview;
}
}
return nil;
}


@end

I filed this Radar: http://openradar.appspot.com/16418845

Here is my variation...it requires much less code than tom's answer, and is more efficient. This is IF you want a translucent navigation bar, and also want to fix that shadow problem.

In the source ViewController (that is embedded in the Navigation Controller)...

- (void)viewDidAppear:(BOOL)animated
{
self.navigationController.navigationBar.translucent = YES;
}

and

 - (void)viewWillDisappear:(BOOL)animated
{
self.navigationController.navigationBar.translucent = NO;
}

The result is the same as what Tom does (visually, to the end user), and is easier to implement. Hope this helps...

While it's not the same as the stock iOS implementation, this is a nice way to fix the problem:

- (void)viewWillAppear:(BOOL)animated {
[UIView animateWithDuration:0.35f animations:^{
self.tabBarController.tabBar.alpha = 1.0f;
}];
}


- (void)viewWillDisappear:(BOOL)animated {
[UIView animateWithDuration:0.35f animations:^{
self.tabBarController.tabBar.alpha = 0.0f;
}];
}

You'll get a nice fade-in/fade-out animation of the tab bar. Add the code in the root UIViewController.

self.navigationController.view.backgroundColor = [UIColor whiteColor];

I solved this problem by setting the background color of the navigation controller's view.

It seems to happen with any bar (TabBar or ToolBar) that is translucent.
So one way to fix it is to set the _tabBar.translucent = NO; (in my case). This prevents the undesired shadow under the top navigation bar while leaving the navigation bar translucent. Unfortunately the bottom bar is no longer translucent though.

It can be set back to translucent but all this has to happen after the whole pushing animation is finished thus switching this property is well noticeable.

In case, however the bottom bar also has to be translucent and I don't want the user to see the change I resolved it with the following:

/*  create a simple quick animation of the bottom bar
just before pushing the new controller */
[UIView animateWithDuration:0.1
animations:^{
_tabBar.barTintColor = [UIColor colorWithWhite:0.97254901960784 alpha:1.0]; // this is the closest color for my case
_tabBar.translucent = NO;
} completion:^(BOOL finished) {
/* now when the animation that makes the bar not translucent
is finished we can push the new controller
the controller is instantiated before the animation code */
[self.navigationController pushViewController:controller animated:YES];
}];

Then in the viewDidAppear: I simply reverts that back:

[UIView animateWithDuration:0.1
animations:^{
_tabBar.barTintColor = nil;
_tabBar.translucent = YES;
}];

There is just a little change in the appearance especially but it's barely noticeable and it's way better than having the shadow under the navigation bar.

Hope it'll help others to keep bars translucent until Apple fix this behaviour as bars ARE meant to be hidden in some cases unlike it was suggested in other posts especially for the UITabBar

Or if you're using interface builder, you can just select Navigation Bar from your navigation controller and uncheck the Translucent checkbox between Style and Bar Tint in the Attributes Inspector to get rid of that weird effect -

Inspector

nonamelive's answer is perfect. To achieve the same thing in Interface Builder AND STILL KEEP TRANSLUCENCY, select the navigation controller and set a user defined runtime attribute view.backgroundColor as shown in the screenshot (in the Identity Inspector). Repeat for all navigation controllers that show this problem.

It seems that this whole problem occurs because the black color (or actually, no color) of UINavigationController is leaking through at the time CoreGraphics snapshots it at animation begin. So, setting it to white will prevent that.

Identity Inspector -> User Defined Runtime Attributes

self.navigationController!.navigationBar.translucent = false;

This works for me place it inside the function where you push the new ViewController

The following also works and leaves the Navigation Bar transparent:

[UIApplication sharedApplication].keyWindow.backgroundColor = [UIColor whiteColor];

This works for me in Swift

In AppDelegate on didFinishLaunchingWithOptions method, I set this:

UIApplication.shared.windows.first?.backgroundColor = .white

This works for me on iOS 13 with both light and dark themes and also on older iOS versions.

Add the following code to the AppDelegate to the application(didFinishLaunchingWithOptions) method:

if #available(iOS 13.0, *) {
window?.backgroundColor = UIColor.systemBackground
} else {
window?.backgroundColor = UIColor.white
}

For those, who have implemented tabBar and want to have both nav and tab bar still translucent, I found an easy workaround after dealing with painful "tabBar snapshot while push" workaround for a two years.

The trick is to:

  1. set clear backgroundView on the tab bar, that cause to layout the view controllers differently
  2. set a new BlurEffect view below first button
  3. constraint the blur view to tabBar (UIView)

Before I was using a snapshot of the tabBar and was setting alpha of the tabBar to 0, but that cause unwanted safeLayoutGuide offsets. As this solution does now access any private variables, I hope this is green to go to AppStore (I'm not yet there).

In viewDidLoad of my UITabBarController I set following:

tabBar.backgroundImage = UIImage()
let blurView = UIVisualEffectView()
blurView.effect = UIBlurEffect(style: .systemChromeMaterial)
blurView.frame = tabBar.bounds
blurView.translatesAutoresizingMaskIntoConstraints = false
blurView.isUserInteractionEnabled = false
tabBar.insertSubview(blurView, belowSubview: tabBar.subviews.first!)
let leadingConstraint = blurView.leadingAnchor.constraint(equalTo: tabBar.leadingAnchor, constant: 0)
let trailingConstraint = blurView.trailingAnchor.constraint(equalTo: tabBar.trailingAnchor, constant: 0)
let topConstraint = blurView.topAnchor.constraint(equalTo: tabBar.topAnchor, constant: 0)
let bottomConstraint = blurView.bottomAnchor.constraint(equalTo: tabBar.bottomAnchor, constant: 0)
NSLayoutConstraint.activate([leadingConstraint, trailingConstraint, topConstraint, bottomConstraint])

or:

//Setting background image to empty image to prevent a bug under top right navigation bar corner
tabBar.backgroundImage = UIImage()
//As that turns of the blur effect I am adding a new view imitating the same
let blurView = UIVisualEffectView()
blurView.effect = UIBlurEffect(style: .systemChromeMaterial)
blurView.frame = tabBar.bounds
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
blurView.isUserInteractionEnabled = false
tabBar.insertSubview(blurView, belowSubview: tabBar.subviews.first!)