iOS 7 Statusleiste mit Phonegap

91

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

Luddig
quelle
Was genau ist das "Problem in der Statusleiste"? Irgendein Beispielcode zum Reproduzieren?
Raptor
1
@ShivanRaptor Unter iOS 7 ist die Statusleiste jetzt Teil der Ansicht. Wenn Sie also Inhalte haben, die in früheren iOS-Versionen oben auf dem Bildschirm angezeigt wurden, befindet sie sich jetzt unter der Statusleiste und wird nicht automatisch direkt darunter verschoben kann einige Probleme verursachen. Mein Vorschlag wäre, einen Wrapper für Ihren Inhalt zu erstellen und einen Rand von 20 Pixel festzulegen.
Andrew Lively
@AndrewLively - Dies funktioniert nicht wirklich, wenn die Seite gescrollt wird. Gibt es eine Möglichkeit, die UIWebView zu verschieben?
Luddig

Antworten:

143

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];
}
Luddig
quelle
9
Verwendet jemand anderes dies mit dem In App Browser Plugin? Wenn ich den In-App-Browser als "Präsentationsstil = Vollbild" konfiguriere, wird nach dem Schließen des Browsers ein leerer unterer Rand angezeigt. Der Rand hat anscheinend dieselbe Höhe wie die InAppBrowser-Symbolleiste. Wenn Sie den Präsentationstyp auf "Seitenblatt" setzen, wird dies auf dem iPad behoben, aber das iPhone scheint immer "Vollbild" zu verwenden. Problemumgehungen?
Paul
1
Sehr dankbar für die Antwort - das gleiche Problem gilt jedoch auch für den PhoneGap inApp-Browser - sie überlagert auch die Statusleiste. Irgendwelche Ideen dafür?
Michael
2
Ja, wir verwenden eine ältere Version von Cordova (2.3.0). Um dies zu beheben, müssen Sie webViewBounds.origin.y = 20 festlegen. in createViewsWithOptions. Überprüfen Sie auch, ob die Hintergrundfarbe eingestellt ist, und spielen Sie damit herum. Führen Sie eine Versionsprüfung für iOS7 und höher durch, genau wie in dieser hervorragenden Antwort von LudWig Kristoffersson.
Hnilsen
3
Wenn Sie den InAppBrowser verwenden, wird die Ansicht bei jeder Rückkehr neu initialisiert. Es wäre daher ratsam, ein Flag hinzuzufügen, das besagt, dass es bereits in Ihrem MainViewController.m ausgeführt wurde.
Hnilsen
14
Da dieser Code in viewWillAppear ausgeführt wird, treten Probleme mit dieser Lösung auf, wenn Ihre PhoneGap / Cordova-App andere native Ansichten (wie das Kameraerfassungsdialogfeld) anzeigt und zu dieser Ansicht zurückkehrt. Die Lösung für mich bestand darin, 'viewBounds' mit '[self.view bounds]' anstelle von '[self.webView bounds]' zu initialisieren.
Chris Karcher
37

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;
}
Alex L.
quelle
1
Funktioniert
super
Perfekt - das war die bessere Lösung für mich.
David Daudelin
Dieser Fix funktioniert lokal nach einem Xcode-Build, aber nicht nach einem Phonegap-Build. Irgendwelche Ideen? Ich habe eine iOS-App mit Phonegap 2.9
DemitryT
Diese Lösung funktioniert, aber ich hatte ein Problem mit Vollbildvideos und fand dieses andere. Es hat mein Problem behoben. Zsprawl.com/iOS/2013/10/fixing-the-phonegap-status-bar-in-ios7
magorich
1
@KirankumarSripati Eigentlich war meine letzte Lösung dies. Ich hoffe, das funktioniert für dich. NSInteger screenSize = 0; // Global if ([[[UIDevice currentDevice] systemVersion] floatValue]> = 7) {CGRect viewBounds = [self.webView bounds]; viewBounds.origin.y = 20; if (screenSize == 0) {viewBounds.size.height = viewBounds.size.height - 20; screenSize = viewBounds.size.height; } self.webView.frame = viewBounds; } Ich habe das getan, weil meine App jedes Mal die Größe
geändert hat,
22

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

xdemocle
quelle
Vielen Dank für diese Antwort! Ich habe es mit diesem Plugin versucht: build.phonegap.com/plugins/715 , das Problem ist, dass die Namen gleich sind. Funktioniert aber nie bei mir. Vielen Dank!!
Jabel Márquez
Um ehrlich zu sein, ich erinnere mich nicht, ob ich es vor diesem von Ihnen erwähnten versucht habe.
xdemocle
20

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

- (BOOL)prefersStatusBarHidden
{
    return YES;
}
markmarijnissen
quelle
Das macht den Job. Die Statusleiste wird ausgeblendet, sodass Ihre App im Vollbildmodus angezeigt wird. Ich habe dies nur auf dem Simulator getestet, werde aber später darüber berichten, wenn ich einen Build auf meinen iPhones und iPads ausführe.
Rob Evans
Funktioniert für mich auf iOS auf einem iPad 2
Mark Williams
Dies funktioniert problemlos auf dem iPad Air iOS 7.1.2 und es sind keine Änderungen oder Plugins erforderlich. Tolle Antwort, danke!
Scriptlabs
Dies ignoriert völlig alles, was Apple in den Richtlinien für Benutzeroberflächen über den "immersiven Vollbildmodus" sagt. Nur weil Sie einen Wrapper über iOS verwenden, heißt das nicht, dass Sie die Entwurfsmuster ignorieren können ...: /
jesses .co.tt
15

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.

dieppe
quelle
Jede Methode ohne Jquery @dieppe
Arjun T Raj
Fügen Sie diesen Code einfach zu - (void) imagePickerController: (UIImagePickerController *) picker didFinishPickingMediaWithInfo: (NSDictionary *) info {} -Methode in CDVCamera.m hinzu, die auch das Kameraproblem löst. NSLog (@ "GESCHLOSSENE KAMERA"); [[UIApplication sharedApplication] setStatusBarHidden: YES withAnimation: UIStatusBarAnimationNone];
Arjun T Raj
Mann, ich kenne die Worte nicht, um Danke zu sagen! Ich habe mit dem 20px-Schrumpfungsproblem mit der Kamera zu kämpfen und konnte bis jetzt keine Lösung finden ...
Tuks
6

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.

dk123
quelle
Für mich funktioniert dies im Simulator mit einem lokalen Build, aber nicht im iPad mit einem Remote-Build. Verwendung von PG 3.1 für den Build und iOS7 auf dem Simulator und dem iPad.
Per Quested Aronsson
@PerQuestedAronsson Vielleicht möchten Sie versuchen, es lokal auf dem iPad aufzubauen. Ich arbeite mit einem iPad iOS7 mit Phonegap 3.1 ohne Probleme.
dk123
6

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" />
track0
quelle
Sie können auch die StatusBar-Farbe festlegen, die standardmäßig schwarz ist: <Einstellungsname = "StatusBarBackgroundColor" value = "# 000000" /> Siehe: plugins.cordova.io/#/package/org.apache.cordova.statusbar
ezzadeen
2
Für Cordova 5+ wurde das Plugin umbenannt: Cordova Plugin Cordova-Plugin-Statusleiste hinzufügen
raider33
5

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/

mayconbelfort
quelle
1

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');
}
Ryan
quelle
1

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 .

tipycalFlow
quelle
0

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

Ehsan
quelle
Dieser Code scheint großartig zu funktionieren, um die Statusleiste auszublenden und das Problem zu beheben. Ich habe mich gestern auch ein bisschen umgesehen und einen Code gefunden, der die Größe des UIWebView im Wesentlichen geändert und nach unten verschoben hat. Ich habe dies auch als Antwort hinzugefügt :)
Luddig
Das ist großartig. Mein Code verwendet nur eine einfache und einfache Möglichkeit, dies zu tun! Wir alle machen dasselbe mit verschiedenen Methoden :)
Ehsan
0

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

Arjun T Raj
quelle
0

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.

RahulSalvikar
quelle
0

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.

matb33
quelle
0

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

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

  1. 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!

Niv Asraf
quelle