barre d'état iOS 7 se chevauchant
J'ai récemment effectué une mise à niveau vers xcode 5 et lorsque je lance mon application dans le simulateur iOS, l'écran de démarrage recouvre la barre d'état et lorsque vous êtes dans l'application, la barre d'état recouvre des éléments de mon application, comme un bouton de retour situé en haut à gauche. coin de la main de mon application. Je construis mon application en utilisant phonegap 2.9. Des idées comment je peux obtenir ceci pour rendre correctement.
Vous pouvez résoudre ce problème si vous utilisez des scénarios, comme dans cette question: iOS 7 - La barre d'état recouvre la vue
Si vous n'utilisez pas de storyboard, vous pouvez utiliser ce code dans votre AppDelegate.m dans did finishlaunching:
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 également cette question: Problème de barre d’état et de barre de navigation dans IOS7
Dans MainViewController.m inside: - (void)viewWillAppear:(BOOL)animated, ajoutez 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;
}
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 (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 = 18;
viewBounds.size.height = viewBounds.size.height - 18;
self.webView.frame = viewBounds;
}
[super viewWillAppear:animated];
}
Ce que je fais habituellement, c’est d’ajouter deux propriétés clé-valeur au fichier Info.plist.
Le code source des propriétés est:
J'ai un problème pour ouvrir le navigateur InApp avec phonegap. La solution 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 la vus de la vue Web était à 0. Le navigateur inApp n'ayant plus la voi d'origine 0, 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 (e.g. 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 ça aide!
Placez cet extrait de code dans votre fichier MainViewController.m dans le 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 également lorsque vous essayez de prendre en charge les versions précédentes d’iOS.
Essayez d'aller dans le fichier (app name)-Info.plist de l'application 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.
En fait, j’ai trouvé que la réponse de Gimi était la meilleure, et j’ai beaucoup cherché!…. Juste pour ajouter à la réponse de Gimi, et pour répondre à la réponse d’ignacio-munizaga sur cette réponse, le code s’exécutera dès que la vue apparaît. , c’est-à-dire qu’après avoir fermé un navigateur en ligne, ou après une prise de vue, etc., je viens donc de mettre une valeur booléenne indiquant si la taille a déjà été ajustée.
Le code final ressemble à ceci:
bool sizeWasAdjusted = false;
- (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 (!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];
}
Si vous développez pour iOS 7, je ne vous recommanderais pas de placer la barre d'état dans un rectangle noir à l'ancien style iOS. Il suffit de l’intégrer à la conception pour un look "plein écran" plus iOS 7.
Vous pouvez utiliser ce plugin pour ajuster la couleur de l'encre de la barre d'état, ou pour 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 de liste d'applications, définissez UIViewControllerBasedStatusBarAppearance sur NO.
Mieux vaut avoir ces choses dans info.plist
<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
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 corrigera bientôt ce problème et d’autres 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);
}
De Guide de transition Apple iOS7 ,
Plus précisément,
self.automaticallyAdjustsScrollViewInsets = YES;
self.edgesForExtendedLayout = UIRectEdgeNone;
fonctionne pour moi quand je ne veux pas me chevaucher et que j'ai un UITableViewController.
Si vous utilisez Cordova avec Sencha Touch et que vous utilisez les barres de navigation/titre normales de Sencha Touch, vous pouvez simplement étirer la barre de navigation et repositionner le contenu dans la barre de navigation de manière à ce qu'il soit comme à la maison sur iOS 7. Ajoutez simplement ceci dans 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/ )
C’est un peu hacky, je le sais, mais cela évite d’en traiter au niveau Objective-C. Ce ne sera toutefois pas très utile pour ceux qui n'utilisent pas Sencha Touch avec Cordova.
Écrivez le code suivant dans AppDelegate.m in didFinishLaunchingWithOptions event (exactement avant la dernière ligne de code " renvoyez YES; "):
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7)
{
[application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
}
J'attendrai vos commentaires! :)
Dans la propriété de jeu de fichiers .plist:
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
Il cache la barre de statut.
La meilleure approche que vous pouvez utiliser consiste à redimensionner la vue principale, en particulier si votre application utilise un pied de page.
sur MainViewController.m à l'aide de la méthode viewDidLoad, après [super viewDidLoad];
NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
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 pas besoin de modifier le javascript dans votre application
J'ai commencé à suivre cette voie, mais j'ai mon propre contrôle de navigation avec un core view que je glisse dans un cadre enveloppant généralement le noyau avec une barre de titre commune et tabbar; non storyboard, non 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 comme une mise en page iOS 7, réaligné tout, et mis un simple commutateur 6/7 en code .. instantanément, tout fonctionne correctement, et les ressources supplémentaires ajoutent seulement 8K à le paquet.
Avec la version iOS 7.0.4, le correctif iOS7 est tombé en panne dans mon projet actuel, car la version 7.0.4 ne fonctionnait pas avec le correctif . Nous avons donc ajouté un contrôle mineur pour qu'il ne soit exécuté que si vous exécutiez la version mineure 3 ou moins.
NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
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];
}
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;
}
Merci beaucoup mec. Cela a bien fonctionné sur:
MAC OS X 10.9.1 - Xcode 5.0.2 - cordova 3.3 - jQuery mobile 1.3.2.
Je développe d'abord pour iOS7, mais afin de rester compatible avec iOS6, je fais exactement le contraire de ce que suggère Gimi: dans MainViewController.m, je règle le y Origin 20px et j'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;
}
Voici mon approche utilisant 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) Ajoutez div-container avec cet identifiant comme tout premier élément après votre balise <body>-:
<body>
<div id="ios7-statusbar-fix"></div>
…
3) Filtrez les appareils iOS 7 et appliquez 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';
}
Pour iPhone X
Pour toutes les réponses ci-dessus:
La hauteur de la barre d'état sur l'iPhone X est 44 et non 20
Certaines des réponses ci-dessus vous donneront une barre noire en haut si vous définissez votre écran lié à 20px, d'autres garderont votre écran Webview réduit si vous utilisez webview.frame.size.height -20px; Essayez celui-ci alors, il fonctionne sur tous les ios et pas besoin de changer de CSS, mettre à l'intérieur
- (void)webViewDidFinishLoad:(UIWebView*)theWebView {
// est-ce IOS7 et plus
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
// récupère la taille de l'écran de l'appareil
CGRect screenBounds = [[UIScreen mainScreen] bounds];
// réduire la hauteur de 20px
int x= screenBounds.size.height -20;
// définit la webview top pos 20px de sorte qu'elle se trouve sous la barre d'état et réduise la taille de 20px
[theWebView setFrame:CGRectMake(0, 20, theWebView.frame.size.width, x )];
}