Barre d'état iOS 7 avec Phonegap

Question

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

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

J'ai essayé de décaler l'ensemble de la page web à l'aide de CSS, mais cela ne semble pas fonctionner. Existe-t-il un moyen de décaler l'ensemble de l'UIWebView ou de faire en sorte que la barre d'état se comporte comme elle le faisait dans iOS6 ?

Remerciements

Answer 1

J'ai trouvé une réponse dans un autre fil, mais je vais répondre à la question au cas où quelqu'un d'autre se la poserait.

Il suffit de remplacer le viewWillAppear en MainViewController.m avec 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];
}

Answer 2

En plus de la solution de redimensionnement proposée par Ludwig Kristoffersson, je recommande de modifier 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;
}

Answer 3

Installez ce plugin pour Phonegap : https://build.phonegap.com/plugins/505

Et utilisez les paramètres corrects 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

Answer 4

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

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Answer 5

Réponse https://stackoverflow.com/a/19249775/1502287 a fonctionné pour moi, mais j'ai dû le modifier un peu pour qu'il fonctionne avec le plugin caméra (et potentiellement d'autres) et une balise méta viewport avec "height=device-height" (ne pas définir la partie hauteur aurait fait apparaître le clavier au-dessus de la vue dans mon cas, cachant certaines entrées en cours de route).

Chaque fois que vous ouvrirez la vue de la caméra et que vous retournerez dans votre application, la méthode viewWillAppear sera appelée et votre vue sera réduite de 20px.

De plus, la hauteur de l'appareil pour la fenêtre d'affichage inclurait les 20 px supplémentaires, ce qui rendrait le contenu défilable et 20 px plus haut que la fenêtre d'affichage.

Voici la solution complète au problème de l'appareil photo :

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

Pour ce qui est du problème de l'affichage, ajoutez ceci (en utilisant jQuery) dans l'écouteur de l'événement "deviceready" (prêt à l'emploi) :

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).
        // I don't know if it is 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 de visualisation 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.