iOS 7 状态栏重叠 UI

Question

我最近升级到了xcode 5，但是当我在iOS模拟器中运行我的应用时，启动画面会重叠在状态栏上；而且当你进入应用时，状态栏也会重叠在我应用的元素上，比如我应用左上角的返回按钮。我的应用使用phonegap 2.9构建。有什么办法可以让它正确地渲染呢？

- Automator21

---

嗯，这不是在这里解决的相同问题吗？https://dev59.com/kGMm5IYBdhLWcg3wO9Hy - ice.cube

Answer 1

如果你使用的是Storyboard，你可以像这个问题iOS 7 - Status bar overlaps the view中那样解决此问题。

如果你没有使用Storyboard，则可以在AppDelegate.m的didFinishLaunching方法中使用此代码解决问题：

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
    [application setStatusBarStyle:UIStatusBarStyleLightContent];
    self.window.clipsToBounds =YES;
    self.window.frame =  CGRectMake(0,20,self.window.frame.size.width,self.window.frame.size.height-20);
}

同时请查看这个问题：iOS7中状态栏和导航栏的问题

- Romance

---

嗨，我的状态栏部分不可见。使用这段代码后，它变成了黑色。你能帮我看看是为什么吗？ - Sahil Mahajan

状态栏使用这个技巧不再可见，但这真的一点问题都没有。非常好用，谢谢！ - plang

你也可以使用这个链接 https://dev59.com/IGMk5IYBdhLWcg3wxAvy#19025547 - Romance

self.window.frame.size 对我来说为空，所以我不得不使用：CGRect screenBounds = [[UIScreen mainScreen] bounds]; screenBounds.size.width;另外，在横向模式下，最后一行看起来像这样：self.window.frame = CGRectMake(20,0,screenBounds.size.width-20,screenBounds.size.height); - Fadi

Ganesh，请尝试访问此网址https://dev59.com/IGMk5IYBdhLWcg3wxAvy#19025547。这将解决您的问题，只有当应用程序在运行时没有其他窗口时，我的代码才会有用[e-mail] - Romance

Answer 2

在MainViewController.m中的：- (void)viewWillAppear:(BOOL)animated方法中添加以下内容：

//Lower screen 20px on ios 7
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 18;
        viewBounds.size.height = viewBounds.size.height - 18;
        self.webView.frame = viewBounds;
    }

因此，最终的函数将如下所示：

- (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 = 18;
        viewBounds.size.height = viewBounds.size.height - 18;
        self.webView.frame = viewBounds;
    }
    [super viewWillAppear:animated];
}

- Gimi

---

这是一个PhoneGap/Cordova应用程序的最佳解决方案。小小的建议-你应该使用20而不是18吗？ - asgeo1

这个问题与inAppBrowser有关。当关闭使用inAppBrowser打开的网页时，底部会出现一个18像素的白色条。是否有任何解决方案？ - ignacio.munizaga

我遇到了与Ignacio相同的问题，即在显示另一个本地视图（例如相机捕获对话框）并返回webView后，在我的应用程序底部会显示一个白色条。每次显示/解除第二个本地对话框时，白色条都会增长。解决方法是将'viewBounds'初始化为'[self.view bounds]'而不是'[self.webView bounds]'。 - Chris Karcher

如果您在设置后在PhoneGap中遇到滚动条问题，请确保从<meta name ="viewport">中删除了“height = device-height”。 - Jan Dudek

如果您使用的是 height=device-height，则可以切换到 width=device-width，以在不受状态栏更改影响的情况下实现与以前相同的效果。 - Tsunamis

Answer 3

我通常做的是向Info.plist文件添加两个键值属性。

这些属性的源代码如下：

- German Attanasio

---

这绝对是最容易实现的答案，对我有效。 - Ian Jamieson

关于这个问题，在 Cordova 实现中，当你在横屏模式下启动应用程序时，它会以竖屏模式渲染应用程序。之后，你会发现有一个占据了屏幕四分之一的条形区域。目前还没有找到解决方法。 - tik27

最佳答案，但我如何在构建时通过顶级config.xml添加它？ - Red2678

Answer 4

我在使用PhoneGap时遇到了一个问题，打开inApp浏览器时出现了困难。Gimi的解决方案很好用，但每次我打开inApp浏览器时，屏幕底部会缩小。所以我添加了一个if语句来检查webview的y原点是否为0。由于inApp浏览器不再具有y起点为0，因此解决了我的问题。

// ios 7 status bar fix
- (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) {
        if(self.webView.frame.origin.y == 0) {
            CGRect viewBounds = [self.webView bounds];
            viewBounds.origin.y = 20;
            viewBounds.size.height = viewBounds.size.height - 20;
            self.webView.frame = viewBounds;
        }
    }

    [super viewWillAppear:animated];
}

这个解决方案并不是我自己的，但我找不到来源。希望它能帮到你！

- Zane

---

您的黑客技巧拯救了这一天。我的客户一直在我老板的办公室里引起警觉。非常感谢您。 - James Wong

Answer 5

将此代码片段放置在您的phonegap项目中的MainViewController.m文件中。

- (void)viewDidLayoutSubviews{

    if ([self respondsToSelector:@selector(topLayoutGuide)]) // iOS 7 or above
    {
        CGFloat top = self.topLayoutGuide.length;
        if(self.webView.frame.origin.y == 0){
            // We only want to do this once, or 
            // if the view has somehow been "restored" by other    code.
            self.webView.frame = CGRectMake(self.webView.frame.origin.x,
                                           self.webView.frame.origin.y + top,
                                           self.webView.frame.size.width,
                                           self.webView.frame.size.height-top);
        } 
    } 
}

- Moeez Akram

Answer 6

如果你在开发iOS 7应用，我不建议使用黑色矩形包裹状态栏，这是老式iOS风格。相反，将其融入设计中，使其更符合iOS 7的“全屏”外观。

你可以使用此插件来调整状态栏的墨水颜色，或在应用程序的任何实例中隐藏或显示它。

js方法如下： https://github.com/jota-v/cordova-ios-statusbar

window.plugins.statusBar.hide();
window.plugins.statusBar.show();
window.plugins.statusBar.blackTint();
window.plugins.statusBar.whiteTint();

重要提示：在您的应用程序plist文件中，还需将UIViewControllerBasedStatusBarAppearance设置为NO。

- jotav

Answer 7

我在ViewDidLoad方法中使用这段代码。

 if ([self respondsToSelector:@selector(edgesForExtendedLayout)])
 {
    self.edgesForExtendedLayout = UIRectEdgeNone;
 }

这适用于支持旧版iOS的情况。

- jnawaz

Answer 8

实际上，我发现Gimi的回答是最好的答案，而且我已经找了很多！

为了补充Gimi的答案，并回答ignacio-munizaga对该答案的回复，代码将在视图出现后执行，这意味着在关闭内联浏览器或相机滚动等之后。因此，我只是放置了一个布尔值，说明大小是否已经被调整。

最终代码如下：

bool sizeWasAdjusted = false;
- (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 (!sizeWasAdjusted && [[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 18;
        viewBounds.size.height = viewBounds.size.height - 18;
        self.webView.frame = viewBounds;
        sizeWasAdjusted = true;
    }
    [super viewWillAppear:animated];
}

- trueicecold

Answer 9

尝试进入XCode中应用程序的(应用程序名称)-Info.plist文件，并添加键。

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

这对我来说似乎没有问题。

- dk123

Answer 10

最好将这些内容放在info.plist中。

<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

这将完全不显示状态栏。

- kiran