带有Phonegap的iOS 7状态栏

时间：2013-10-06 14:12:47

标签： ios cordova uiwebview ios7 statusbar

在iOS 7中，Phonegap应用程序将显示在状态栏下方。这可能使您难以点击放置在屏幕顶部的按钮/菜单。

是否有人知道如何在Phonegap应用程序中修复iOS 7上的状态栏问题？

我试图用CSS来抵消整个网页，但它似乎不起作用。 有没有办法让偏移整个UIWebView或只是让状态栏的行为与在iOS6中一样？

由于

18 个答案:

答案 0 :(得分：143)

我在另一个帖子上找到了答案，但我会回答这个问题以防万一其他人想知道。

只需将viewWillAppear中的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];
}

答案 1 :(得分：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;
}

答案 2 :(得分：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

答案 3 :(得分：20)

要隐藏状态栏，请在MainViewController.m函数

下的文件-(void)viewDidUnload中添加以下代码 
- (BOOL)prefersStatusBarHidden
{
    return YES;
}

答案 4 :(得分：15)

答案https://stackoverflow.com/a/19249775/1502287为我工作，但我不得不改变它以使其适用于相机插件（可能还有其他）和带有“height = device-height”的视口元标记（不设置）在我的情况下，高度部分会导致键盘出现在视图上，沿途隐藏一些输入。）

每次打开相机视图并返回应用程序时，都会调用viewWillAppear方法，您的视图将缩小20px。

此外，视口的设备高度将包括20个额外的px，使内容可滚动，比webview高20px。

以下是相机问题的完整解决方案：

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

现在一切顺利。

答案 5 :(得分：6)

尝试在XCode中进入应用程序的(app name)-Info.plist文件并添加密钥

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

这对我没有问题。

答案 6 :(得分：6)

对于Cordova 3.1+，有一个插件可以处理iOS 7 +状态栏的行为变化。

这是很好的文档here，包括状态栏如何恢复到iOS7之前的状态。

要安装插件，请运行：

cordova plugin add org.apache.cordova.statusbar

然后将其添加到config.xml 

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

答案 7 :(得分：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/

答案 8 :(得分：3)

请参阅新的Cordova StatusBar插件，该插件可解决该确切问题。 http://docs.icenium.com/troubleshooting/ios7-status-bar#solution选项＃3

答案 9 :(得分：1)

如果检测到iOS7，我会使用以下代码向主体添加类。然后我将该类设置为在容器顶部添加20px边距。确保安装了“device”插件，并且此代码位于“deviceready”事件中。

通过阅读，我听说Phonegap的下一次更新（我相信3.1）将更好地支持对iOS7状态栏的更改。因此，这可能仅仅需要作为短期解决方案。

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

答案 10 :(得分：1)

Ludwig's answer为我工作。

对于那些使用他的答案并且现在想要改变白色边缘的颜色的人（可能看起来微不足道，但让我难倒），请看这个：

How can I change the UIWebView background color after sliding down UIWebView to fix the iOS7 status bar overlay issue?

答案 11 :(得分：1)

另一种方法是向后兼容。根据{{​​1}}制作HTML（顶部额外的20px边距），使iOS 7看起来并为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用户会发现奇数且旧。

答案 12 :(得分：0)

如果我们使用图片库的相机插件，状态栏将返回以解决该问题请添加此行

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

到

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

插件列表中的CVDCamera.m内的函数

答案 13 :(得分：0)

将以下代码写入 didFinishLaunchingWithOptions 事件中的 AppDelegate.m 内（恰好在其最后一行代码“返回YES; ”之前）： 

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

我会等你的反馈！ ：）

答案 14 :(得分：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及以上版本。

答案 15 :(得分：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值进行硬编码），以及我的一些咒语（I＆＃39 ;我不是iOS开发人员，所以我摸索了这个解决方案。）

答案 16 :(得分：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");
    }
}

答案 17 :(得分：0)

控制状态栏背景的最佳方法 - 2017

在持续受挫之后，在互联网上进行了大量搜索，这些是您需要采取的步骤：

  1. 确保使用Status Bar Plugin
  2. 将此设置添加到config.xml：
    3.   

    ＆LT; preference name =“StatusBarOverlaysWebView”value =“false”/＆gt;

    1. 在 onDeviceReady

      上使用以下代码 
          StatusBar.show();
    StatusBar.overlaysWebView(false);
    StatusBar.backgroundColorByHexString('#209dc2');

      2. 它适用于iOS和iOS机器人。

      祝你好运！

相关问题
最新问题