iOS 7 barra de estado superposición de IU

Recientemente me actualicé a xcode 5 y cuando ejecuto mi aplicación en el simulador iOS, la pantalla de bienvenida se superpone a la barra de estado y cuando estás en la aplicación la barra de estado se superpone a los elementos de mi aplicación, como un botón Atrás en la parte superior izquierda esquina de mano de mi aplicación. Construyo mi aplicación usando phonegap 2.9. Alguna idea de cómo puedo hacer que esto se reproduzca correctamente.

Pantalla de bienvenida

UI

Puede resolver este problema si está usando guiones gráficos, como en esta pregunta: iOS 7: la barra de estado se superpone a la vista

Si no está usando el guión gráfico, puede usar este código en su AppDelegate.m en el 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); } 

También vea esta pregunta: Barra de estado y problema de barra de navegación en IOS7

En MainViewController.m inside: - (void)viewWillAppear:(BOOL)animated añade esto:

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

entonces la función final se verá así:

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

Lo que suelo hacer es agregar dos propiedades de clave-valor al archivo Info.plist .

enter image description here

El código fuente de las propiedades es:

enter image description here

Tengo un problema al abrir el navegador inApp con Phonegap. La solución de Gimi funcionó bien, pero cada vez que abrí el navegador inApp, la pantalla se reducía en la parte inferior. Así que agregué una statement if para verificar si el origen y de la vista web era 0. El navegador inApp ya no tiene el origen y 0, así que resolvió mi 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 solución no es realmente mía pero no puedo encontrar la fuente. ¡Espero eso ayude!

Coloque este fragmento de código en su archivo MainViewController.m en el proyecto de 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 "restred" 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); } } } 

Uso este código en el método ViewDidLoad.

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

Esto funciona al tratar de soportar versiones anteriores de iOS también.

De hecho, creo que la respuesta de Gimi es la mejor respuesta, ¡y he estado buscando mucho! Solo para agregar a la respuesta de Gimi, y también contestar la respuesta de ignacio-munizaga sobre esa respuesta, el código se ejecutará cada vez que aparezca la vista, lo que significa después de cerrar un navegador en línea, o después de la cámara, etc. así que puse un valor bool si el tamaño ya ha sido ajustado.

El código final se ve así:

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

Intente (app name)-Info.plist archivo de la aplicación (app name)-Info.plist en XCode y agregue la clave

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

Esto parece funcionar para mí sin problema.

Si está desarrollando para iOS 7, no recomendaría envolver la barra de estado en un rectángulo negro con el estilo iOS anterior. Simplemente integrelo en el diseño para obtener un aspecto de “pantalla completa” de iOS 7.

Puede usar este complemento para ajustar el color de la tinta de la barra de estado, u ocultarla o mostrarla en cualquier instancia de su aplicación.

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

Los métodos js son:

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

IMPORTANTE: También en su archivo de aplicación, configure UIViewControllerBasedStatusBarAppearance en NO .

Es mejor tener esto en info.plist

 UIStatusBarHidden  UIViewControllerBasedStatusBarAppearance  

esto no crea ninguna barra de estado.

Para abordar el problema de la barra de estado iOS7, podemos usar el siguiente código para Cordova / PhoneGap:

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

De todos modos, Cordova 3.1 pronto arreglará este y otros problemas para 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 la Guía de transición de Apple iOS7 ,

Específicamente,

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

funciona para mí cuando no quiero superponerme y tengo un UITableViewController.

Si está usando Cordova con Sencha Touch y está utilizando las barras de navegación / título normales de Sencha Touch, puede estirar la barra de navegación y reposicionar el contenido dentro de la barra de navegación para que se vea en casa en iOS 7. Simplemente agregue esto a la app.js (después de su última línea 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;"); } 

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

Esto es un poco hacky, lo sé, pero ahorra lidiar con él en el nivel Objective-C. Sin embargo, no será muy útil para aquellos que no usan Sencha Touch con Cordova.

Escriba el siguiente código dentro de AppDelegate.m en el evento didFinishLaunchingWithOptions (exactamente antes de su última línea de código ” return YES; “):

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

Voy a esperar tus comentarios! 🙂

En la propiedad del conjunto de archivos .plist:

 UIViewControllerBasedStatusBarAppearance  

Oculta la barra de estado.

El mejor enfoque que puede usar es cambiar el tamaño de la vista principal, especialmente si su aplicación utiliza un pie de página.

en MainViewController.m usando el método viewDidLoad, después de [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]; } 

entonces no necesitarás modificar ningún javascript en tu aplicación

Con el lanzamiento de iOS 7.0.4, el arreglo iOS7 se rompió en mi proyecto actual, ya que 7.0.4 funciona sin la solución. Así que se agregó un control menor para ejecutarlo solo si se ejecuta una versión menor de 3 o menos.

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

Comencé a seguir esta ruta, pero tengo mi propio control de navegación con una core view que deslizo dentro de un marco que generalmente está envolviendo el núcleo con una barra de título común y tabbar ; sin storyboard , sin UINavigationController .

Comenzó a complicarse rápidamente, agregando y restando los 20 píxeles de la barra de estado. Entonces una epifanía.

Hice una copia del .xib file , le dije a Xcode que me lo mostrara como un diseño iOS 7, realineé todo y puse un solo interruptor 6/7 en el código … al instante, todo funciona bien, y los recursos adicionales solo agregan 8K al paquete.

También podemos verificar esto dentro de nuestros archivos js

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

En el archivo .css define una clase para este

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

Desarrollé para iOS7 primero, pero para mantenerme compatible con iOS6 hago exactamente lo contrario de lo que sugirió Gimi: en MainViewController.m Configuré el origen y 20px y MainViewController.m la altura de vista en 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; } 

Muchas gracias hombre. Funcionó bien en:

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

Aquí está mi enfoque usando CSS y Javascript:

1) Defina lo siguiente en su CSS:

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

2) Agregue div-container con este id como primer elemento después de su -tag:

  

3) Filtra dispositivos iOS 7 y aplica cambios a través de 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'; } 

Algunas de las respuestas anteriores le darán una barra negra en la parte superior si configura su pantalla con un límite de 20px, mientras que otra reducirá su pantalla de vista web si usa webview.frame.size.height -20px; Pruebe este, entonces, funciona en cualquier ios y no es necesario cambiar CSS, poner adentro

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

// es IOS7 y sube

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

// obtener el tamaño de la pantalla del dispositivo

  CGRect screenBounds = [[UIScreen mainScreen] bounds]; 

// reduce la altura en 20px

  int x= screenBounds.size.height -20; 

// establece la vista superior de la web vista 20px por lo que está debajo de la barra de estado y reduce el tamaño en 20px

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

Para iPhoneX

Para todas las respuestas anteriores:

La altura de la barra de estado en el iPhoneX es 44 y no 20