StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAchieving bright, vivid colors for an iOS 7 translucent UINavigationBar
text
Body
copied!<hr> <p><strong>iOS 7.1 UPDATE</strong>: Looks like the workaround for modifying the alpha channel in the UINavigationBar has been ignored in this update. Right now, the best solution seems to be to just 'deal with it' and hope that whatever color you choose can render a translucent effect. I am still looking into ways of getting around this.</p> <hr> <p><strong>iOS 7.0.3 UPDATE</strong>: The <a href="https://github.com/croberts22/CRNavigationController" rel="nofollow noreferrer">GitHub library we created</a> has been updated to slightly work around this issue when using iOS 7.0.3. Unfortunately, there is no magic formula to support both colors created in iOS 7.0.2 and earlier and iOS 7.0.3. Seems like Apple improved the saturation, but at the cost of opacity (since the blurred translucency is dependant on the opacity level). I, along with a few others, are working on creating a much better fix for this.</p> <hr> <p>I'm sure many people have already come across the problem where iOS 7 tends to desaturate the color of a UINavigationBar that is translucent.</p> <p>My goal is to achieve a UINavigationBar with this tint color, but translucent:</p> <p><img src="https://i.stack.imgur.com/9RjRa.png" alt="UINavigationBar, Opaque"></p> <p>However, with translucency, I'm getting this. The background view is white, which I understand will make this view a bit lighter:</p> <p><img src="https://i.stack.imgur.com/RA5wt.png" alt="UINavigationBar, Translucent"></p> <p>Is there any way to achieve the original color while still having translucency? I've noticed Facebook has been able to get their bar to be their rich, blue color, as displayed here:</p> <p><img src="https://i.stack.imgur.com/C5jXs.png" alt="Facebook UINavigationBar, Translucent"></p> <p>..so I know there has to be some way. Background views obviously make a difference here, but most of their content is also gray/white. It seems that regardless of whatever bar tint color you put in, you are unable to get vivid colors under translucency.</p> <p><strong>Updated with solution.</strong></p> <p>Here's the solution that I ended up coming up with. I took <a href="https://stackoverflow.com/a/18906759/692051">aprato</a>'s solution and then encompassed the custom <code>UINavigationBar</code> within a <code>UINavigationController</code> subclass. <a href="https://github.com/croberts22/CRNavigationController" rel="nofollow noreferrer">I have created a repository that has this implementation listed below, along with an example app</a>. </p> <pre><code>//////////////////////////// // CRNavigationBar.m //////////////////////////// #import "CRNavigationBar.h" @interface CRNavigationBar () @property (nonatomic, strong) CALayer *colorLayer; @end @implementation CRNavigationBar static CGFloat const kDefaultColorLayerOpacity = 0.5f; static CGFloat const kSpaceToCoverStatusBars = 20.0f; - (void)setBarTintColor:(UIColor *)barTintColor { [super setBarTintColor:barTintColor]; if (self.colorLayer == nil) { self.colorLayer = [CALayer layer]; self.colorLayer.opacity = kDefaultColorLayerOpacity; [self.layer addSublayer:self.colorLayer]; } self.colorLayer.backgroundColor = barTintColor.CGColor; } - (void)layoutSubviews { [super layoutSubviews]; if (self.colorLayer != nil) { self.colorLayer.frame = CGRectMake(0, 0 - kSpaceToCoverStatusBars, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + kSpaceToCoverStatusBars); [self.layer insertSublayer:self.colorLayer atIndex:1]; } } @end </code></pre> <hr> <pre><code>//////////////////////////// // CRNavigationController.m //////////////////////////// #import "CRNavigationController.h" #import "CRNavigationBar.h" @interface CRNavigationController () @end @implementation CRNavigationController - (id)init { self = [super initWithNavigationBarClass:[CRNavigationBar class] toolbarClass:nil]; if(self) { // Custom initialization here, if needed. } return self; } - (id)initWithRootViewController:(UIViewController *)rootViewController { self = [super initWithNavigationBarClass:[CRNavigationBar class] toolbarClass:nil]; if(self) { self.viewControllers = @[rootViewController]; } return self; } @end </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload