Phonegap ile iOS 7 Durum çubuğu

İOS 7'de Phonegap uygulamaları durum çubuğunun altında görünecektir. Bu, ekranın üst kısmına yerleştirilmiş düğmelere / menülere tıklamayı zorlaştırabilir.

Phonegap uygulamasında iOS 7'deki bu durum çubuğu sorununu çözmenin bir yolunu bilen biri var mı?

Tüm web sayfasını CSS ile dengelemeye çalıştım ama işe yaramıyor gibi görünüyor. Tüm UIWebView'i dengelemeyi sevmenin veya durum çubuğunun iOS6'da olduğu gibi davranmasını sağlamanın bir yolu var mı?

Teşekkürler

Başka bir ileti dizisinde bir yanıt buldum, ancak başka birinin merak etmesi durumunda soruyu yanıtlayacağım.

Sadece yerini viewWillAppearde MainViewController.mbununla:

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

Ludwig Kristoffersson'ın yeniden boyutlandırma düzeltmesine ek olarak, durum çubuğu rengini değiştirmenizi tavsiye ederim:

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

lütfen phonegap için bu eklentiyi kurun: https://build.phonegap.com/plugins/505

Web görünümünün kaplamasını kontrol etmek için aşağıdaki gibi doğru ayarı kullanın:

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

Benim için Phonegap 3.3.0 ile çalışıyor.

Github proje sayfasında daha fazla bilgi: https://github.com/phonegap-build/StatusBarPlugin

Durum çubuğunu gizlemek için MainViewController.m, fonksiyonun altındaki dosyaya aşağıdaki kodu ekleyin-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Https://stackoverflow.com/a/19249775/1502287 cevabı benim için çalıştı, ancak kamera eklentisi (ve muhtemelen diğerleri) ve "height = device- yükseklik "(yükseklik kısmının ayarlanmaması, benim durumumda klavyenin görünümün üzerinde görünmesine ve yol boyunca bazı girişlerin gizlenmesine neden olur).

Kamera görünümünü her açtığınızda ve uygulamanıza geri döndüğünüzde, viewWillAppear yöntemi çağrılır ve görünümünüz 20 piksel küçülür.

Ayrıca, görüntü alanı için cihaz yüksekliği, içeriğin kaydırılabilir olmasını ve web görünümünden 20 piksel daha yüksek olmasını sağlayan fazladan 20 piksel içerir.

İşte kamera sorununun tam çözümü:

MainViewController.h içinde:

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

MainViewController.m'de:

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

Şimdi görüntü alanı sorunu için, cihaz hazırlığı olay dinleyicinize şunu ekleyin (jQuery kullanarak):

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

İşte diğer sürümler için kullandığım görüntü alanı:

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

Ve şimdi her şey iyi çalışıyor.

Uygulamanın (app name)-Info.plistXCode'daki dosyasına girmeyi deneyin ve anahtarları ekleyin

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

Bu benim için sorunsuz çalışıyor.

Cordova 3.1+ için, iOS 7+ için durum çubuğunun davranışındaki değişiklikle ilgilenen bir eklenti vardır.

Durum çubuğunun iOS7 öncesi durumuna nasıl döndürülebileceği de dahil olmak üzere burada güzel bir şekilde belgelenmiştir .

Eklentiyi kurmak için şunu çalıştırın:

cordova plugin add org.apache.cordova.statusbar

Sonra bunu config.xml'e ekleyin

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

Sorunumu, yükleyip üstüme org.apache.cordova.statusbarekleyerek çözüyorum config.xml:

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

Bu yapılandırmalar yalnızca iOS 7+ için çalışır

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

Tam olarak bu sorunu ele alan yeni Cordova StatusBar eklentisine bakın. http://docs.icenium.com/trfunction/ios7-status-bar#solution seçenek # 3

İOS7 algılanırsa gövdeye bir sınıf eklemek için aşağıdaki kod parçasını kullanıyorum. Daha sonra bu sınıfa, 20pxkapsayıcımın üstüne bir kenar boşluğu ekleyecek şekilde stil veriyorum. "Cihaz" eklentisinin kurulu olduğundan ve bu kodun "cihaz hazırlığı" olayının içinde olduğundan emin olun.

Etrafı okurken, Phonegap'a yapılacak bir sonraki güncellemenin (3.1 inanıyorum) iOS7'nin durum çubuğundaki değişiklikleri daha iyi destekleyeceğini duydum. Bu nedenle, kısa vadeli bir düzeltme olarak buna ihtiyaç duyulabilir.

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

Ludwig'in cevabı benim için çalıştı.

Cevabını kullanan ve şimdi beyaz kenar boşluğunun rengini değiştirmek isteyen herkes için (önemsiz görünebilir, ancak beni şaşırttı), şuna bakın:

İOS7 durum çubuğu yerleşim sorununu gidermek için UIWebView'ı aşağı kaydırdıktan sonra UIWebView arka plan rengini nasıl değiştirebilirim?

Başka bir yol da geriye dönük uyumlu olmaktır . iOS 7Bu full screengörünümü vermek için HTML'yi (üstte ekstra 20 piksellik bir kenar boşluğu ile) göre yapın ve bu fazladan marjı kesin iOS < 7.0. Aşağıdakine benzer bir şey 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;
  }
}

Bu çözüm, iOS 7.0modern bir iOS kullanıcısının tuhaf ve eski bulacağı üstte ve üstünde siyah bir çubuk bırakmaz .

Aşağıdaki kod içinde yaz AppDelegate.m içinde didFinishLaunchingWithOptions olay (tam olarak kod son satırdan önce " dönüş EVET; "):

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

Geri bildiriminizi bekleyeceğim! :)

Resim galerisi için kamera eklentisi kullanırsak durum çubuğu geri gelecektir, bu yüzden bu sorunu çözmek için lütfen bu satırı ekleyin

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

-e

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

eklenti listesinde CVDCamera.m içinde işlev

Aşağıdaki kod içinde yaz AppDelegate.m içinde didFinishLaunchingWithOptions başlama olayı.

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

Ve iOS 7 ve üstü için düzeltin.

Durum çubuğunu dikeyde görünür durumda tutmak ancak yatayda (yani tam ekranda) gizlemek için aşağıdakileri deneyin:

İçinde MainViewController.h:

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

İçinde 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];
}

Bu, bu ve bağlantılı StackOverflow tartışmalarında bulduğum şeylerin, Cordova StatusBar eklentisinden bazı kodların (20px değerini sabit kodlamamak için) ve benim tarafımdan bazı büyüler (ben bir iOS geliştiricisi değilim Bu çözüme giden yolu aradım).

Öncelikle projenize Device eklentisini ekleyin. Eklenti Kimliği: org.apache.cordova.device ve depo: https://github.com/apache/cordova-plugin-device.git

Bundan sonra bu işlevi kullanın ve her sayfada veya ekranda çağırın: -

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

Durum Çubuğu arka planını kontrol etmenin en iyi yolu - 2017

Devam eden hayal kırıklığından sonra, İnternette çok fazla arama yaptıktan sonra, atmanız gereken adımlar şunlardır:

1. Durum Çubuğu Eklentisini kullandığınızdan emin olun
2. Bu ayarı config.xml dosyanıza ekleyin:

<tercih adı = "StatusBarOverlaysWebView" value = "false" />

3. OnDeviceReady'de aşağıdaki kodu kullanın

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

Benim için iOS ve Android'de çalışıyor.

İyi şanslar!