Pasek stanu iOS 7 z Phonegap

W systemie iOS 7 aplikacje Phonegap pojawią się pod paskiem stanu. Może to utrudniać klikanie przycisków / menu, które zostały umieszczone u góry ekranu.

Czy jest ktoś, kto wie, jak rozwiązać ten problem z paskiem stanu w systemie iOS 7 w aplikacji Phonegap?

Próbowałem zrównoważyć całą stronę internetową za pomocą CSS, ale wydaje się, że nie działa. Czy istnieje sposób, aby polubić przesunięcie całego UIWebView lub po prostu sprawić, aby pasek stanu zachowywał się tak, jak w iOS6?

Dzięki

Znalazłem odpowiedź w innym wątku, ale odpowiem na pytanie na wypadek, gdyby ktoś inny się zastanawiał.

Po prostu zamień viewWillAppearw MainViewController.mto:

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

Oprócz poprawki zmiany rozmiaru autorstwa Ludwiga Kristofferssona zalecam zmianę koloru paska stanu:

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

proszę, zainstaluj tę wtyczkę do phonegap: https://build.phonegap.com/plugins/505

I użyj prawidłowego ustawienia, jak poniżej, aby kontrolować nakładkę widoku internetowego:

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

U mnie z Phonegap 3.3.0 to działa.

Więcej informacji na stronie projektu Github: https://github.com/phonegap-build/StatusBarPlugin

Aby ukryć pasek stanu, dodaj następujący kod w pliku MainViewController.mpod funkcją-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Odpowiedź https://stackoverflow.com/a/19249775/1502287 działała dla mnie, ale musiałem to trochę zmienić, aby działała z wtyczką aparatu (i potencjalnie innymi) i metatagiem widoku z „height = device- wysokość ”(brak ustawienia części wysokości spowodowałoby pojawienie się klawiatury nad widokiem w moim przypadku, ukrywając niektóre wejścia po drodze).

Za każdym razem, gdy otwierasz widok kamery i wracasz do aplikacji, wywoływana jest metoda viewWillAppear, a widok zmniejsza się o 20 pikseli.

Ponadto wysokość urządzenia dla widocznego obszaru obejmowałaby dodatkowe 20 pikseli, renderujące zawartość przewijalną i o 20 pikseli wyższe niż widok sieciowy.

Oto kompletne rozwiązanie problemu z aparatem:

W MainViewController.h:

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

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

Teraz, jeśli chodzi o problem z widocznym obszarem, w odbiorniku zdarzeń urządzenia gotowego do dodania (używając 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');
}

Oto rzutnia, którego używam w innych wersjach:

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

I teraz wszystko działa dobrze.

Spróbuj wejść do (app name)-Info.plistpliku aplikacji w XCode i dodaj klucze

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

U mnie to działa bez problemu.

W przypadku Cordova 3.1+ dostępna jest wtyczka, która radzi sobie ze zmianą zachowania paska stanu w iOS 7+.

Jest to ładnie udokumentowane tutaj , w tym, jak można przywrócić pasek stanu do stanu sprzed iOS7.

Aby zainstalować wtyczkę, uruchom:

cordova plugin add org.apache.cordova.statusbar

Następnie dodaj to do config.xml

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

Rozwiązuję swój problem instalując org.apache.cordova.statusbari dodając w moim topie config.xml:

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

Te konfiguracje działają tylko na iOS 7+

Źródła: http://devgirl.org/2014/07/31/phonegap-developers-guid/

Zobacz nową wtyczkę Cordova StatusBar, która rozwiązuje dokładnie ten problem. http://docs.icenium.com/troubleshooting/ios7-status-bar#solution opcja nr 3

Używam następującego fragmentu kodu, aby dodać klasę do treści, jeśli zostanie wykryty iOS7. Następnie nadaję tej klasie styl, aby dodać 20pxmargines na górze mojego kontenera. Upewnij się, że masz zainstalowaną wtyczkę „device” i że ten kod znajduje się w zdarzeniu „deviceready”.

Po przeczytaniu dowiedziałem się, że następna aktualizacja Phonegap (wydaje mi się, że 3.1) będzie lepiej obsługiwać zmiany w pasku stanu iOS7. Może to być potrzebne tylko jako rozwiązanie krótkoterminowe.

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

Odpowiedź Ludwiga zadziałała dla mnie.

Dla każdego, kto skorzystał z jego odpowiedzi i teraz chce zmienić kolor białego marginesu (może wydawać się to trywialne, ale mnie zaskoczyło), zobacz:

Jak mogę zmienić kolor tła UIWebView po zjechaniu w dół UIWebView, aby naprawić problem z nakładką paska stanu iOS7?

Innym sposobem jest przywrócenie kompatybilności wstecznej . Utwórz kod HTML zgodnie z iOS 7(z dodatkowym marginesem 20 pikseli na górze), aby nadać temu full screenwyglądowi i odciąć ten dodatkowy margines iOS < 7.0. Coś takiego w 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;
  }
}

To rozwiązanie nie pozostawi czarnego paska na górze iOS 7.0i powyżej, co współczesny użytkownik iOS uzna za dziwne i stare .

Napisz następujący kod wewnątrz AppDelegate.m w zdarzeniu didFinishLaunchingWithOptions (dokładnie przed ostatnim wierszem kodu „ return YES; ”):

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

Czekam na twoją opinię! :)

jeśli użyjemy wtyczki aparatu do galerii obrazów, pasek stanu wróci, więc aby rozwiązać ten problem, dodaj tę linię

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

do

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

funkcja wewnątrz CVDCamera.m na liście wtyczek

Napisz następujący kod wewnątrz AppDelegate.m w zdarzeniu didFinishLaunchingWithOptions podczas uruchamiania.

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

I naprawiono powyżej iOS 7 i nowsze.

Aby pasek stanu był widoczny w orientacji pionowej, ale ukrył go w orientacji poziomej (tj. Na pełnym ekranie), spróbuj wykonać następujące czynności:

W MainViewController.h:

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

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

Jest to kombinacja tego, co znalazłem w tej i połączonych dyskusjach StackOverflow, trochę kodu z wtyczki Cordova StatusBar (aby nie zakodować na stałe wartości 20px) i niektórych zaklęć z mojej strony (nie jestem programistą iOS, więc Po omacku ​​doszedłem do tego rozwiązania).

Przede wszystkim dodaj wtyczkę Device w swoim projekcie. Identyfikator wtyczki to: org.apache.cordova.device, a repozytorium to: https://github.com/apache/cordova-plugin-device.git

Następnie użyj tej funkcji i wywołaj ją na każdej stronie lub ekranie: -

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

Najlepszy sposób na kontrolowanie tła paska stanu - 2017

Po ciągłej frustracji, wielu poszukiwaniach w Internecie, oto kroki, które musisz wykonać:

1. Upewnij się, że używasz wtyczki paska stanu
2. Dodaj to ustawienie do pliku config.xml:

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

3. Użyj poniższego kodu w onDeviceReady

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

Działa na mnie w iOS i Androidzie.

Powodzenia!