iphone - iOS 7 状态栏重叠 UI

Question

我最近升级到 xcode 5，当我在 iOS 模拟器中运行我的应用程序时，初始屏幕与状态栏重叠，当你在应用程序中时，状态栏会重叠到我的应用程序上的元素上，就像我在左上角的后退按钮我的应用程序的手角。我使用 phonegap 2.9 构建我的应用程序。任何想法如何让我正确渲染。

用户界面

score 67 · Accepted Answer

如果您使用情节提要，则可以解决此问题，如以下问题所示：iOS 7 - 状态栏与视图重叠

如果您不使用情节提要，那么您可以在您的AppDelegate.min 中使用此代码did finishlaunching：

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 中的状态栏和导航栏问题

score 50 · Accepted Answer

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

score 36 · Accepted Answer

36

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

在此处输入图像描述

属性源代码为：

在此处输入图像描述

于 2013-11-22T19:28:19.533 回答

score 9 · Accepted Answer

我在使用 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];
}

解决方案不是我的，但我找不到来源。希望能帮助到你！

score 6 · Accepted Answer

将此代码段放在MainViewController.mphonegap 项目中的文件中。

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

score 5 · Accepted Answer

我在 ViewDidLoad 方法中使用此代码。

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

这在尝试支持以前的 iOS 版本时也有效。

score 5 · Accepted Answer

如果您为 iOS 7 开发，我不建议将状态栏包装在黑色矩形旧 iOS 样式中。只需将其集成到设计中即可获得更多 iOS 7“全屏”外观。

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

https://github.com/jota-v/cordova-ios-statusbar

js方法有：

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

重要提示：同样在您的应用 plist 文件中设置UIViewControllerBasedStatusBarAppearance为NO。

score 5 · Accepted Answer

实际上，我发现 Gimi 的答案是最好的答案，而且我一直在寻找很多！只是为了添加 Gimi 的答案，并回答 ignacio-munizaga 对该答案的回复，代码将在视图出现时执行，这意味着在您关闭内联浏览器或相机胶卷等之后，所以我只是放了一个 bool 值说明尺寸是否已经调整。

最终代码如下所示：

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

score 5 · Accepted Answer

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

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

这似乎对我有用，没有问题。

score 4 · Accepted Answer

最好在 info.plist 中有这些东西

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

这根本没有状态栏。

score 3 · Accepted Answer

为了解决iOS7的状态栏问题，我们可以使用如下代码来Cordova/PhoneGap：

function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}

document.addEventListener('deviceready', onDeviceReady, false);

无论如何，Cordova 3.1 很快就会解决 iOS7 的这个问题和其他问题。

score 3 · Accepted Answer

来自Apple iOS7 过渡指南，

具体来说，

self.automaticallyAdjustsScrollViewInsets = YES;
self.edgesForExtendedLayout = UIRectEdgeNone;

当我不想重叠并且我有一个 UITableViewController 时对我有用。

score 3 · Accepted Answer

 if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {

        self.window.clipsToBounds =YES;
[application setStatusBarStyle:UIStatusBarStyleLightContent];
 self.window.frame =  CGRectMake(0,20,self.window.frame.size.width,self.window.frame.size.height-20);
    }

score 2 · Accepted Answer

如果您将 Cordova 与 Sencha Touch 一起使用，并且您使用的是普通的 Sencha Touch 导航/标题栏，您只需拉伸导航栏并重新定位导航栏中的内容，使其在 iOS 7 上看起来像家一样。只需将其添加到app.js(在你的最后Ext.Viewport.add一行之后）：

// Adjust toolbar height when running in iOS to fit with new iOS 7 style
if (Ext.os.is.iOS && Ext.os.version.major >= 7) {
  Ext.select(".x-toolbar").applyStyles("height: 62px; padding-top: 15px;");
}

（来源： http: //lostentropy.com/2013/09/22/ios-7-status-bar-fix-for-sencha-touch-apps/）

我知道这有点 hacky，但它节省了在 Objective-C 级别处理它。不过，对于那些不将 Sencha Touch 与 Cordova 一起使用的人来说，这并不是什么好事。

score 2 · Accepted Answer

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

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

我会等待你的反馈！:)

score 2 · Accepted Answer

在 .plist 文件中设置属性：

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

它隐藏了状态栏。

score 1 · Accepted Answer

您可以使用的最佳方法是调整主视图的大小，特别是在您的应用程序使用页脚时。

在 MainViewController.m 上使用 viewDidLoad 方法，之后[super viewDidLoad];

NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
if ([[vComp objectAtIndex:0] intValue] >= 7) {
    // iOS 7 or above
    CGRect oldBounds = [self.view bounds];
    CGRect newViewBounds = CGRectMake( 0, -10, oldBounds.size.width, oldBounds.size.height-20 );
    CGRect newWebViewBounds = CGRectMake( 0, -20, oldBounds.size.width, oldBounds.size.height-40 );

    [self.view setBounds:newViewBounds];
    [self.webView setBounds:newWebViewBounds];
}

那么你就不需要在你的应用程序中修改任何 javascript

score 1 · Accepted Answer

我开始走这条路，但我有自己的导航控件core view，我将其滑入通常用通用标题栏和tabbar;包裹核心的框架中。不storyboard，不UINavigationController。

它开始快速变得复杂，添加和减去状态栏的 20 个像素。然后顿悟。

我制作了 .. 的副本.xib file，告诉Xcode我将其作为 iOS 7 布局显示给我，重新对齐所有内容，并在代码中放置一个 6/7 开关 .. 立即，一切正常，额外资源仅添加 8K 到捆绑包中.

score 1 · Accepted Answer

随着 iOS 7.0.4 的发布，iOS7 修复在我当前的项目中中断，因为 7.0.4 没有修复。因此，如果运行次要版本 3 或更低版本，则添加一个次要控件以运行它。

NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
if ([[vComp objectAtIndex:0] intValue] == 7 && [[vComp objectAtIndex:1] intValue] == 0 && [[vComp      objectAtIndex:2] intValue] <= 3 ) {
    CGRect oldBounds = [self.view bounds];
    CGRect newViewBounds = CGRectMake( 0, -10, oldBounds.size.width, oldBounds.size.height-20 );
    CGRect newWebViewBounds = CGRectMake( 0, -20, oldBounds.size.width, oldBounds.size.height-40 );
    [self.view setBounds:newViewBounds];
    [self.webView setBounds:newWebViewBounds];
}

score 0 · Accepted Answer

我首先为 iOS7 开发，但为了与 iOS6 保持兼容，我的做法与 Gimi 的建议完全相反——MainViewController.m我将 y 原点设置为 20px 并将视图高度增加 20px：

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

score 0 · Accepted Answer

我们也可以在我们的 js 文件中检查这个

if (parseFloat(window.device.version) >= 7.0) {

    $("body").addClass("ios7");
}

在 .css 文件中为此定义一个类

 .ios7 .ui-page, .ios7 .ui-header, .ios7 .ui-pane {
     margin-top: 17px !important;
  }

score 0 · Accepted Answer

如果您将屏幕绑定设置为 20px，则上述某些答案会在顶部给您一个黑条，如果您使用 webview.frame.size.height -20px，其他答案将继续缩小您的 webview 屏幕；试试这个，它适用于任何ios，无需更改css，放入里面

- (void)webViewDidFinishLoad:(UIWebView*)theWebView {

//是IOS7及以上

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {

//获取设备屏幕尺寸

    CGRect screenBounds = [[UIScreen mainScreen] bounds];

//将高度降低20px

    int x= screenBounds.size.height -20;

//设置webview top pos 20px，使其位于状态栏下方并缩小20px

    [theWebView setFrame:CGRectMake(0, 20, theWebView.frame.size.width, x )];

}

score 0 · Accepted Answer

0

适用于 iPhoneX

对于以上所有答案：

iPhoneX中状态栏的高度是44而不是20

于 2017-09-13T15:56:18.630 回答

score -1 · Accepted Answer

这是我使用 CSS 和 Javascript 的方法：

1）在您的CSS中定义以下内容：

#ios7-statusbar-fix {
    width:100%;
    height:20px;
    background-color:white;
    position:fixed;
    z-index:10000;
    margin-top:-20px;
    display:none;
}

2)<body>在您的-tag之后添加具有此 id 的 div-container 作为第一个元素：

<body>
    <div id="ios7-statusbar-fix"></div>
…

3)过滤 iOS 7 设备并通过 Javascript 应用更改：

if (navigator.userAgent.match(/(iPad.*|iPhone.*|iPod.*);.*CPU.*OS 7_\d/i)) {
        document.body.style.marginTop = '20px';
        document.getElementById('ios7-statusbar-fix').style.display = 'block';
}

score -2 · Accepted Answer

非常感谢人。它在以下方面运行良好：

MAC OS X 10.9.1- Xcode 5.0.2- cordova 3.3- jQuery mobile 1.3.2。

iphone - iOS 7 状态栏重叠 UI

25 回答 25

Related

Reference