How can I make my navigation bar uniformly semi-transparent?

Question

I'm writing an app on iOS 7, and I can't seem to get a handle on the transparency of the navigationBar and the toolbar, how can I set the navigation bar to black at 50% opacity?

I've read the transition to ios7 guide and I've watched the wwdc13 lecture 214, but my status bar still has a different transparency than the rest of the attached nav bar.

Here is my code:

// APP-WIDE THEMING
[[UINavigationBar appearance] setBarStyle:UIBarStyleBlackOpaque];
[[UINavigationBar appearance] setBackgroundColor:[UIColor blueColor]];  
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

Here is the screenshot of my problem: http://grab.by/qiyU

Did you try to set translucent to your `navigationBar`. – Tarek Hallak Sep 16 '13 at 07:01 — Tarek Hallak, Sep 16 '13 at 07:01

Echo Liao · Answer 1 · 2014-07-02T04:02:03.020

8

Set the background image to nil, and set the background color with alpha.

[ctrl.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; 
ctrl.navigationController.navigationBar.backgroundColor = [UIColor colorWithRed:0 Green:0 Blue:0 Alpha:.5];

edited Jul 02 '14 at 04:02

answered Jun 30 '14 at 09:09

Echo Liao

91
1
5

score 0 · Answer 2 · edited May 23 '17 at 12:16

According to the answer posted here it's possible to create a transparent UINavigationBar: How to draw a transparent UIToolbar or UINavigationBar in iOS7

However you want to create a semitransparent navigationbar. For that as far as I can tell you have to create a 1 px large image containing a black color with 50% opacity. Add this as backgroundimage for your Navigationbar.

This snippet should do the trick:

[[UINavigationBar appearance] setBarStyle:UIBarStyleDefault];
UIImage* sti = [UIImage imageNamed:@"EMT_SemiTransparent.png"];
[[UINavigationBar appearance] setBackgroundImage:sti forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBackgroundColor:UIColor.clearColor];

score -1 · Answer 3 · edited May 23 '17 at 12:16

-1

try setting key [View controller-based status bar appearance] to NO in your pList file as well.

i've run into some funkiness with the status bar not seeming to be affected by changes in code and this solved it for me.

reference: https://stackoverflow.com/a/18184831/2962193

edited May 23 '17 at 12:16

Community

1
1

answered Mar 04 '14 at 05:25

Garrett Taiji

45
3

-1 not given by me. i will remove my comment however. – Shiva Saurabh Mar 11 '14 at 05:40

score -2 · Answer 4 · answered Sep 16 '13 at 12:23

-2

Set the alpha value to make it transparent.

[[UINavigationBar appearance] setAlpha:0.5f];

answered Sep 16 '13 at 12:23

Nandha

6,746
2
23
33

That'd also make the subviews semi transparent. – Mercurial Aug 02 '15 at 10:00

How can I make my navigation bar uniformly semi-transparent?

4 Answers4

Linked