Skip to content

Instantly share code, notes, and snippets.

@alanzeino
Last active April 26, 2020 23:34
  • Star 48 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save alanzeino/6619253 to your computer and use it in GitHub Desktop.
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
Copy link

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

@argentini
Copy link

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
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
Copy link

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