wake-up-neo.com

iOS 7 Statusleiste mit Phonegap

In iOS 7 werden Phonegap-Anwendungen unter der Statusleiste angezeigt. Dies kann das Anklicken von Schaltflächen/Menüs am oberen Bildschirmrand erschweren.

Gibt es jemanden, der eine Möglichkeit kennt, dieses Statusleistenproblem 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 verschieben oder die Statusleiste so zu gestalten, wie es in iOS6 der Fall war?

Vielen Dank

91
Luddig

Ich habe eine Antwort auf einen anderen Thread gefunden, aber ich beantworte die Frage, falls sich jemand anders wundert.

Ersetzen Sie einfach das viewWillAppear in MainViewController.m mit 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];
}
143
Luddig

Zusätzlich zur Größenanpassung von Ludwig Kristoffersson 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;
}
37
Alex L

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

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

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

Bei mir mit Phonegap 3.3.0 klappt es.

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

22
xdemocle

Um die Statusleiste auszublenden, fügen Sie den folgenden Code in die Datei MainViewController.m Unter der Funktion -(void)viewDidUnload ein.

- (BOOL)prefersStatusBarHidden
{
    return YES;
}
20
markmarijnissen

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

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

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

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 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 alles funktioniert jetzt gut.

15
dieppe

Versuchen Sie, die Datei (app name)-Info.plist Der App in XCode zu öffnen und die Schlüssel hinzuzufügen

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

Das funktioniert bei mir problemlos.

6
dk123

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

Dies ist gut dokumentiert hier , einschließlich wie die Statusleiste auf den Zustand vor iOS7 zurückgesetzt werden kann.

Führen Sie zum Installieren des Plugins Folgendes aus:

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" />
6
track0

Ich löse mein Problem durch die Installation des org.Apache.cordova.statusbar und Hinzufügen in meinem Top 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/

5
mayconbelfort

Lesen Sie das neue Cordova StatusBar-Plugin, das genau dieses Problem behebt. http://docs.icenium.com/troubleshoot/ios7-status-bar#solution Option 3

3
Philippe Monnet

Ein anderer Weg ist abwärtskompatibel . Erstellen Sie den HTML-Code gemäß iOS 7 (Mit einem zusätzlichen Rand von 20 Pixel oben), um diesen full screen - Look zu erzielen, und schneiden Sie diesen zusätzlichen Rand für iOS < 7.0 Ab. 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;
  }
}

Bei dieser Lösung bleibt für iOS 7.0 Und höher kein schwarzer Balken oben, was ein moderner iOS-Benutzer als ungerade und alt einstuft.

1
tipycalFlow

Ludwigs Antwort hat für mich gearbeitet.

Für jeden, der seine Antwort verwendet hat und nun versucht, die Farbe des weißen Rands zu ändern (mag trivial erscheinen, hätte mich aber verblüfft), siehe dies:

Wie kann ich die UIWebView-Hintergrundfarbe ändern, nachdem ich UIWebView nach unten verschoben habe, um das Problem mit der Überlagerung der iOS7-Statusleiste zu beheben?

1
Paul

Ich verwende den folgenden Code, um dem Body eine Klasse hinzuzufügen, wenn iOS7 erkannt wird. Ich formatiere diese Klasse dann, um ein 20px Rand oben in meinem Container. Stellen Sie sicher, dass Sie das Plugin "device" installiert haben und dass sich dieser Code innerhalb des Ereignisses "deviceready" befindet.

Beim Durchlesen habe ich gehört, dass das nächste Update von Phonegap (3.1, glaube ich) die Änderungen in der Statusleiste von iOS7 besser unterstützen wird. Dies ist möglicherweise nur als kurzfristige Lösung erforderlich.

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

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

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

Ich warte auf dein Feedback! :)

0
Ehsan

Die beste Möglichkeit, den Hintergrund der Statusleiste zu steuern - 2017

Nach anhaltendem Frust und vielen Suchanfragen im Internet sind dies die Schritte, die Sie unternehmen müssen:

  1. Stellen Sie sicher, dass Sie Status Bar Plugin verwenden
  2. Fügen Sie diese Einstellung zu Ihrer config.xml hinzu:

<Einstellungsname = "StatusBarOverlaysWebView" value = "false" />

  1. Verwenden Sie den folgenden Code für onDeviceReady

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

Es funktioniert für mich in iOS und Android.

Viel Glück!

0
Niv Asraf

Schreiben Sie den folgenden Code in AppDelegate.m in didFinishLaunchingWithOptions beim Start.

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 fix für iOS 7 und höher.

0
RahulSalvikar

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

Gehen Sie folgendermaßen vor, um die Statusleiste im Hochformat anzuzeigen, im Querformat jedoch auszublenden (d. H. Im Vollbildmodus):

Im MainViewController.h:

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

Im 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 den verknüpften StackOverflow-Diskussionen gefunden habe, etwas Code aus dem Cordova StatusBar-Plugin (um den 20px-Wert nicht hart zu codieren) und einigen Beschwörungen meinerseits (ich bin kein iOS-Entwickler) Ich habe mich zu dieser Lösung durchgearbeitet.

0
matb33

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 in CVDCamera.m in der Plugin-Liste

0
Arjun T Raj