Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get the right color in iOS7 translucent navigation bar

How can I get the right coloring for my translucent navigation bars in iOS 7? The navigation bar just adjusts the given color to a much brighter one. Changing brightness or saturation of the color also doesn´t deliver the right result.

Anyone having the same trouble? It seems to work somehow, looking at Facebook: they´re having their colors and translucent navigation bars.

Edit: Just to make it clear: I need the Bar to be translucent, not transparent (with some alpha), not solid! http://en.wikipedia.org/wiki/Transparency_and_translucency

Edit: Now posted to Apple BugReporter

like image 612
stk Avatar asked Sep 19 '13 12:09

stk


People also ask

How do I change the color of my navigation controller?

Tap the Gear icon next to Active App on the home screen and you can disable coloring for certain apps, or override the default color if you'd prefer another. If you'd rather keep it at one color, choose Static Color on the home screen. Tap the Gear to select your color.

How do I get rid of the transparent navigation bar?

If you want to remove the opacity or transparency from the sticky navigation bar, just navigate to Theme Options -> General -> Additional CSS and copy/paste this code and save changes.

How do I change the navigation bar on my Iphone?

A user changes the navigation bar's style, or UIBarStyle , by tapping the “Style” button to the left of the main page. This button opens an action sheet where users can change the background's appearance to default, black-opaque, or black- translucent.


1 Answers

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]]; 
like image 50
SomeGuy Avatar answered Sep 27 '22 18:09

SomeGuy