Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Combining a strong colour with a blurred and translucent UINavigationBar in iOS 7.
// cheers to @stroughtonsmith for helping out with this one
UIColor *barColour = [UIColor colorWithRed:0.13f green:0.14f blue:0.15f alpha:1.00f];
UIView *colourView = [[UIView alloc] initWithFrame:CGRectMake(0.f, -20.f, 320.f, 64.f)];
colourView.opaque = NO;
colourView.alpha = .7f;
colourView.backgroundColor = barColour;
self.navigationBar.barTintColor = barColour;
[self.navigationBar.layer insertSublayer:colourView.layer atIndex:1];
@aaronshekey

This comment has been minimized.

Copy link

aaronshekey commented Sep 21, 2013

After transitioning between views, the colourView ends up on top of any navigationItems you've specified. Any idea how to fix that?

@argentini

This comment has been minimized.

Copy link

argentini commented Sep 24, 2013

While testing a storyboard-based master/detail I was able to get the effect to work through to the detail view by adding similar code to the viewDidLayoutSubviews event in the detail controller. But navigating back yields a strange bug where the title text becomes translucent while the rest is fine. Still working through this. So anyone with input please chime in.

@brandons

This comment has been minimized.

Copy link

brandons commented Oct 3, 2013

I ended up doing three things to fix my transitioning issues.

  1. I experienced an issue where the layer would actually block touches in the navigation bar when pushing another view controller on the stack. To fix this I set userInteractionEnabled to NO.

  2. I tweaked the barTintColor property on my navigation bars and the backgroundColor of my nav view so the translucent bars on a plain content background look identical to my non translucent nav bars.

  3. During navigation bar transitions, I remove the sublayer and set the navigation bar to non-translucent. Then once the transition finishes, I readd the sublayer and reenable transluceny.

It's not a perfect solution as you can slightly see changes in translucency if your colours aren't perfectly matched, but it's certainly better than before.

My navigation controller delegates look like this.

- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    self.navigationBar.translucent = NO;
    [self.navColourView.layer removeFromSuperlayer];
}

- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    self.navigationBar.translucent = YES;
    [self.navigationBar.layer insertSublayer:self.navColourView.layer atIndex:1];
}
@ericallam

This comment has been minimized.

Copy link

ericallam commented Oct 10, 2013

I've done the same thing above but my navigation delegate is a bit different. Instead of toggling the translucency it just moves the layer back into position on didShowViewController:

- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{

    [self.strongColorView.layer removeFromSuperlayer];
    [navigationController.navigationBar.layer insertSublayer:self.strongColorView.layer atIndex:1];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.