iOS 7 Statusleiste mit Phonegap

In iOS 7 werden Phonegap-Anwendungen unter der Statusleiste angezeigt. Dies kann es schwierig machen, auf Schaltflächen / Menüs zu klicken, die oben auf dem Bildschirm platziert wurden.

Gibt es jemanden, der eine Möglichkeit kennt, dieses Problem in der Statusleiste unter iOS 7 in einer Phonegap-Anwendung zu beheben?

Ich habe versucht, die gesamte Webseite mit CSS zu versetzen, aber es scheint nicht zu funktionieren. Gibt es eine Möglichkeit, das gesamte UIWebView zu versetzen oder die Statusleiste einfach so zu gestalten, wie es in iOS6 der Fall war?

Vielen Dank

Ich habe eine Antwort in einem anderen Thread gefunden, aber ich werde die Frage beantworten, falls sich jemand anderes wundert.

Ersetzen Sie einfach die viewWillAppearin MainViewController.mmit diesem:

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

Zusätzlich zu Ludwig Kristofferssons Korrektur der Größenänderung empfehle ich, die Farbe der Statusleiste zu ändern:

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

Bitte installieren Sie das Plugin für Phonegap: https://build.phonegap.com/plugins/505

Verwenden Sie die richtige Einstellung wie unten, um die Überlagerung der Webansicht zu steuern:

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

Bei mir funktioniert es mit Phonegap 3.3.0.

Weitere Informationen finden Sie auf der Github-Projektseite: https://github.com/phonegap-build/StatusBarPlugin

Fügen Sie zum Ausblenden der Statusleiste den folgenden Code in die Datei MainViewController.munter der Funktion ein-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Antwort https://stackoverflow.com/a/19249775/1502287 funktionierte für mich, aber ich musste es ein wenig ändern, damit es mit dem Kamera-Plugin (und möglicherweise anderen) und einem Meta-Tag für das Ansichtsfenster mit "height = device-" funktioniert. height "(wenn Sie den Höhenbereich nicht einstellen, wird die Tastatur in meinem Fall über der Ansicht angezeigt und einige Eingaben werden auf dem Weg ausgeblendet).

Jedes Mal, wenn Sie die Kameraansicht öffnen und zu Ihrer App zurückkehren, wird die viewWillAppear-Methode aufgerufen und Ihre Ansicht um 20 Pixel verkleinert.

Außerdem würde die Gerätehöhe für das Ansichtsfenster die 20 zusätzlichen Pixel enthalten, wodurch der Inhalt scrollbar und 20 Pixel höher als die Webansicht wird.

Hier ist die vollständige Lösung für das Kameraproblem:

In MainViewController.h:

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

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

Fügen Sie nun für das Viewport-Problem in Ihrem deviceready-Ereignis-Listener Folgendes hinzu (mithilfe von 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');
}

Hier ist das Ansichtsfenster, das ich für andere Versionen verwende:

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

Und jetzt funktioniert alles gut.

Versuchen Sie, in die App- (app name)-Info.plistDatei in XCode zu gehen und die Schlüssel hinzuzufügen

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

Das funktioniert bei mir problemlos.

Für Cordova 3.1+ gibt es ein Plugin, das sich mit der Änderung des Verhaltens der Statusleiste für iOS 7+ befasst.

Das ist schön dokumentiert hier , darunter , wie die Statusleiste kann den vorherigen iOS7 Zustand rückgängig gemacht werden.

Führen Sie Folgendes aus, um das Plugin zu installieren:

cordova plugin add org.apache.cordova.statusbar

Fügen Sie dies dann zu config.xml hinzu

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

Ich löse mein Problem, indem ich das installiere org.apache.cordova.statusbarund in meinem Top hinzufüge config.xml:

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

Diese Konfigurationen funktionieren nur für iOS 7+

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

Weitere Informationen finden Sie im neuen Cordova StatusBar-Plugin, das genau dieses Problem behebt. http://docs.icenium.com/troubleshooter/ios7-status-bar#solution Option 3

Ich verwende den folgenden Code, um dem Body eine Klasse hinzuzufügen, wenn iOS7 erkannt wird. Ich gestalte diese Klasse dann, um eine hinzuzufügen20px oben in meinem Container Rand eingefügt wird. Stellen Sie sicher, dass Sie das Plugin "Gerät" installiert haben und dass sich dieser Code im Ereignis "deviceready" befindet.

Beim Lesen habe ich gehört, dass das nächste Update von Phonegap (3.1, glaube ich) die Änderungen an der Statusleiste von iOS7 besser unterstützt. Dies kann also nur als kurzfristige Lösung erforderlich sein.

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

Ludwigs Antwort hat bei mir funktioniert.

Für alle, die seine Antwort verwendet haben und nun versuchen, die Farbe des weißen Randes zu ändern (mag trivial erscheinen, mich aber verblüfft haben), sehen Sie Folgendes:

Wie kann ich die UIWebView-Hintergrundfarbe nach dem Herunterschieben von UIWebView ändern, um das Problem mit der Überlagerung der iOS7-Statusleiste zu beheben?

Ein anderer Weg ist abwärtskompatibel . iOS 7Erstellen Sie den HTML- Code gemäß (mit einem zusätzlichen Rand von 20 Pixel oben), um diesen full screenLook zu erzielen, und schneiden Sie den zusätzlichen Rand für ab iOS < 7.0. So etwas wie das Folgende in 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;
  }
}

Diese Lösung hinterlässt oben iOS 7.0und oben keinen schwarzen Balken , den ein moderner iOS-Benutzer seltsam und alt findet .

Schreiben Sie den folgenden Code in AppDelegate.m in das Ereignis didFinishLaunchingWithOptions (genau vor der letzten Codezeile " return YES; "):

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

Ich werde auf Ihr Feedback warten! :) :)

Wenn wir das Kamera-Plugin für die Bildergalerie verwenden, wird die Statusleiste wieder angezeigt. Um dieses Problem zu beheben, fügen Sie bitte diese Zeile hinzu

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

zu

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

Funktion innerhalb von CVDCamera.m in der Plugins-Liste

Schreiben Sie beim Starten den folgenden Code in AppDelegate.m in das Ereignis didFinishLaunchingWithOptions .

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

Und für iOS 7 und höher korrigieren.

Versuchen Sie Folgendes, um die Statusleiste im Hochformat sichtbar zu halten, sie jedoch im Querformat (dh im Vollbildmodus) auszublenden:

In MainViewController.h:

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

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

Dies ist eine Kombination aus dem, was ich in dieser und verknüpften StackOverflow-Diskussionen gefunden habe, etwas Code aus dem Cordova StatusBar-Plugin (um den 20px-Wert nicht fest zu codieren) und einigen Beschwörungsformeln meinerseits (ich bin kein iOS-Entwickler) Ich habe mich auf den Weg zu dieser Lösung gemacht.

Fügen Sie zunächst das Geräte-Plugin in Ihr Projekt ein. Die Plugin-ID lautet: org.apache.cordova.device und das Repository lautet: https://github.com/apache/cordova-plugin-device.git

Verwenden Sie danach diese Funktion und rufen Sie sie auf jeder Seite oder jedem Bildschirm auf: -

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

Der beste Weg, um den Hintergrund der Statusleiste zu steuern - 2017

Nach anhaltender Frustration und vielen Suchanfragen im Internet sind dies die folgenden Schritte:

1. Stellen Sie sicher, dass Sie das Statusleisten-Plugin verwenden
2. Fügen Sie diese Einstellung Ihrer config.xml hinzu:

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

3. Verwenden Sie den folgenden Code für onDeviceReady

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

Es funktioniert für mich in iOS & Android.

Viel Glück!