How to make PhoneGap status bar in iOS translucent?

Question

I am using PhoneGap to create an iOS application and it seems I can’t get the effect of full-screen / translucent state.

I set * -info.plist Status bar style to Transparent black style (alpha of 0.5) , which works while the splash screen is closed. But the status bar turns black when PhoneGap UIWebView is displayed.

I tried setting the meta tag apple-mobile-web-app-status-bar-style to black-translucent in my index.html, but this does not seem to have any effect.

I tried setting the phonegap.plist TopStatusBar parameter to blackTranslucent , but that also had no effect. What am I missing?

Answer 1

In fact, the status bar is translucent.

 - (void)webViewDidFinishLoad:(UIWebView *)theWebView { // only valid if StatusBarTtranslucent.plist specifies a protocol to handle if(self.invokeString) { // this is passed before the deviceready event is fired, so you can access it in js when you receive deviceready NSString* jsString = [NSString stringWithFormat:@"var invokeString = \"%@\";", self.invokeString]; [theWebView stringByEvaluatingJavaScriptFromString:jsString]; } [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleBlackTranslucent; CGRect frame = theWebView.frame; NSLog(@"The WebView: %f %f %f %f", frame.origin.x, frame.origin.y, frame.size.width, frame.size.height); frame = theWebView.superview.frame; NSLog(@"The WebView superview: %f %f %f %f", frame.origin.x, frame.origin.y, frame.size.width, frame.size.height); frame.size.height += frame.origin.y; frame.origin.y = 0; [theWebView.superview setFrame:frame]; return [ super webViewDidFinishLoad:theWebView ]; } 

The result of this code shows:

 The WebView: 0.000000 0.000000 320.000000 460.000000 The WebView superview: 0.000000 20.000000 320.000000 460.000000 

so fixing the webview.superview framework you can get the effect of UIStatusBarTranslucent

 CGRect frame = theWebView.superview.frame; frame.size.height += frame.origin.y; frame.origin.y = 0; [theWebView.superview setFrame:frame]; 

Answer 2

You can try adding to your Info.plist for your application:

 Key: Status bar style Value: Black translucent style 

or if you use source key value pairs

 <key>UIStatusBarStyle</key> <string>UIStatusBarStyleBlackTranslucent</string> 

This answer is adapted from another one asked by mwbrooks for a similar question. Give it a try.

( Phonegap - How to make a black status bar? )

Or maybe in your (void) viewDidLoad mode of your ** AppDelegate.m you can put:

 [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleBlackTranslucent;