Phonegap付きのiOS 7ステータスバー


91

iOS 7では、Phonegapアプリケーションはステータスバーの下に表示されます。これにより、画面上部に配置されているボタンやメニューをクリックするのが難しくなる場合があります。

PhonegapアプリケーションでiOS 7のこのステータスバーの問題を修正する方法を知っている人はいますか?

CSSでWebページ全体をオフセットしようとしましたが、動作しないようです。UIWebView全体をオフセットしたり、ステータスバーをiOS6のように動作させる方法はありますか?

ありがとう


「ステータスバーの問題」とは正確には何ですか?再現するサンプルコードはありますか?
ラプター

1
@ShivanRaptor iOS 7では、ステータスバーがビューの一部になりました。以前のiOSバージョンで画面の上部にあったものがあれば、ステータスバーの下になり、自動的にその下にプッシュされません。いくつかの問題を引き起こす可能性があります。私の提案は、コンテンツのラッパーを作成し、マージンの上部を20pxに設定することです。
Andrew Lively

@AndrewLively-これはページがスクロールしているときは実際には機能しません。UIWebViewを移動する方法はありますか?
Luddig 2013年

回答:


143

別のスレッドで答えを見つけましたが、誰かが疑問に思った場合のために質問に答えます。

viewWillAppearin MainViewController.mをこれに置き換えるだけです。

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

9
アプリブラウザープラグインでこれを使用している人はいますか?アプリ内ブラウザーを「presentationstyle = fullscreen」として構成すると、ブラウザーを閉じた後に空白の下マージンが表示されます。マージンはInAppBrowserツールバーと同じ高さのようです。presentationtypeを「pagesheet」に設定すると、iPadでこれが修正されますが、iPhoneは常に「フルスクリーン」を使用するようです。回避策はありますか?
ポール

1
答えにとても感謝しています-ただし、同じ問題がPhoneGap inAppブラウザーにも当てはまります-ステータスバーもオーバーレイします。そのためのアイデアはありますか?
マイケル

2
はい、古いバージョンのCordova(2.3.0)を使用しています。これを修正するには、webViewBounds.origin.y = 20を設定する必要があります。createViewsWithOptions内。また、背景色が設定されているかどうかを確認し、それで遊んでください。LudWig Kristofferssonからのこの素晴らしい回答と同じように、iOS7以降のバージョンチェックを行ってください。
hnilsen 2013年

3
また、InAppBrowserを使用している場合は、戻るたびにビューが再初期化されます。そのため、MainViewController.mで既に実行されていることを示すフラグを追加するのが賢明です。
hnilsen 2013年

14
このコードはviewWillAppearで実行されるため、PhoneGap / Cordovaアプリが他のネイティブビュー(カメラキャプチャダイアログなど)を表示してこのビューに戻る場合、このソリューションで問題が発生します。私にとっての修正は、「viewBounds」を「[self.webView bounds]」ではなく「[self.view bounds]」に初期化することでした。
Chris Karcher、2013年

37

Ludwig Kristofferssonのサイズ変更の修正に加えて、ステータスバーの色を変更することをお勧めします。

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

1
素晴らしい作業:)ありがとうございました:)
rkaartikeyan

完璧-これは私にとってより良い解決策でした。
David Daudelin 2014年

この修正は、Xcodeのビルド後にローカルで機能しますが、電話ギャップビルドを実行した後は機能しません。何か案は?私はPhoneGap 2.9で構築されたiOSアプリを持っています
DemitryT 2014

このソリューションは機能しますが、フルスクリーンビデオに問題があり、これとは別のビデオが見つかり、問題が修正されました zsprawl.com/iOS/2013/10/fixing-the-phonegap-status-bar-in-ios7
magorich

1
@KirankumarSripati実際の最後の解決策はこれでしたNSInteger screenSize = 0; //グローバル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; 私がフルスクリーンに入る
たび

22

そのプラグインをphonegapにインストールしてください:https ://build.phonegap.com/plugins/505

以下のような正しい設定を使用して、WebViewのオーバーレイを制御します。

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

私にとっては、Phonegap 3.3.0で動作します。

詳細については、Githubプロジェクトページ:https : //github.com/phonegap-build/StatusBarPlugin


この回答をどうもありがとう!私はこのプラグインを試していました:build.phonegap.com/plugins/715、問題は名前が同じであるということです。しかし、私のために働くことはありません。どうもありがとう!!
JabelMárquez2014年

正直言って、あなたが言ったこの前に試したかどうか覚えていません。
xdemocle 2014年

20

ステータスバーを非表示にするにはMainViewController.m、関数の下のファイルに次のコードを追加します-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

これは仕事をします。ステータスバーを非表示にして、アプリを全画面表示にします。私はこれをシミュレーターでテストしただけですが、iPhoneやiPadでビルドを実行すると、後で報告されます。
Rob Evans

iPad 2のiOSで動作します
Mark Williams

これはiPad Air iOS 7.1.2では問題なく機能し、変更やプラグインは必要ありません。すばらしい回答、ありがとうございます!
Scriptlabs、2014

これは、ヒューマンインターフェイスガイドラインでAppleが「没入型フルスクリーンモード」について述べていることを完全に無視します... iOS上でラッパーを使用しているからといって、デザインパターンを無視できるわけではありません...:/
jesses .co.tt 2015

15

回答https://stackoverflow.com/a/19249775/1502287は私にとってはうまくいきましたが、カメラプラグイン(および他の可能性のあるもの)と「height = device-高さ "(高さの部分を設定しないと、私の場合、キーボードがビューの上に表示され、途中で一部の入力が非表示になります)。

カメラビューを開いてアプリに戻るたびに、viewWillAppearメソッドが呼び出され、ビューが20px縮小されます。

また、ビューポートのデバイスの高さには20ピクセルが追加され、コンテンツがスクロール可能になり、Webビューよりも20ピクセル高くなります。

カメラの問題の完全な解決策は次のとおりです。

MainViewController.hで:

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

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

ここで、ビューポートの問題について、devicereadyイベントリスナーで、これを追加します(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');
}

以下は、他のバージョンで使用するビューポートです。

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

そして今はすべてうまくいきます。


Jqueryのないメソッド@dieppe
Arjun T Raj

このコードを-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {}メソッドに追加するだけで、カメラの問題も解決します。NSLog(@ "クローズドカメラ"); [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
Arjun T Raj

男、ありがとうと言う言葉がわかりません!私はカメラで20pxの縮小問題に苦労しており、今まで解決策を見つけることができませんでした...
tuks

6

(app name)-Info.plistXCodeでアプリのファイルに移動して、キーを追加してください

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

これは問題なく動作します。


私にとって、これはローカルビルドのシミュレータでは機能しますが、リモートビルドのiPadでは機能しません。ビルドにPG 3.1を使用し、シミュレーターとiPadでiOS7を使用します。
Quested Aronssonによる

@PerQuestedAronsson iPadでローカルにビルドしてみてください。私は問題なくphonegap 3.1を備えたiPad iOS7で作業しています。
dk123 2013

6

Cordova 3.1以降には、iOS 7以降のステータスバーの動作の変更を処理するプラグインがあります。

これは、ステータスバーをiOS7より前の状態に戻す方法を含めて、ここに詳しく記載されています。

プラグインをインストールするには、次を実行:

cordova plugin add org.apache.cordova.statusbar

次に、これをconfig.xmlに追加します

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

ステータスバーの色をデフォルトで黒に設定することもできます:<preference name = "StatusBarBackgroundColor" value = "#000000" />参照:plugins.cordova.io
ezzadeen

2
Cordova 5+の場合、プラグインの名前が変更されました:cordova plugin add cordova-plugin-
statusbar

5

私はインストールorg.apache.cordova.statusbarして私のトップに追加することで問題を解決しますconfig.xml

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

これらの構成はiOS 7以降でのみ機能します

リファレンス:http : //devgirl.org/2014/07/31/phonegap-developers-guid/



1

iOS7が検出された場合、次のコードを使用して本体にクラスを追加します。次に、そのクラスをスタイルして20px、コンテナの上部にマージンを追加します。「device」プラグインがインストールされていること、およびこのコードが「deviceready」イベント内にあることを確認してください。

周りから読んで、私はPhonegapの次のアップデート(3.1と思います)がiOS7のステータスバーへの変更をより良くサポートすると聞いています。したがって、これは短期的な修正として必要なだけかもしれません。

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


1

もう1つの方法は、下位互換性を維持することです。に従ってHTMLを作成しiOS 7(上部に20ピクセルのマージンを追加)、そのfull screen外観を与え、の余分なマージンを切り取りiOS < 7.0ます。の次のようなもの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;
  }
}

この解決策では、上部iOS 7.0と上部に黒いバーが残ることはありません。現代のiOSユーザーは、これを奇妙で古いもの認識します。


0

AppDelegate.m内のdidFinishLaunchingWithOptionsイベント内の次のコードを記述ます(コードの最後の行の直前 " return YES; "):

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

フィードバックをお待ちしています!:)


このコードは、ステータスバーを非表示にして問題を修正するのに
非常に適し

それは素晴らしいことです。私のコードはそれを行うためのシンプルで簡単な方法のみを使用しています!私たち全員が同じことを別の方法で行っています:)
Ehsan 2013年

0

画像ギャラリーにカメラプラグインを使用すると、ステータスバーが表示されるので、この問題を修正するにはこの行を追加してください

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

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

プラグインリストのCVDCamera.m内の関数


0

起動時に、didFinishLaunchingWithOptionsイベントのAppDelegate.m内に次のコードを記述します。

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

上記のiOS 7以降を修正します。


0

ステータスバーを縦向きで表示したまま、横向き(つまり、フルスクリーン)で非表示にするには、次の手順を試してください。

MainViewController.h

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

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

これは、私がこれで見つけたものとリンクされたStackOverflowのディスカッション、Cordova StatusBarプラグインからのコード(20px値をハードコードしないようにするため)、および私の側にある呪文(私はiOS開発者ではないため)の組み合わせです。私はこの解決策にたどり着きました)。


0

まず、プロジェクトにデバイスプラグインを追加します。プラグインIDはorg.apache.cordova.deviceで、リポジトリはhttps://github.com/apache/cordova-plugin-device.gitです

その後、この関数を使用して、すべてのページまたは画面で呼び出します:-

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

ステータスバーの背景を制御する最良の方法-2017

継続的な苛立ち、インターネット上での多くの検索の後、これらはあなたがする必要があるステップです:

  1. ステータスバープラグインを使用していることを確認してください
  2. この設定をconfig.xmlに追加します。

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

  1. onDeviceReadyで次のコードを使用します

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

iOSとAndroidで動作します。

幸運を!

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.