iOS 7 Barre d'état avec Phonegap

Dans iOS 7, les applications Phonegap apparaîtront sous la barre d'état. Cela peut rendre difficile de cliquer sur les buttons / menus qui ont été placés en haut de l'écran.

Y at-il quelqu'un qui sait comment résoudre ce problème de barre d'état sur iOS 7 dans une application Phonegap?

J'ai essayé de compenser l'set de la page Web avec CSS, mais cela ne semble pas fonctionner. Existe-t-il un moyen de compenser la totalité de UIWebView ou simplement de faire en sorte que la barre d'état se comporte comme dans iOS6?

Merci

J'ai trouvé une réponse sur un autre sujet, mais je répondrai à la question au cas où quelqu'un d'autre se le requestrait.

Remplacez simplement viewWillAppear dans viewWillAppear avec ceci:

 - (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]; } 

En plus du correctif de redimensionnement de Ludwig Kristoffersson, je recommand de changer la couleur de la barre d'état:

 - (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)preferredStatusBarStyle{ return UIStatusBarStyleLightContent; } 

s'il vous plaît, installez ce plugin pour phonegap: https://build.phonegap.com/plugins/505

Et utilisez le paramètre correct comme ci-dessous pour contrôler la superposition de la vue Web:

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

Pour moi, avec Phonegap 3.3.0 cela fonctionne.

Plus d'informations sur la page du projet Github: https://github.com/phonegap-build/StatusBarPlugin

Pour masquer la barre d'état, ajoutez le code suivant dans le file MainViewController.m sous la fonction -(void)viewDidUnload

 - (BOOL)prefersStatusBarHidden { return YES; } 

Réponse https://stackoverflow.com/a/19249775/1502287 a fonctionné pour moi, mais j'ai dû le changer un peu pour le faire fonctionner avec le plugin de la camera (et potentiellement d'autres) et une balise META viewport avec "height = device- height "(ne pas régler la partie de la hauteur ferait apparaître le keyboard au-dessus de la vue dans mon cas, cachant certaines inputs en cours de route).

Chaque fois que vous ouvriez l'affichage de la camera et reveniez à votre application, la méthode viewWillAppear était appelée et votre vue diminuait de 20px.

En outre, la hauteur de l'appareil pour la window d'affichage inclurait les 20 px supplémentaires, rendant le contenu défilant et 20px plus élevé que la vue Web.

Voici la solution complète pour le problème de la camera:

Dans MainViewController.h:

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

Dans 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]; } 

Maintenant, pour le problème de viewport, dans votre écouteur d'événement deviceready, ajoutez ceci (en utilisant 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]') .setAtsortingbute('content', 'width=' + width + ',' + 'height=' + height + ',' + 'initial-scale=1.0,maximum-scale=1.0,user-scalable=no'); }) .sortinggger('orientationchange'); } 

Voici la window que j'utilise pour les autres versions:

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

Et tout fonctionne bien maintenant.

Essayez d'aller dans le file (app name)-Info.plist dans XCode et ajoutez les keys

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

Cela fonctionne pour moi sans problème.

Pour Cordova 3.1+, il y a un plugin qui traite du changement de comportement de la barre d'état pour iOS 7+.

Ceci est bien documenté ici , y compris comment la barre d'état peut être rétablie à son état pré-iOS7.

Pour installer le plugin, lancez:

 cordova plugin add org.apache.cordova.statusbar 

Ajoutez ensuite ceci au file config.xml

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

Je résous mon problème en installant le org.apache.cordova.statusbar et en ajoutant dans mon top config.xml :

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

Ces configurations ne fonctionnent que pour iOS 7+

Référence: http://devgirl.org/2014/07/31/phonegap-developers-guid/

Voir le nouveau plugin Cordova StatusBar qui résout ce problème. http://docs.icenium.com/troubleshooting/ios7-status-bar#solution option # 3

J'utilise le morceau de code suivant pour append une class au corps, si iOS7 est détecté. Je style ensuite cette class pour append une marge de 20px en haut de mon conteneur. Assurez-vous que le plug-in "device" est installé et que ce code se trouve dans l'événement "deviceready".

De lecture, j'ai entendu dire que la prochaine mise à jour de Phonegap (3.1 je crois) va mieux supporter les changements à la barre d'état iOS7. Donc, cela peut juste être nécessaire comme une solution à court terme.

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

La réponse de Ludwig a fonctionné pour moi.

Pour quiconque a utilisé sa réponse et cherche maintenant à changer la couleur de la marge blanche (peut sembler banal, mais m'a fait perplexe), voir ceci:

Comment puis-je modifier la couleur d'arrière-plan d'UIWebView après avoir glissé vers le bas de UIWebView pour corriger le problème de superposition de la barre d'état iOS7?

Une autre méthode est rétrocompatible . Faites le HTML selon iOS 7 (avec une marge de 20px supplémentaire sur le dessus) pour donner full screen look full screen et couper cette marge supplémentaire pour iOS < 7.0 . Quelque chose comme ce qui suit dans 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; } } 

Cette solution ne laissera pas une barre noire au-dessus pour iOS 7.0 et au-dessus, qu'un user moderne d'iOS finda étrange et vieux .

Écrivez le code suivant dans AppDelegate.m dans l'événement didFinishLaunchingWithOptions (exactement avant sa dernière ligne de code " return YES; "):

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

Je vais attendre vos commentaires! 🙂

si nous utilisons un plugin de camera pour la galerie d'images, la barre d'état reviendra afin de résoudre ce problème s'il vous plaît append cette ligne

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

à

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

fonction dans CVDCamera.m dans la list des plugins

Écrivez le code suivant dans AppDelegate.m dans l'événement didFinishLaunchingWithOptions au démarrage.

CGRect screenBounds = [[UIScreen mainScreen] bounds]; // Fixing status bar ------------------------------- NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedBySsortingng:@"."]; 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

Et corrige pour ci-dessus iOS 7 et ci-dessus.

Pour conserver la barre d'état visible dans le mode portrait, mais masquez-la en mode paysage (c'est-à-dire en mode plein écran), essayez ce qui suit:

Dans MainViewController.h :

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

Dans 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 sharedApplication] 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 sharedApplication].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]; } 

C'est une combinaison de ce que j'ai trouvé dans cette discussion et des discussions StackOverflow liées, du code du plugin Cordova StatusBar (pour ne pas coder en dur la valeur 20px), et quelques incantations de ma part (je ne suis pas un développeur iOS J'ai fouillé mon path vers cette solution).

Tout d'abord, ajoutez le plugin Device dans votre projet. L'ID du plugin est: org.apache.cordova.device et le référentiel est: https://github.com/apache/cordova-plugin-device.git

Après cela, utilisez cette fonction et appelez-le sur chaque page ou écran: –

 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 meilleure façon de contrôler l'arrière-plan de la barre d'état – 2017

Après une frustration continue, beaucoup de searchs sur Internet, voici les étapes à suivre:

  1. Assurez-vous d'utiliser le plug-in Status Bar
  2. Ajoutez ce paramètre à votre file config.xml:

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

  1. Utilisez le code suivant sur onDeviceReady

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

Cela fonctionne pour moi dans iOS et Android.

Bonne chance!