Barra de estado de iOS 7 con Phonegap

En iOS 7, las aplicaciones Phonegap aparecerán debajo de la barra de estado. Esto puede dificultar el hacer clic en los botones / menús que se han colocado en la parte superior de la pantalla.

¿Hay alguien que sepa cómo solucionar este problema de la barra de estado en iOS 7 en una aplicación Phonegap?

Intenté compensar toda la página web con CSS, pero no parece funcionar. ¿Hay alguna manera de compensar todo el UIWebView o simplemente hacer que la barra de estado se comporte como lo hizo en iOS6?

Gracias

Encontré una respuesta en otro hilo, pero responderé la pregunta en caso de que alguien más se pregunte.

Basta con sustituir el viewWillAppearen MainViewController.mesto:

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

Además de la corrección de cambio de tamaño de Ludwig Kristoffersson, recomiendo cambiar el color de la barra de estado:

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

por favor, instale ese complemento para phonegap: https://build.phonegap.com/plugins/505

Y use la configuración correcta como a continuación, para controlar la superposición de la vista web:

<preference name="StatusBarOverlaysWebView" value="false" />

Para mí, con Phonegap 3.3.0 funciona.

Más información, en la página del proyecto Github: https://github.com/phonegap-build/StatusBarPlugin

Para ocultar la barra de estado, agregue el siguiente código en el archivo MainViewController.mdebajo de la función-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

La respuesta https://stackoverflow.com/a/19249775/1502287 funcionó para mí, pero tuve que cambiarlo un poco para que funcionara con el complemento de la cámara (y potencialmente con otros) y una metaetiqueta de la ventana gráfica con "height = device- height "(no establecer la parte de altura haría que el teclado apareciera sobre la vista en mi caso, ocultando algunas entradas en el camino).

Cada vez que abría la vista de la cámara y volvía a su aplicación, se llamaría al método viewWillAppear y su vista se reduciría en 20px.

Además, la altura del dispositivo para la ventana gráfica incluiría los 20 px adicionales, lo que hace que el contenido sea desplazable y 20 px más alto que la vista web.

Aquí está la solución completa para el problema de la cámara:

En MainViewController.h:

@interface MainViewController : CDVViewController
@property (atomic) BOOL viewSizeChanged;
@end

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

Ahora para el problema de la ventana gráfica, en su detector de eventos listo para el dispositivo, agregue esto (usando 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');
}

Aquí está la ventana gráfica que uso para otras versiones:

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />

Y todo funciona bien ahora.

Intente ingresar al (app name)-Info.plistarchivo de la aplicación en XCode y agregue las claves

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

Esto funciona para mí sin problema.

Para Cordova 3.1+, hay un complemento que se ocupa del cambio en el comportamiento de la barra de estado para iOS 7+.

Esto está bien documentado aquí , incluido cómo la barra de estado se puede revertir a su estado anterior a iOS7.

Para instalar el complemento, ejecute:

cordova plugin add org.apache.cordova.statusbar

Luego agregue esto a config.xml

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />

Resuelvo mi problema instalando org.apache.cordova.statusbary agregando en mi parte superior config.xml:

<preference name="StatusBarOverlaysWebView" value="false" /> 
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />

Estas configuraciones solo funcionan para iOS 7+

Referencia: http://devgirl.org/2014/07/31/phonegap-developers-guid/

Vea el nuevo complemento Cordova StatusBar que aborda ese problema exacto. http://docs.icenium.com/troubleshooting/ios7-status-bar#solution opción # 3

Utilizo la siguiente pieza de código para agregar una clase al cuerpo, si se detecta iOS7. Luego le doy estilo a esa clase para agregar un20px margen en la parte superior de mi contenedor. Asegúrese de tener instalado el complemento "dispositivo" y que este código esté dentro del evento "deviceready".

Después de leer, escuché que la próxima actualización de Phonegap (3.1, creo) admitirá mejor los cambios en la barra de estado de iOS7. Por lo tanto, esto puede ser necesario como una solución a corto plazo.

if(window.device && parseFloat(window.device.version) >= 7){
  document.body.classList.add('fix-status-bar');
}

La respuesta de Ludwig funcionó para mí.

Para cualquiera que haya usado su respuesta y ahora esté buscando cambiar el color del margen blanco (puede parecer trivial, pero me dejó perplejo), vea esto:

¿Cómo puedo cambiar el color de fondo de UIWebView después de deslizar hacia abajo UIWebView para solucionar el problema de superposición de la barra de estado de iOS7?

Otra forma es la compatibilidad con versiones anteriores . Haga el HTML de acuerdo con iOS 7(con un margen adicional de 20px en la parte superior) para darle ese full screenaspecto y corte ese margen adicional para iOS < 7.0. Algo como lo siguiente en 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;
  }
}

Esta solución no dejará una barra negra en la parte superior iOS 7.0y superior, lo que un usuario moderno de iOS encontrará extraño y antiguo .

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

¡Esperaré tus comentarios! :)

si usamos el complemento de la cámara para la galería de imágenes, la barra de estado volverá, así que para solucionar ese problema, agregue esta línea

 [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];

a

- (void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info {...}

función dentro de CVDCamera.m en la lista de complementos

Escriba el siguiente código dentro de AppDelegate.m en el evento didFinishLaunchingWithOptions al inicio.

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

Y arregle para iOS 7 y superior.

Para mantener la barra de estado visible en vertical pero ocultarla en horizontal (es decir, pantalla completa), intente lo siguiente:

En MainViewController.h:

@interface MainViewController : CDVViewController
@property (atomic) NSInteger landscapeOriginalSize;
@property (atomic) NSInteger portraitOriginalSize;
@end

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

Esta es una combinación de lo que encontré en esto y las discusiones vinculadas de StackOverflow, algo de código del complemento Cordova StatusBar (para no codificar el valor de 20px), y algunos encantamientos de mi parte (no soy un desarrollador de iOS, así que Busqué a tientas mi camino hacia esta solución).

En primer lugar, agregue el complemento de dispositivo en su proyecto. La identificación del complemento es: org.apache.cordova.device y el repositorio es: https://github.com/apache/cordova-plugin-device.git

Después de eso, use esta función y llámela en cada página o pantalla: -

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");
    }
}

La mejor manera de controlar el fondo de la barra de estado - 2017

Después de una frustración constante, muchas búsquedas en Internet, estos son los pasos que debe seguir:

1. Asegúrese de utilizar el complemento de la barra de estado
2. Agregue esta configuración a su config.xml:

<nombre de preferencia = "StatusBarOverlaysWebView" value = "false" />

3. Utilice el siguiente código en onDeviceReady

       StatusBar.show();
       StatusBar.overlaysWebView(false);
       StatusBar.backgroundColorByHexString('#209dc2');

Me funciona en iOS y Android.

¡Buena suerte!