Barra de status do iOS 7 com Phonegap

No iOS 7, os aplicativos Phonegap aparecerão abaixo da barra de status. Isso pode dificultar o clique em botões / menus que foram colocados na parte superior da tela.

Existe alguém que conhece uma maneira de corrigir esse problema da barra de status no iOS 7 em um aplicativo Phonegap?

Tentei deslocar a página da web inteira com CSS, mas não parece funcionar. Existe uma maneira de deslocar todo o UIWebView ou apenas fazer a barra de status se comportar como no iOS6?

obrigado

Eu encontrei uma resposta em outro tópico, mas responderei a pergunta caso outra pessoa se pergunte.

Basta substituir o viewWillAppearem MainViewController.mcom este:

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

Além da correção de redimensionamento de Ludwig Kristoffersson, recomendo alterar a cor da barra de status:

- (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 esse plugin para phonegap: https://build.phonegap.com/plugins/505

E use a configuração correta como abaixo, para controlar a sobreposição da visualização da web:

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

Para mim, com Phonegap 3.3.0 funciona.

Mais informações, na página do projeto Github: https://github.com/phonegap-build/StatusBarPlugin

Para ocultar a barra de status, adicione o seguinte código no arquivo MainViewController.msob a função-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

A resposta https://stackoverflow.com/a/19249775/1502287 funcionou para mim, mas tive que mudá-la um pouco para que funcionasse com o plug-in da câmera (e possivelmente outros) e uma metatag de janela de visualização com "height = device- height "(não definir a parte da altura faria com que o teclado aparecesse sobre a vista no meu caso, escondendo algumas entradas ao longo do caminho).

Cada vez que você abriria a visualização da câmera e retornaria ao seu aplicativo, o método viewWillAppear seria chamado e sua visualização diminuiria em 20px.

Além disso, a altura do dispositivo para a janela de visualização incluiria 20 pixels extras, tornando o conteúdo rolável e 20 pixels mais alto do que a visualização da web.

Aqui está a solução completa para o problema da câmera:

Em MainViewController.h:

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

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

Agora, para o problema da janela de visualização, em seu ouvinte de evento deviceready, adicione isto (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');
}

Aqui está a janela de visualização que uso para outras versões:

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

E tudo funciona bem agora.

Tente acessar o (app name)-Info.plistarquivo do aplicativo no XCode e adicione as chaves

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

Isso funciona para mim sem problemas.

Para Cordova 3.1+, existe um plugin que lida com a mudança no comportamento da barra de status para iOS 7 ou superior.

Isso está muito bem documentado aqui , incluindo como a barra de status pode ser revertida para seu estado pré-iOS7.

Para instalar o plug-in, execute:

cordova plugin add org.apache.cordova.statusbar

Em seguida, adicione isso ao config.xml

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

Eu resolvo meu problema instalando o org.apache.cordova.statusbare adicionando no meu topo config.xml:

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

Essas configurações funcionam apenas para iOS 7 ou superior

Referência: http://devgirl.org/2014/07/31/phonegap-developers-guid/

Veja o novo plug-in Cordova StatusBar que aborda exatamente esse problema. http://docs.icenium.com/trou troubleshooting/ ios7-status- bar# solution opção # 3

Eu uso o seguinte trecho de código para adicionar uma classe ao corpo, se iOS7 for detectado. Eu, então, estilo essa classe para adicionar uma 20pxmargem no topo do meu contêiner. Certifique-se de ter o plugin "device" instalado e que este código está dentro do evento "deviceready".

Pela leitura, ouvi dizer que a próxima atualização do Phonegap (3.1 eu acredito) oferecerá um suporte melhor às mudanças na barra de status do iOS7. Portanto, isso pode ser necessário apenas como uma correção de curto prazo.

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

A resposta de Ludwig funcionou para mim.

Para quem usou sua resposta e agora está procurando mudar a cor da margem branca (pode parecer trivial, mas me deixou perplexo), veja isto:

Como posso alterar a cor de fundo do UIWebView após deslizar o UIWebView para baixo para corrigir o problema de sobreposição da barra de status do iOS7?

Outra maneira é tornar compatível com versões anteriores . Faça o HTML de acordo com iOS 7(com uma margem extra de 20 px no topo) para dar aquela full screenaparência e corte essa margem extra para iOS < 7.0. Algo como o seguinte em 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 solução não deixará uma barra preta na parte superior iOS 7.0e superior, o que um usuário moderno do iOS achará estranho e antigo .

Escreva o seguinte código dentro de AppDelegate.m no evento didFinishLaunchingWithOptions (exatamente antes de sua última linha de código " return YES; "):

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

Vou aguardar seu feedback! :)

se usarmos o plugin de câmera para a galeria de imagens, a barra de status voltará para corrigir esse problema, adicione esta linha

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

para

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

função dentro de CVDCamera.m na lista de plug-ins

Escreva o seguinte código dentro de AppDelegate.m no evento didFinishLaunchingWithOptions na inicialização.

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

E corrigir para iOS 7 acima e acima.

Para manter a barra de status visível em retrato, mas ocultá-la em paisagem (ou seja, tela inteira), tente o seguinte:

Em MainViewController.h:

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

Em 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 é uma combinação do que encontrei neste e nas discussões StackOverflow vinculadas, algum código do plug-in Cordova StatusBar (para não codificar o valor de 20px) e alguns encantamentos de minha parte (não sou um desenvolvedor iOS, portanto Eu me atrapalhei para encontrar essa solução).

Em primeiro lugar, adicione o plugin Device em seu projeto. O Id do plug-in é: org.apache.cordova.device e o repositório é: https://github.com/apache/cordova-plugin-device.git

Depois disso, use esta função e chame-a em todas as páginas ou telas: -

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

A melhor maneira de controlar o fundo da barra de status - 2017

Após frustração contínua, muitas pesquisas na Internet, estas são as etapas que você precisa seguir:

1. Certifique-se de usar o Plug-in da Barra de Status
2. Adicione esta configuração ao seu config.xml:

<preferência name = "StatusBarOverlaysWebView" value = "false" />

3. Use o seguinte código em onDeviceReady

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

Funciona para mim em iOS e Android.

Boa sorte!