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 fait de cliquer sur les boutons/menus 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 toute la page Web avec CSS, mais cela ne semble pas fonctionner. Existe-t-il un moyen de désaxer l'intégralité de UIWebView ou de faire en sorte que la barre d'état se comporte comme dans iOS6?
Merci
J'ai trouvé une réponse sur un autre fil, mais je vais répondre à la question au cas où quelqu'un d'autre se demanderait.
Il suffit de remplacer le viewWillAppear dans MainViewController.m avec ça:
- (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;
}
veuillez installer 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.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 modifier un peu pour le faire fonctionner avec le plug-in de l'appareil photo (et éventuellement d'autres) et une méta de visualisation balise avec "height = device-height" (ne pas définir la partie hauteur ferait apparaître le clavier sur la vue dans mon cas, masquant certaines entrées le long du chemin).
Chaque fois que vous ouvriez la vue de la caméra et que vous reveniez à votre application, la méthode viewWillAppear était appelée et votre vue était réduite de 20 pixels.
En outre, la hauteur du périphérique pour la fenêtre d’affichage comprendrait les 20 pixels supplémentaires, rendant le contenu défilable et 20 pixels plus élevé 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 l'application (app name)-Info.plist fichier dans XCode et ajouter 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 plug-in 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 ramenée à son état antérieur à iOS7.
Pour installer le plugin, lancez:
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.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 n ° 3
Une autre façon de procéder est compatible avec les versions antérieures . Faire le HTML selon iOS 7 (avec une marge supplémentaire de 20 pixels) pour donner cette full screen Regardez et coupez 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 de barre noire au-dessus pour iOS 7.0 et ci-dessus, qu'un utilisateur iOS moderne trouvera impair et ancien.
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 (peut sembler trivial, mais m'a laissé perplexe), voir ceci:
J'utilise le morceau de code suivant pour ajouter une classe au corps, si iOS7 est détecté. J'appelle ensuite cette classe pour ajouter un 20px marge en haut de mon conteneur. Assurez-vous que le plug-in "device" est installé et que ce code est dans l'événement "deviceready".
En lisant, j'ai entendu dire que la prochaine mise à jour de Phonegap (3.1 je crois) permettra de mieux prendre en charge les modifications apportées à la barre d'état iOS7. Donc, cela peut être nécessaire comme solution à court terme.
if(window.device && parseFloat(window.device.version) >= 7){
document.body.classList.add('fix-status-bar');
}
Ecrivez le code suivant à l'intérieur de AppDelegate.m dans didFinishLaunchingWithOptions événement (exactement avant la dernière ligne de code "return YES;"):
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7)
{
[application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
}
J'attendrai vos commentaires! :)
La meilleure façon de contrôler l'arrière-plan de la barre d'état - 2017
Après des frustrations constantes et de nombreuses recherches sur Internet, voici les étapes à suivre:
- Assurez-vous que vous utilisez plug-in Status Bar
- Ajoutez ce paramètre à votre config.xml:
<préférence name = "StatusBarOverlaysWebView" value = "false" />
Utilisez le code suivant sur onDeviceReady
StatusBar.show(); StatusBar.overlaysWebView(false); StatusBar.backgroundColorByHexString('#209dc2');
Cela fonctionne pour moi dans iOS et Android.
Bonne chance!
Ecrivez le code suivant dans AppDelegate.m dans didFinishLaunchingWithOptions événement au début.
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 corriger pour iOS 7 ci-dessus et ci-dessus.
Tout d’abord, ajoutez le plugin Device dans votre projet. Le plugin Id 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-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");
}
}
Pour que la barre d’état reste visible en mode portrait tout en la masquant en mode paysage (plein écran), procédez comme 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 dans les discussions StackOverflow liées, du code du plug-in Cordova StatusBar (afin de ne pas coder en dur la valeur de 20px) et des incantations de ma part (je ne suis pas un développeur iOS alors J'ai tâtonné mon chemin à cette solution).
si nous utilisons un plugin de caméra pour la galerie d'images, la barre d'état réapparaîtra donc pour résoudre ce problème, veuillez ajouter cette ligne
[[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
à
- (void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info {...}
fonction dans CVDCamera.m dans la liste des plugins