Barre d'état iOS 7 avec Phonegap

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

Y a-t-il quelqu'un qui connaît un moyen de résoudre ce problème de barre d'état sur iOS 7 dans une application Phonegap?

J'ai essayé de compenser la page Web entière avec CSS mais cela ne semble pas fonctionner. Existe-t-il un moyen d'aimer le décalage de toute l'UIWebView ou simplement de faire en sorte que la barre d'état se comporte comme elle le faisait dans iOS6?

Merci

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

Remplacez simplement le viewWillAppearin MainViewController.mpar ceci:

- (void)viewWillAppear:(BOOL)animated {
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. 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 recommande 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 fichier MainViewController.msous la fonction-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

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

Chaque fois que vous ouvrez la vue de la caméra et que vous revenez à votre application, la méthode viewWillAppear est appelée et votre vue diminue de 20 pixels.

En outre, la hauteur de l'appareil pour la fenêtre comprendrait les 20 pixels supplémentaires, ce qui rendrait le contenu défilable et 20px plus haut que la vue Web.

Voici la solution complète au problème de la caméra:

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 (e.g. 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 la fenêtre d'affichage, dans votre écouteur d'événements 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]')
        .setAttribute('content',
          'width=' + width + ',' +
          'height=' + height + ',' +
          'initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
    })
    .trigger('orientationchange');
}

Voici la fenêtre 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 (app name)-Info.plistfichier de l'application dans XCode et ajoutez les clés

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 existe un plugin qui traite le 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 dans son état pré-iOS7.

Pour installer le plugin, exécutez:

cordova plugin add org.apache.cordova.statusbar

Ajoutez ensuite ceci à config.xml

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

Je résous mon problème en installant le org.apache.cordova.statusbaret 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 exact. http://docs.icenium.com/troubleshooting/ios7-status-bar#solution option # 3

J'utilise le morceau de code suivant pour ajouter une classe au corps, si iOS7 est détecté. Je stylise ensuite cette classe pour ajouter une 20pxmarge en haut de mon conteneur. Assurez-vous que le plugin "device" est installé et que ce code est à l'intérieur de l'événement "deviceready".

En lisant, j'ai entendu dire que la prochaine mise à jour de Phonegap (3.1 je crois) prendrait mieux en charge les modifications apportées à la barre d'état d'iOS7. Cela peut donc être nécessaire comme 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 tous ceux qui ont utilisé sa réponse et qui cherchent maintenant à changer la couleur de la marge blanche (cela peut sembler trivial, mais cela m'a laissé perplexe), voir ceci:

Comment puis-je changer la couleur d'arrière-plan d'UIWebView après avoir fait glisser UIWebView pour résoudre le problème de superposition de la barre d'état iOS7?

Une autre façon est de rétrocompatible . Créez le code HTML selon iOS 7(avec une marge supplémentaire de 20 pixels en haut) pour donner cet full screenaspect et réduire cette marge supplémentaire 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 de barre noire sur le dessus iOS 7.0et au-dessus, ce qu'un utilisateur iOS moderne trouvera étrange et ancien .

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

J'attendrai vos retours! :)

si nous utilisons le plug-in de caméra pour la galerie d'images, la barre d'état reviendra.Pour résoudre ce problème, veuillez ajouter cette ligne

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

à

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

fonction à l'intérieur de CVDCamera.m dans la liste 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 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

Et corrigez pour les versions supérieures à iOS 7 et supérieures.

Pour garder la barre d'état visible en portrait mais la masquer en paysage (c'est-à-dire en 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 (e.g. 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 liées à StackOverflow, 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 donc J'ai tâtonné mon chemin vers cette solution).

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

Ensuite, utilisez cette fonction et appelez-la 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, de nombreuses recherches sur Internet, voici les étapes à suivre:

1. Assurez-vous que vous utilisez le plugin de barre d'état
2. Ajoutez ce paramètre à votre config.xml:

<préférence name = "StatusBarOverlaysWebView" value = "false" />

3. Utilisez le code suivant sur onDeviceReady

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

Cela fonctionne pour moi sous iOS et Android.

Bonne chance!