iOS 7状态栏重叠UI

时间:2013-09-19 04:27:52

标签: iphone cordova ios7 xcode5

我最近升级到xcode 5,当我在iOS模拟器中运行我的应用程序时,启动画面与状态栏重叠,当你在应用程序中时,状态栏重叠到我的应用程序上的元素,就像我在后面的后退按钮我的应用程序的左上角。我使用phonegap 2.9构建我的应用程序。任何想法我如何才能正确呈现。

splashscreen

UI

25 个答案:

答案 0 :(得分:67)

如果您使用的是故事板,则可以解决此问题,例如:iOS 7 - Status bar overlaps the view

如果您没有使用情节提要,那么您可以在AppDelegate.m的{​​{1}}中使用此代码:

did finishlaunching

另请参阅此问题:Status bar and navigation bar issue in IOS7

答案 1 :(得分:50)

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

答案 2 :(得分:36)

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

enter image description here

属性源代码是:

enter image description here

答案 3 :(得分:9)

我在使用phonegap打开inApp浏览器时遇到问题。 Gimi的修复效果很好,但每次打开inApp浏览器时,屏幕都会在底部缩小。所以我添加了一个if语句来检查webview的y origin是否为0.InApp浏览器不再具有y origin 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];
}

解决方案不是我的,但我找不到来源。希望它有所帮助!

答案 4 :(得分:6)

将此代码段放在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);
        } 
    } 
}

答案 5 :(得分:5)

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

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

这也适用于尝试支持以前的iOS版本。

答案 6 :(得分:5)

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

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

这对我来说似乎毫无问题。

答案 7 :(得分:5)

实际上,我发现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];
}

答案 8 :(得分:5)

如果您正在开发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设置为

答案 9 :(得分:4)

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

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

这根本没有状态栏。

答案 10 :(得分:3)

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

答案 11 :(得分:3)

来自Apple iOS7 transition Guide

具体地,

self.automaticallyAdjustsScrollViewInsets = YES;
self.edgesForExtendedLayout = UIRectEdgeNone;
当我不想重叠时,

适用于我,我有一个UITableViewController。

答案 12 :(得分:3)

要解决状态栏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的这个问题和其他问题。

答案 13 :(得分:2)

如果你正在使用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/

我知道这有点笨拙,但它可以节省在Objective-C级别处理它的问题。不过,对于那些没有使用Sencha Touch和Cordova的人来说,这并不是一件好事。

答案 14 :(得分:2)

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

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

我会等你的反馈! :)

答案 15 :(得分:2)

在.plist文件集属性中:

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

它隐藏了statusBar。

答案 16 :(得分:1)

我开始走这条路,但我有自己的core view导航控件,我滑入一个框架,通常用一个共同的标题栏和tabbar包裹核心;没有storyboard,没有UINavigationController

开始快速复杂,添加和减去状态栏的20个像素。然后是一个顿悟。

我制作了.xib file的副本,告诉Xcode将它显示为iOS 7布局,重新排列所有内容,并在代码中放置一个6/7开关..即时,一切工作正常,附加资源只为捆绑添加8K。

答案 17 :(得分:1)

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

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

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修改为您的应用程序

答案 18 :(得分:1)

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

答案 19 :(得分:1)

我们也可以在我们的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;
  }

答案 20 :(得分:0)

适用于iPhoneX

对于上述所有答案:

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

答案 21 :(得分:0)

如果您将屏幕设置为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 )];

}

答案 22 :(得分:0)

以下是我使用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>标记之后添加带有此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';
}

答案 23 :(得分:0)

我首先为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;
}

答案 24 :(得分:0)

非常感谢你。它运作良好:

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