Achieving Bright, Vivid Colors for an iOS 7 Translucent Uinavigationbar

Achieving bright, vivid colors for an iOS 7 translucent UINavigationBar

iOS 7.0.3 UPDATE: As you see above 7.0.3 changed things. I've updated my gist. Hopefully this will just go away as people upgrade.

Original Answer:
I ended up with a hack combining the two of the other answers. I'm subclassing UINavigationBar and adding a layer to the back with some extra space to cover if any of the various height status bars are up. The layer gets adjusted in layout subviews and the color changes whenever you set barTintColor.

Gist: https://gist.github.com/aprato/6631390

setBarTintColor

  [super setBarTintColor:barTintColor];
  if (self.extraColorLayer == nil) {
    self.extraColorLayer = [CALayer layer];
    self.extraColorLayer.opacity = self.extraColorLayerOpacity;
    [self.layer addSublayer:self.extraColorLayer];
  }
  self.extraColorLayer.backgroundColor = barTintColor.CGColor;

layoutSubviews

  [super layoutSubviews];
  if (self.extraColorLayer != nil) {
    [self.extraColorLayer removeFromSuperlayer];
    self.extraColorLayer.opacity = self.extraColorLayerOpacity;
    [self.layer insertSublayer:self.extraColorLayer atIndex:1];
    CGFloat spaceAboveBar = self.frame.origin.y;
    self.extraColorLayer.frame = CGRectMake(0, 0 - spaceAboveBar, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + spaceAboveBar);
  }

Get the right color in iOS7 translucent navigation bar

The bar will adjust your color values.

Preferred method, for RGB >= 40 only, will give the most blurring

You can use this calculator and put in what you want the color to be when rendered on screen, it will tell you what to set the color of the barTintColor so when Apple adjusts it, it will show as intended

https://www.transpire.com/insights/blog/bar-color-calculator/

Edit: Note that these calculations are for a white background, and for lighter colours (rgb over 40, if you need darker, you will need to add a background layer like others have mentioned - although that will reduce the bar's blur)

In depth guide: https://www.transpire.com/insights/blog/custom-ui-navigationbar-colors-ios7/

Snippet:

@interface UnderlayNavigationBar : UINavigationBar

@end

.

@interface UnderlayNavigationBar ()
{
    UIView* _underlayView;
}

- (UIView*) underlayView;

@end

@implementation UnderlayNavigationBar

- (void) didAddSubview:(UIView *)subview
{
    [super didAddSubview:subview];

    if(subview != _underlayView)
    {
        UIView* underlayView = self.underlayView;
        [underlayView removeFromSuperview];
        [self insertSubview:underlayView atIndex:1];
    }
}

- (UIView*) underlayView
{
    if(_underlayView == nil)
    {
        const CGFloat statusBarHeight = 20;    //  Make this dynamic in your own code...
        const CGSize selfSize = self.frame.size;

        _underlayView = [[UIView alloc] initWithFrame:CGRectMake(0, -statusBarHeight, selfSize.width, selfSize.height + statusBarHeight)];
        [_underlayView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
        [_underlayView setBackgroundColor:[UIColor colorWithRed:0.0f green:0.34f blue:0.62f alpha:1.0f]];
        [_underlayView setAlpha:0.36f];
        [_underlayView setUserInteractionEnabled:NO];
    }

    return _underlayView;
}

@end

.

UIViewController* rootViewController = ...;
UINavigationController* navigationController = [[UINavigationController alloc] initWithNavigationBarClass:[UnderlayNavigationBar class] toolbarClass:nil];
[navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:0.0f green:0.0f blue:90.0f/255.0f alpha:1]];
[navigationController setViewControllers:@[rootViewController]];

Set NavigationBar Tint Color in iOS 7

You can set the bar tint color using the barTintColor property:

[[UINavigationBar appearance] setBarTintColor:[UIColor purpleColor]];

If you also don't want the navigation bar to be translucent, you can set the translucent property to NO.

Unfortunately, the translucent property is not available on the UINavigationBar appearance proxy, so you will have to set this property individually (in your storyboard, .xib, or in something like viewDidLoad in your controller).

UINavigatonBar blur with custom color in iOS 7

Simply set barStyle to UIBarStyleBlack.

Translucent Navigation Bar in iOS 7

I don't believe it to be possible to make the bar opaque anymore. The link you added does not have an opaque bar either. It is translucent with what looks to be a blue barTintColor.

What I suspect you are trying to do is have your content not covered by the translucent bar. In that case, look at UIViewController edgesForExtendedLayout. You probably want self.edgesForExtendedLayout = UIRectEdgeNone;.

---

Related Topics