Interface utilisateur de la barre d’état iOS 7

Vous pouvez résoudre ce problème si vous utilisez des storyboards, comme dans cette question: iOS 7 – La barre d’état recouvre la vue

Si vous n’utilisez pas le storyboard, vous pouvez utiliser ce code dans votre AppDelegate.m

 if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { [application setStatusBarStyle:UIStatusBarStyleLightContent]; self.window.clipsToBounds =YES; self.window.frame = CGRectMake(0,20,self.window.frame.size.width,self.window.frame.size.height-20); } 

Voir aussi cette question: Problème de barre d’état et de barre de navigation dans IOS7

Dans MainViewController.m à l’ intérieur de: - (void)viewWillAppear:(BOOL)animated append ceci:

 //Lower screen 20px on ios 7 if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { CGRect viewBounds = [self.webView bounds]; viewBounds.origin.y = 18; viewBounds.size.height = viewBounds.size.height - 18; self.webView.frame = viewBounds; } 

donc la fonction de fin ressemblera à 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 = 18; viewBounds.size.height = viewBounds.size.height - 18; self.webView.frame = viewBounds; } [super viewWillAppear:animated]; } 

Ce que je fais habituellement est d’append deux propriétés de valeur-clé au fichier Info.plist .

Le code source des propriétés est:

J’ai un problème pour ouvrir le navigateur inApp avec phonegap. Le correctif de Gimi fonctionnait bien, mais chaque fois que j’ouvrais le navigateur inApp, l’écran était rétréci en bas. J’ai donc ajouté une instruction if pour vérifier si l’origine de la vue web était 0. Le navigateur inApp n’a plus l’origine y 0, donc il a résolu mon problème.

 // ios 7 status bar fix - (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) { if(self.webView.frame.origin.y == 0) { CGRect viewBounds = [self.webView bounds]; viewBounds.origin.y = 20; viewBounds.size.height = viewBounds.size.height - 20; self.webView.frame = viewBounds; } } [super viewWillAppear:animated]; } 

La solution n’est pas vraiment la mienne mais je ne trouve pas la source. J’espère que cela aide!

Placez cet extrait de code dans votre fichier MainViewController.m du projet phonegap.

 - (void)viewDidLayoutSubviews{ if ([self respondsToSelector:@selector(topLayoutGuide)]) // iOS 7 or above { CGFloat top = self.topLayoutGuide.length; if(self.webView.frame.origin.y == 0){ // We only want to do this once, or // if the view has somehow been "restored" by other code. self.webView.frame = CGRectMake(self.webView.frame.origin.x, self.webView.frame.origin.y + top, self.webView.frame.size.width, self.webView.frame.size.height-top); } } } 

J’utilise ce code dans la méthode ViewDidLoad.

  if ([self respondsToSelector:@selector(edgesForExtendedLayout)]) { self.edgesForExtendedLayout = UIRectEdgeNone; } 

Cela fonctionne lorsque vous essayez de prendre en charge les versions iOS précédentes.

En fait, j’ai trouvé que la réponse de Gimi était la meilleure réponse et j’ai beaucoup regardé! Juste pour append à la réponse de Gimi, et aussi répondre à la réponse d’ignacio-munizaga sur cette réponse, le code s’exécutera chaque fois que la vue apparaît, ce qui signifie après avoir fermé un navigateur, si la taille a déjà été ajustée.

Le code final ressemble à:

 bool sizeWasAdjusted = false; - (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 (!sizeWasAdjusted && [[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { CGRect viewBounds = [self.webView bounds]; viewBounds.origin.y = 18; viewBounds.size.height = viewBounds.size.height - 18; self.webView.frame = viewBounds; sizeWasAdjusted = true; } [super viewWillAppear:animated]; } 

Essayez d’entrer dans le fichier (app name)-Info.plist dans XCode et ajoutez la clé

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

Cela semble fonctionner pour moi sans problème.

Si vous développez pour iOS 7, je ne recommanderais pas d’envelopper la barre d’état dans un ancien style iOS de rectangle noir. Il suffit de l’intégrer au design pour un look plus “iOS 7”.

Vous pouvez utiliser ce plug-in pour ajuster la couleur de l’encre de la barre d’état ou la masquer ou l’afficher dans n’importe quelle instance de votre application.

https://github.com/jota-v/cordova-ios-statusbar

Les méthodes js sont:

 window.plugins.statusBar.hide(); window.plugins.statusBar.show(); window.plugins.statusBar.blackTint(); window.plugins.statusBar.whiteTint(); 

IMPORTANT: également dans votre fichier plist d’application, définissez UIViewControllerBasedStatusBarAppearance sur NO .

Mieux vaut avoir ces choses dans info.plist

 UIStatusBarHidden  UIViewControllerBasedStatusBarAppearance  

Cela ne fait aucune barre d’état du tout.

Pour résoudre le problème de la barre d’état iOS7, nous pouvons utiliser le code suivant pour Cordova / PhoneGap:

 function onDeviceReady() { if (parseFloat(window.device.version) === 7.0) { document.body.style.marginTop = "20px"; } } document.addEventListener('deviceready', onDeviceReady, false); 

Quoi qu’il en soit Cordova 3.1 va bientôt résoudre ce problème et d’autres problèmes pour iOS7.

  if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) { self.window.clipsToBounds =YES; [application setStatusBarStyle:UIStatusBarStyleLightContent]; self.window.frame = CGRectMake(0,20,self.window.frame.size.width,self.window.frame.size.height-20); } 

A partir du Guide de transition Apple iOS7 ,

Plus précisément,

 self.automaticallyAdjustsScrollViewInsets = YES; self.edgesForExtendedLayout = UIRectEdgeNone; 

travaille pour moi quand je ne veux pas me chevaucher et j’ai un UITableViewController.

Si vous utilisez Cordova avec Sencha Touch et que vous utilisez les barres de navigation / de titre Sencha Touch normales, vous pouvez simplement étirer la barre de navigation et repositionner le contenu dans la barre de navigation pour qu’elle apparaisse chez vous app.js (après votre dernière ligne Ext.Viewport.add ):

 // Adjust toolbar height when running in iOS to fit with new iOS 7 style if (Ext.os.is.iOS && Ext.os.version.major >= 7) { Ext.select(".x-toolbar").applyStyles("height: 62px; padding-top: 15px;"); } 

(Source: http://lostentropy.com/2013/09/22/ios-7-status-bar-fix-for-sencha-touch-apps/ )

Je sais que c’est un peu piraté, mais cela évite de le traiter au niveau Objective-C. Ce ne sera pas très bon pour ceux qui n’utilisent pas Sencha Touch avec Cordova.

É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 commentaires! 🙂

Dans la propriété set de fichiers .plist:

 UIViewControllerBasedStatusBarAppearance  

Il cache la barre d’état.

La meilleure approche que vous pouvez utiliser est de redimensionner la vue principale, surtout si votre application utilise un pied de page.

sur MainViewController.m en utilisant la méthode viewDidLoad, après [super viewDidLoad];

 NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedBySsortingng:@"."]; if ([[vComp objectAtIndex:0] intValue] >= 7) { // iOS 7 or above CGRect oldBounds = [self.view bounds]; CGRect newViewBounds = CGRectMake( 0, -10, oldBounds.size.width, oldBounds.size.height-20 ); CGRect newWebViewBounds = CGRectMake( 0, -20, oldBounds.size.width, oldBounds.size.height-40 ); [self.view setBounds:newViewBounds]; [self.webView setBounds:newWebViewBounds]; } 

alors vous n’aurez besoin de modifier aucun javascript dans votre application

Avec la sortie d’iOS 7.0.4, le correctif d’iOS7 s’est brisé dans mon projet actuel, car la version 7.0.4 fonctionne sans le correctif. Donc ajouté un contrôle mineur pour simplement l’exécuter si vous exécutez la version mineure 3 ou moins.

 NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedBySsortingng:@"."]; if ([[vComp objectAtIndex:0] intValue] == 7 && [[vComp objectAtIndex:1] intValue] == 0 && [[vComp objectAtIndex:2] intValue] <= 3 ) { CGRect oldBounds = [self.view bounds]; CGRect newViewBounds = CGRectMake( 0, -10, oldBounds.size.width, oldBounds.size.height-20 ); CGRect newWebViewBounds = CGRectMake( 0, -20, oldBounds.size.width, oldBounds.size.height-40 ); [self.view setBounds:newViewBounds]; [self.webView setBounds:newWebViewBounds]; } 

J’ai commencé à suivre cette voie, mais j’ai ma propre commande de navigation avec une core view que je glisse dans un cadre qui tabbar généralement le kernel avec une barre de titre et une barre de tabbar . pas de storyboard , pas d’ UINavigationController .

Cela a commencé à se compliquer rapidement, en ajoutant et en soustrayant les 20 pixels de la barre d’état. Puis une épiphanie.

J’ai fait une copie du .xib file , dit à Xcode de me le montrer sous la forme d’une mise en page iOS 7, tout réaligné et mis un code unique 6/7 dans le code .. instantanément, tout fonctionne correctement et les ressources supplémentaires ajoutent seulement 8K au paquet.

Nous pouvons également vérifier cela dans nos fichiers js

 if (parseFloat(window.device.version) >= 7.0) { $("body").addClass("ios7"); } 

Dans le fichier .css, définissez une classe pour cela

  .ios7 .ui-page, .ios7 .ui-header, .ios7 .ui-pane { margin-top: 17px !important; } 

Je développe pour iOS 7 en premier mais pour restr compatible avec iOS6, je fais exactement le contraire de ce que Gimi a suggéré – dans MainViewController.m je place l’origine y 20px et augmente la hauteur de vue de 20px:

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

Merci beaucoup homme. Cela a bien fonctionné sur:

MAC OS X 10.9.1 – Xcode 5.0.2 – cordova 3.3 – jQuery mobile 1.3.2 .

Voici ma démarche en CSS et Javascript:

1) Définissez les éléments suivants dans votre CSS:

 #ios7-statusbar-fix { width:100%; height:20px; background-color:white; position:fixed; z-index:10000; margin-top:-20px; display:none; } 

2) Ajouter div-container avec cet identifiant comme premier élément après votre tag :

  
 … 

3) Filtrer les appareils iOS 7 et appliquer les modifications via Javascript:

 if (navigator.userAgent.match(/(iPad.*|iPhone.*|iPod.*);.*CPU.*OS 7_\d/i)) { document.body.style.marginTop = '20px'; document.getElementById('ios7-statusbar-fix').style.display = 'block'; } 

Certaines des réponses ci-dessus vous donneront une barre noire en haut si vous définissez votre 20px lié à l’écran, d’autres conserveront votre écran webview si vous utilisez webview.frame.size.height -20px; Essayez celui-ci alors, il fonctionne sur n’importe quel ios et pas besoin de changer css, mis à l’intérieur

 - (void)webViewDidFinishLoad:(UIWebView*)theWebView { 

// est-ce l’IOS7 et plus

 if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { 

// obtenir la taille d’écran de l’appareil

  CGRect screenBounds = [[UIScreen mainScreen] bounds]; 

// réduit la hauteur de 20px

  int x= screenBounds.size.height -20; 

// définir la position supérieure de la vue Web 20px pour qu’elle soit sous la barre d’état et réduire la taille de 20px

  [theWebView setFrame:CGRectMake(0, 20, theWebView.frame.size.width, x )]; } 

Pour iPhoneX

Pour toutes les réponses ci-dessus:

La hauteur de la barre d’état dans l’iPhoneX est 44 et non 20