generar - Barra de estado de iOS 7 con Phonegap

cordova publish ios

Question

En iOS 7, las aplicaciones Phonegap aparecerán debajo de la barra de estado. Esto puede hacer que sea difícil hacer clic en los botones / menús que se colocaron en la parte superior de la pantalla.

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

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

Gracias

Answer 1

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

Answer 2

En primer lugar, agregue el complemento del dispositivo en su proyecto. Plugin Id es: org.apache.cordova.device y repository 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");
    }
}

Answer 3

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

Simplemente reemplace el viewWillAppear en MainViewController.m con esto:

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

Answer 4

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! :)

Answer 5

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 arriba iOS 7 y superior.

Answer 6

Intente (app name)-Info.plist archivo de la aplicación (app name)-Info.plist 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.

Answer 7

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

Cada vez que abra la vista de cámara y regrese a su aplicación, se invocará el 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 píxeles adicionales, haciendo que el contenido sea desplazable y 20px 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 el detector de eventos de dispositivo listo, agréguele 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.

Answer 8

Otra forma es ir hacia atrás compatible . Cree el HTML de acuerdo con iOS 7 (con un margen adicional de 20 píxeles en la parte superior) para darle ese aspecto de full screen y reducir 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 para iOS 7.0 o superior, que un usuario moderno de iOS encontrará raro y antiguo .

Answer 9

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

Esto está muy bien documentado here , incluyendo cómo la barra de estado se puede revertir a su estado anterior a iOS7.

Para instalar el complemento, ejecuta:

cordova plugin add org.apache.cordova.statusbar

A continuación, agregue esto a config.xml

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

Answer 10

Para mantener la barra de estado visible en vertical pero ocultarla en el paisaje (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 he encontrado en esto y las discusiones vinculadas de , algunos códigos del complemento Cordova StatusBar (para no codificar el valor de 20px), y algunos encantamientos de mi parte (no soy un desarrollador de iOS tan Busqué a tientas esta solución).

Answer 11

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

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Answer 12

Resuelvo mi problema instalando org.apache.cordova.statusbar y agregando mi config.xml superior:

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

Answer 13

Utilizo el siguiente fragmento de código para agregar una clase al cuerpo, si se detecta iOS7. Luego diseño esa clase para agregar un margen de 20 20px en la parte superior de mi contenedor. Asegúrese de tener instalado el complemento "dispositivo" y de que este código se encuentre dentro del evento "listo para el dispositivo".

Después de leer todo, he oído que la próxima actualización de Phonegap (creo que 3.1) será mejor para los cambios en la barra de estado de iOS7. Así que 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'');
}

Answer 14

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

Answer 15

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 de Github: https://github.com/phonegap-build/StatusBarPlugin

Answer 16

si usamos el complemento de la cámara para la galería de imágenes, la barra de estado volverá a aparecer, 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

Answer 17

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

Después de una frustración continua, mucha búsqueda en Internet, estos son los pasos que debe seguir:

1. Asegúrese de utilizar el https://build.phonegap.com/plugins/505
2. Agregue esta configuración a su config.xml:

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

3. Use el siguiente código en onDeviceReady

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

Funciona para mí en iOS y Android.

¡Buena suerte!

Answer 18

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 corregir el problema de superposición de la barra de estado iOS7?