Barra de estado de iOS 7 con Phonegap

En iOS 7, las aplicaciones de Phonegap aparecerán debajo de la barra de estado. Esto puede hacer que sea difícil hacer clic en los botones / menus que se han colocado en la parte superior de la pantalla.

¿Hay alguien que conozca una forma de solucionar este problema de barra de estado en iOS 7 en una aplicación Phonegap?

He tratado de compensar toda la página web con CSS, pero parece que no funciona. ¿Hay alguna manera de compensar todo el UIWebView o simplemente hacer que la barra de estado se comporte como lo hizo en iOS6?

Gracias

Encontré una respuesta en otro hilo, pero responderé la pregunta en caso de que alguien más se pregunte.

Simplemente reemplace la viewWillAppear en MainViewController.m con esto:

 - (void)viewWillAppear:(BOOL)animated { // View defaults to full size. If you want to customize the view's size, or its subviews (eg webView), // you can do so here. // Lower screen 20px on ios 7 if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { CGRect viewBounds = [self.webView bounds]; viewBounds.origin.y = 20; viewBounds.size.height = viewBounds.size.height - 20; self.webView.frame = viewBounds; } [super viewWillAppear:animated]; } 

Además del cambio de tamaño de Ludwig Kristoffersson, recomiendo cambiar el color de la barra de estado:

 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { CGRect viewBounds = [self.webView bounds]; viewBounds.origin.y = 20; viewBounds.size.height = viewBounds.size.height - 20; self.webView.frame = viewBounds; } self.view.backgroundColor = [UIColor blackColor]; } -(UIStatusBarStyle)prefernetworkingStatusBarStyle{ return UIStatusBarStyleLightContent; } 

por favor, instale ese complemento para phonegap: https://build.phonegap.com/plugins/505

Y use la configuration correcta como a continuación, para controlar la superposition de la vista web:

 <preference name="StatusBarOverlaysWebView" value="false" /> 

Para mí, con Phonegap 3.3.0 funciona.

Más información, en la página del proyecto Github: https://github.com/phonegap-build/StatusBarPlugin

Para ocultar la barra de estado, agregue el siguiente código en el file MainViewController.m bajo la function -(void)viewDidUnload

 - (BOOL)prefersStatusBarHidden { return YES; } 

Respuesta https://stackoverflow.com/a/19249775/1502287 trabajado para mí, pero tuve que cambiarlo un poco para que funcione con el complemento de la camera (y potencialmente otros) y una metalabel de vista con "height = device- altura "(no establecer la parte de altura haría que el keyboard aparezca sobre la vista en mi caso, ocultando algunas inputs a lo largo del path).

Cada vez que abra la vista de la camera y regrese a su aplicación, se llamará al método viewWillAppear y su vista se networkinguciría en 20px.

Además, la altura del dispositivo para la window gráfica includeía los 20 px adicionales, haciendo que el contenido se desplace y 20px más alto que la webview.

Aquí está la solución completa para el problema de la camera:

En MainViewController.h:

 @interface MainViewController : CDVViewController @property (atomic) BOOL viewSizeChanged; @end 

En MainViewController.m:

 @implementation MainViewController @synthesize viewSizeChanged; [...] - (id)init { self = [super init]; if (self) { // On init, size has not yet been changed self.viewSizeChanged = NO; // Uncomment to override the CDVCommandDelegateImpl used // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self]; // Uncomment to override the CDVCommandQueue used // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self]; } return self; } [...] - (void)viewWillAppear:(BOOL)animated { // View defaults to full size. If you want to customize the view's size, or its subviews (eg webView), // you can do so here. // Lower screen 20px on ios 7 if not already done if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7 && !self.viewSizeChanged) { CGRect viewBounds = [self.webView bounds]; viewBounds.origin.y = 20; viewBounds.size.height = viewBounds.size.height - 20; self.webView.frame = viewBounds; self.viewSizeChanged = YES; } [super viewWillAppear:animated]; } 

Ahora para el problema de window gráfica, en su detector de events de dispositivo, agregue esto (usando jQuery):

 if (window.device && parseFloat(window.device.version) >= 7) { $(window).on('orientationchange', function () { var orientation = parseInt(window.orientation, 10); // We now the width of the device is 320px for all iphones // Default height for landscape (remove the 20px statusbar) var height = 300; // Default width for portrait var width = 320; if (orientation !== -90 && orientation !== 90 ) { // Portrait height is that of the document minus the 20px of // the statusbar height = document.documentElement.clientHeight - 20; } else { // This one I found experimenting. It seems the clientHeight // property is wrongly set (or I misunderstood how it was // supposed to work). // Dunno if it's specific to my setup. width = document.documentElement.clientHeight + 20; } document.querySelector('meta[name=viewport]') .setAttribute('content', 'width=' + width + ',' + 'height=' + height + ',' + 'initial-scale=1.0,maximum-scale=1.0,user-scalable=no'); }) .trigger('orientationchange'); } 

Aquí está la window gráfica que uso para otras versiones:

 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" /> 

Y todo funciona bien ahora.

Intenta (app name)-Info.plist file de la aplicación (app name)-Info.plist en XCode y agrega las keys

 view controller-based status bar appearance: NO status bar is initially hidden : YES 

Esto funciona para mí sin problema.

Para cordova 3.1+, hay un complemento que trata con el cambio en el comportamiento de la barra de estado para iOS 7+.

Esto está bien documentado aquí , incluyendo cómo la barra de estado se puede revertir a su estado pre-iOS7.

Para instalar el complemento, ejecute:

 cordova plugin add org.apache.cordova.statusbar 

A continuación, agregue esto a config.xml

 <preference name="StatusBarOverlaysWebView" value="false" /> <preference name="StatusBarStyle" value="default" /> 

Resuelvo mi problema instalando la org.apache.cordova.statusbar y agregando mi config.xml superior:

 <preference name="StatusBarOverlaysWebView" value="false" /> <preference name="StatusBarBackgroundColor" value="#000000" /> <preference name="StatusBarStyle" value="lightcontent" /> 

Estas configuraciones solo funcionan para iOS 7+

Referencia: http://devgirl.org/2014/07/31/phonegap-developers-guid/

Consulte el nuevo complemento Cordova StatusBar que trata ese problema exacto. http://docs.icenium.com/troubleshooting/ios7-status-bar#solution opción # 3

Utilizo la siguiente pieza de código para agregar una class al cuerpo, si se detecta iOS7. Luego estilo esa class para agregar un margen de 20 20px en la parte superior de mi contenedor. Asegúrese de tener el complemento "device" instalado y de que este código está dentro del evento "deviceready".

De leer, he escuchado que la próxima actualización de Phonegap (3.1 creo) mejorará los cambios en la barra de estado de iOS7. Entonces, esto puede ser necesario como una solución a corto ploop.

 if(window.device && parseFloat(window.device.version) >= 7){ document.body.classList.add('fix-status-bar'); } 

La respuesta de Ludwig funcionó para mí.

Para cualquiera que usó su respuesta y ahora busca cambiar el color del margen blanco (puede parecer trivial, pero me dejó perplejo), vea esto:

¿Cómo puedo cambiar el color de background de UIWebView después de deslizar hacia abajo UIWebView para solucionar el problema de superposition de la barra de estado de iOS7?

Otra forma es volver atrás compatible . Realice el HTML de acuerdo con iOS 7 (con un margen adicional de 20 px en la parte superior) para ver esa full screen y cortar ese margen extra para iOS < 7.0 . Algo parecido a lo siguiente en MainViewController.m :

 - (void)viewDidLoad { [super viewDidLoad]; if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7.0) { CGRect viewBounds = [self.webView bounds]; viewBounds.origin.y = -20; viewBounds.size.height = viewBounds.size.height + 20; self.webView.frame = viewBounds; } } 

Esta solución no dejará una barra negra en la parte superior para iOS 7.0 y superior, que un usuario moderno de iOS encontrará extraño y viejo .

Escriba el siguiente código dentro de AppDelegate.m en el evento didFinishLaunchingWithOptions (exactamente antes de su última línea de código " return YES; "):

 if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { [application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone]; } 

¡Esperaré tus comentarios! 🙂

si utilizamos el complemento de la camera para la galería de imágenes, volverá a aparecer la barra de estado para solucionar ese problema, por favor agregue esta línea

  [[UIApplication shanetworkingApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone]; 

a

 - (void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info {...} 

function dentro de CVDCamera.m en la list de complementos

Escriba el siguiente código dentro de AppDelegate.m en el evento didFinishLaunchingWithOptions al comenzar.

CGRect screenBounds = [[UIScreen mainScreen] bounds]; // Fixing status bar ------------------------------- NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."]; if ([[vComp objectAtIndex:0] intValue] >= 7) { // iOS 7 or above CGRect newWebViewBounds = CGRectMake( 0, 20, screenBounds.size.width, screenBounds.size.height-20 ); screenBounds = newWebViewBounds; } // ------------------------------- Fixing status bar End

Y arreglar por encima de iOS 7 y superior.

Para mantener visible la barra de estado en el retrato pero ocultarla en el paisaje (es decir, pantalla completa), intente lo siguiente:

En MainViewController.h :

 @interface MainViewController : CDVViewController @property (atomic) NSInteger landscapeOriginalSize; @property (atomic) NSInteger portraitOriginalSize; @end 

En MainViewController.m :

 @implementation MainViewController @synthesize landscapeOriginalSize; @synthesize portraitOriginalSize; ... - (void)viewWillAppear:(BOOL)animated { // View defaults to full size. If you want to customize the view's size, or its subviews (eg webView), // you can do so here. [super viewWillAppear:animated]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientationChanged:) name:UIDeviceOrientationDidChangeNotification object:nil]; } - (void)orientationChanged:(NSNotification *)notification { [self adjustViewsForOrientation:[[UIApplication shanetworkingApplication] statusBarOrientation]]; } - (void)viewDidDisappear:(BOOL)animated { [[NSNotificationCenter defaultCenter]removeObserver:self name:UIDeviceOrientationDidChangeNotification object:nil]; } - (void) adjustViewsForOrientation:(UIInterfaceOrientation) orientation { if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { CGRect statusBarFrame = [UIApplication shanetworkingApplication].statusBarFrame; CGRect frame = self.webView.frame; switch (orientation) { case UIInterfaceOrientationPortrait: case UIInterfaceOrientationPortraitUpsideDown: { if (self.portraitOriginalSize == 0) { self.portraitOriginalSize = frame.size.height; self.landscapeOriginalSize = frame.size.width; } frame.origin.y = statusBarFrame.size.height; frame.size.height = self.portraitOriginalSize - statusBarFrame.size.height; } break; case UIInterfaceOrientationLandscapeLeft: case UIInterfaceOrientationLandscapeRight: { if (self.landscapeOriginalSize == 0) { self.landscapeOriginalSize = frame.size.height; self.portraitOriginalSize = frame.size.width; } frame.origin.y = 0; frame.size.height = self.landscapeOriginalSize; } break; case UIInterfaceOrientationUnknown: break; } self.webView.frame = frame; } } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. // Change this color value to change the status bar color: self.view.backgroundColor = [UIColor colorWithRed:0/255.0f green:161/255.0f blue:215/255.0f alpha:1.0f]; } 

Esta es una combinación de lo que encontré en este y las discusiones vinculadas de StackOverflow, algún código del complemento Cordova StatusBar (para no codificar el valor de 20px), y algunos conjuros de mi parte (no soy un desarrollador de iOS así Busqué mi path a esta solución).

En primer lugar, agregue el complemento Dispositivo en su proyecto. La ID del complemento es: org.apache.cordova.device y el repository es: https://github.com/apache/cordova-plugin-device.git

Después de eso, use esta function y llámela en cada página o pantalla:

 function mytopmargin() { console.log("PLATform>>>" + device.platform); if (device.platform === 'iOS') { $("div[data-role='header']").css("padding-top", "21px"); $("div[data-role='main']").css("padding-top", "21px"); } else { console.log("android"); } } 

La mejor manera de controlar el background de la Barra de estado – 2017

Después de una frustración constante, muchas búsquedas en Internet, estos son los pasos que debe seguir:

  1. Asegúrate de usar el complemento Barra de estado
  2. Agregue esta configuration a su config.xml:

<preference nombre = "StatusBarOverlaysWebView" value = "false" />

  1. Use el siguiente código en onDeviceReady

      StatusBar.show(); StatusBar.overlaysWebView(false); StatusBar.backgroundColorByHexString('#209dc2'); 

Me funciona en iOS y Android.

¡Buena suerte!