web-dev-qa-db-ja.com

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

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

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

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

ありがとう

ioscordovauiwebviewios7statusbar
91
Luddig

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

MainViewController.mのviewWillAppearを次のように置き換えます。

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

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;
}
37
Alex L

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

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

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

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

Githubプロジェクトページの詳細： https://github.com/phonegap-build/StatusBarPlugin

22
xdemocle

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

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

回答 https://stackoverflow.com/a/19249775/1502287 私のために働いたが、カメラプラグイン（および他の可能性がある）とビューポートメタで動作するように少し変更しなければならなかった「height = device-height」のタグ（高さの部分を設定しないと、キーボードがビュー上に表示され、途中でいくつかの入力が非表示になります）。

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

また、ビューポートのデバイスの高さには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" />

そして今、すべてがうまく機能しています。

15
dieppe

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

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

これは問題なく機能します。

6
dk123

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

これは、ステータスバーをiOS7以前の状態に戻す方法を含めて、 here に文書化されています。

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

cordova plugin add org.Apache.cordova.statusbar

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

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

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/

5
mayconbelfort

その正確な問題に対処する新しいCordova StatusBarプラグインを参照してください。 http://docs.icenium.com/troubleshooting/ios7-status-bar#solution オプション＃3

3
Philippe Monnet

別の方法は、後方互換性があります。 iOS 7（上に20pxの余白を追加）に従ってHTMLを作成し、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ユーザーにとっては奇妙でoldになります。

1
tipycalFlow

Ludwigの答え 私のために働いた。

彼の答えを使用し、白い余白の色を変更しようとしている人（些細なように見えるかもしれませんが、私は困惑していました）は、これを参照してください：

iOS7ステータスバーオーバーレイの問題を修正するためにUIWebViewをスライドした後、UIWebViewの背景色を変更するにはどうすればよいですか？

1
Paul

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

読み返してみると、Phonegapの次の更新（3.1と思う）がiOS7のステータスバーの変更をより適切にサポートすると聞いています。したがって、これは短期的な修正として必要な場合があります。

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

AppDelegate.m in didFinishLaunchingWithOptions event（コードの最後の行の直前に "return YES;"）内に次のコードを記述します。

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

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

0
Ehsan

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

継続的なフラストレーション、インターネットでの多くの検索の後、次の手順を実行する必要があります。

  1. 必ず Status Bar Plugin を使用してください
  2. この設定をconfig.xmlに追加します。

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

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

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

IOSとAndroidで動作します。

幸運を！

0
Niv Asraf

AppDelegate.m in 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

また、iOS 7以上を修正します。

0
RahulSalvikar

まず、プロジェクトにデバイスプラグインを追加します。プラグイン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
Anil Singhania

ステータスバーを縦向きに表示したまま、横向き（つまりフルスクリーン）に非表示にするには、次を試してください：

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
matb33

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

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

に

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

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

0
Arjun T Raj