Skip to content

Instantly share code, notes, and snippets.

Last active April 26, 2020 23:34
Show Gist options
  • Save alanzeino/6619253 to your computer and use it in GitHub Desktop.
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];
Copy link

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

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.

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

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