interfaccia utente iOS 7 sovrapposta all’interfaccia utente

Di recente ho eseguito l’upgrade a xcode 5 e quando eseguo la mia app nel simulatore iOS la schermata iniziale si sovrappone alla barra di stato e quando ci si trova nell’app la barra di stato si sovrappone agli elementi della mia app, come un pulsante indietro che ho in alto a sinistra angolo della mia app. Costruisco la mia app usando phonegap 2.9. Qualche idea su come posso farlo per renderlo correttamente.

splashscreen

UI

Puoi risolvere questo problema se stai usando gli storyboard, come in questa domanda: iOS 7 – La barra di stato si sovrappone alla vista

Se non stai utilizzando lo storyboard, puoi utilizzare questo codice nel tuo AppDelegate.m in fase di 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); } 

Vedi anche questa domanda: Barra di stato e problema della barra di navigazione in IOS7

In MainViewController.m all’interno: - (void)viewWillAppear:(BOOL)animated aggiungere questo:

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

quindi la funzione finale sarà simile a questa:

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

Quello che faccio di solito è aggiungere due proprietà chiave-valore al file Info.plist .

inserisci la descrizione dell'immagine qui

Il codice sorgente delle proprietà è:

inserisci la descrizione dell'immagine qui

Ho un problema nell’apertura del browser inApp con PhoneGap. La correzione di Gimi funzionava bene, ma ogni volta che aprivo il browser inApp lo schermo si restringeva in basso. Quindi ho aggiunto un’istruzione if per verificare se l’origine y della webview fosse 0. Il browser inApp non ha più l’origine 0, quindi ha risolto il mio problema.

 // 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 soluzione non è mia ma non riesco a trovare la fonte. Spero che sia d’aiuto!

Inserisci questo snippet di codice nel tuo file MainViewController.m nel progetto 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); } } } 

Io uso questo codice nel metodo ViewDidLoad.

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

Questo funziona quando provi a supportare anche versioni precedenti di iOS.

In realtà, ho trovato la risposta di Gimi come la migliore risposta, e ho cercato molto! Giusto per aggiungere la risposta di Gimi, e rispondere anche alla risposta di ignacio-munizaga su quella risposta, il codice verrà eseguito ogni volta che appare la vista, il che significa dopo aver chiuso un browser in linea, o dopo il rullino fotografico ecc. Quindi ho appena messo un valore bool affermando se la dimensione è già stata regolata.

Il codice finale assomiglia a:

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

Prova ad andare nel file dell’app (app name)-Info.plist in XCode e aggiungi la chiave

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

Questo sembra funzionare per me senza problemi.

Se stai sviluppando per iOS 7, non ti consiglio di inserire la barra di stato in un rettangolo nero vecchio stile iOS. Basta integrarlo con il design per un look iOS 7 “fullscreen”.

Puoi utilizzare questo plug-in per regolare il colore dell’inchiostro della barra di stato, oppure nasconderlo o mostrarlo in qualsiasi istanza della tua app.

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

I metodi js sono:

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

IMPORTANTE: anche nel set di file plist dell’app UIViewControllerBasedStatusBarAppearance su NO .

Meglio avere queste cose in info.plist

 UIStatusBarHidden  UIViewControllerBasedStatusBarAppearance  

questo non rende affatto la barra di stato.

Per risolvere il problema della barra di stato iOS7, possiamo usare il seguente codice per Cordova / PhoneGap:

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

In ogni caso Cordova 3.1 risolverà presto questo e altri problemi per 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); } 

Dalla Guida alla transizione di Apple iOS7 ,

In particolare,

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

funziona per me quando non voglio sovrapporre e ho un UITableViewController.

Se stai usando Cordova con Sencha Touch e stai usando le normali barre di navigazione / titolo Sencha Touch, puoi semplicemente allungare la barra di navigazione e riposizionare il contenuto all’interno della barra di navigazione in modo che appaia come a casa su iOS 7. Basta aggiungerlo app.js (dopo l’ultima riga 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;"); } 

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

Questo è un po ‘hacky, lo so, ma si risparmia di affrontarlo a livello Objective-C. Non sarà molto buono per chi non usa Sencha Touch con Cordova, però.

Scrivi il codice seguente all’interno di AppDelegate.m nell’evento didFinishLaunchingWithOptions (esattamente prima dell’ultima riga di codice ” return YES; “):

 if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { [application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone]; } 

Aspetterò il tuo feedback! 🙂

Nella proprietà del file set .plist:

 UIViewControllerBasedStatusBarAppearance  

Nasconde lo statusBar.

L’approccio migliore che è ansible utilizzare è ridimensionare la vista principale, specialmente se l’applicazione utilizza un piè di pagina.

su MainViewController.m utilizzando il metodo viewDidLoad, dopo [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]; } 

quindi non dovrai modificare alcun javascript nella tua applicazione

Con il rilascio di iOS 7.0.4, la correzione iOS7 si è interrotta nel mio progetto attuale, poiché 7.0.4 funziona senza la correzione. Quindi aggiunto un controllo minore per eseguirlo solo se si esegue una release minore di 3 o meno.

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

Ho iniziato a seguire questa strada, ma ho il mio controllo di navigazione con una core view che inserisco in una cornice che di solito avvolge il core con una barra del titolo e una barra della barra tabbar ; no storyboard , no UINavigationController .

Ha iniziato a complicarsi rapidamente, aggiungendo e sottraendo i 20 pixel della barra di stato. Quindi un’illuminazione.

Ho fatto una copia del .xib file , .xib file detto a Xcode di mostrarmelo come un layout di iOS 7, ho riallineato tutto e messo un singolo switch 6/7 nel codice .. all’istante, tutto funziona correttamente e le risorse aggiuntive si aggiungono solo 8K al pacchetto.

Possiamo anche controllare questo nei nostri file js

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

Nel file .css definire una class per questo

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

Sviluppo per iOS7, ma per mantenere la compatibilità con iOS6 faccio esattamente l’opposto di quanto suggerito da MainViewController.m in MainViewController.m imposto l’origine y 20px su e aumenta l’altezza della vista di 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; } 

Mille grazie amico. Ha funzionato bene su:

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

Ecco il mio approccio usando CSS e Javascript:

1) Definisci quanto segue nel tuo CSS:

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

2) Aggiungi div-container con questo ID come primo elemento dopo il tuo -tag:

  

3) Filtra i dispositivi iOS 7 e applica le modifiche tramite 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'; } 

Alcune delle risposte di cui sopra ti daranno una barra nera in alto se imposterai il tuo schermo a 20px, altre continueranno a ridurre la tua schermata webview se usi webview.frame.size.height -20px; Prova questo poi, funziona su qualsiasi ios e non c’è bisogno di cambiare css, inserire dentro

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

// è IOS7 e versioni successive

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

// ottiene la dimensione dello schermo del dispositivo

  CGRect screenBounds = [[UIScreen mainScreen] bounds]; 

// riduci l’altezza di 20px

  int x= screenBounds.size.height -20; 

// imposta la webview top pos 20px così è sotto la barra di stato e riduci la dimensione di 20px

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

Per iPhoneX

Per tutte le risposte sopra:

L’altezza della barra di stato in iPhoneX è 44 e non 20