iosdev

How to remove UINavigationBar's bottom border / shadow in iOS 7

Aug 29, 2014 3 minute read

One of the most annoying visual things Apple introduced in iOS 7 is inability to remove the navigation bar shadow image. iOS 7 UI is perfect to create seamless transition between the content and the top of the screen.

The only issue is that darn line at the bottom. There is no property on UINavigationBar to hide it. There is shadowImage which allows you to change it, but can’t remove it – shadowImage = nil is the default which shows their default image. Even changing the shadowImage to 100% transparent image is not enough:

For a custom shadow image to be shown, a custom background image must also be set with the setBackgroundImage:forBarMetrics: method. If the default background image is used, then the default shadow image will be used regardless of the value of this property.

Brilliant. 😕 You can remove the shadow only if you also kill the blur, like this:

[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] 
			forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [[UIImage alloc] init];

Can’t help to think this was not properly thought through, but given the hectic schedule Apple engineers had for iOS 7, something had to give. Anw, with no other avenue left, it’s subview walkthrough time.

<UINavigationBar: 0xb486860; baseClass = UINavigationBar; frame = (-160 0; 320 1); opaque = NO; autoresize = W; gestureRecognizers = <NSArray: 0xb4887e0>; layer = <CALayer: 0xb4869c0>>
| <_UINavigationBarBackground: 0xb487090; frame = (0 0; 320 1); opaque = NO; autoresize = W; userInteractionEnabled = NO; layer = <CALayer: 0xb4871c0>>
|    | <_UIBackdropView: 0xb48fb20; frame = (0 0; 320 1); opaque = NO; autoresize = W+H; userInteractionEnabled = NO; layer = <_UIBackdropViewLayer: 0xc6aec50>>
|    |    | <_UIBackdropEffectView: 0xc6af6e0; frame = (0 0; 320 1); clipsToBounds = YES; opaque = NO; autoresize = W+H; userInteractionEnabled = NO; layer = <CABackdropLayer: 0xc6af9a0>>
|    |    | <UIView: 0xc6b0150; frame = (0 0; 320 1); opaque = NO; autoresize = W+H; userInteractionEnabled = NO; layer = <CALayer: 0xc6b02b0>>
|    | <UIImageView: 0xb4873d0; frame = (0 1; 320 0.5); userInteractionEnabled = NO; layer = <CALayer: 0xb4874a0>>
| <UINavigationItemView: 0xb488da0; frame = (160 -16.5; 0 0); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xb48c630>>
|    | <UILabel: 0xb48c9e0; frame = (0 33; 0 0); clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xb48cae0>>

That 0.5pt tall UIImageView is the target.

[self.subviews enumerateObjectsUsingBlock:^(UIView *v, NSUInteger idx, BOOL *stop) {
	if ([NSStringFromClass([v class]) rangeOfString:@"BarBackground"].location != NSNotFound) {
		[v.subviews enumerateObjectsUsingBlock:^(UIView *v, NSUInteger idx, BOOL *stop) {
			if ([v isKindOfClass:[UIImageView class]]) {
				if (CGRectGetHeight(v.bounds) == 0.5) {
					[v removeFromSuperview];
					*stop = YES;
				}
			}
		}];
		*stop = YES;
	}
}];

I coded this as defensively as possible, to not crush in case something changes in the future. Get the RTCleanNavigationBar subclass on GitHub and use it like this:

UIViewController *vc = ...;
UINavigationController *nc = [[UINavigationController alloc] 
    initWithNavigationBarClass:[RTCleanNavigationBar class] 
    toolbarClass:nil];
[nc setViewControllers:@[vc]];

This works perfectly, does not trigger any issues with app review. Hopefully it stays like that for the foreseeable time and Apple gives us a proper way to do this.