iOS 7 状态栏重叠 UI - Cordova 3.0 需要解决方案

Posted 2023-04-18

【中文标题】iOS 7 状态栏重叠 UI - Cordova 3.0 需要解决方案

【英文标题】：iOS 7 status bar overlapping UI - Need solution for Cordova 3.0

【发布时间】：2014-05-10 17:34:54

【问题描述】：

我有一个 PhoneGap / Cordova 3.0 应用程序。状态栏与 ios7 中的 UI 重叠。我读过很多答案说要使用 margin-top:20px 或自定义 StatusBar 插件。问题是，对于 margin-top，当我有一个文本输入焦点时，它会将所有视图向上推（这是预期的），当它失去焦点时，视图会停留在顶部并忽略边距 20px 值。

StatusBar插件需要Cordova 3.1，我想用3.0版本，所以插件方案不适合我的具体应用。

是否有解决 Cordova 3.0 中状态栏重叠问题的解决方案？

我希望状态栏活动（不隐藏）。我使用 AppBuilder 在 Windows 上进行开发。

【参考方案1】：

如果你不想隐藏状态栏 check this solution

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



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

或 隐藏状态栏

在xcode中打开项目首先选择状态栏样式下的复选框（在应用程序启动期间隐藏）-xcode中的常规项目设置

选择 projectname-info.plist（xcode 中的资源部分）

并添加键“查看基于控制器的状态栏外观”和值“NO”

【讨论】：

这段代码是否隐藏了状态栏？ - 我希望它是活跃的。顺便说一句：我没有 XCode，我使用 AppBuilder 在 Windows 上开发。

这个方法会隐藏状态栏

我的错没有提及它。我希望它活跃。对不起。

这正是我所做的。问题是当我单击输入字段并且webview上升时，当文本输入失去焦点时它不会返回到原始的margin-top：20px，它会停留在最顶部（0px）。这正是我的问题。

您需要为键盘显示和隐藏时编写一个事件，该事件将推动 UIView 向上和向下以及方向改变。我试过这个并花了无数个小时试图修复 UIView 与 phonegap 和 iOS 7 的状态栏问题到目前为止最好的解决方案是隐藏状态栏。

【参考方案2】：

这很容易。试试这个吧。

把这段代码放在你的 MainViewController.m 中，就在 MainViewController @implementation 之后和@end 之前。

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

【参考方案3】：

关于失去焦点，

var currentIosVersion = getCurrentIosVersion();//RETURNS IOS VERSION OF THE DEVICE

if(currentIosVersion == "7")


    /* if there is status bar then replace 768  by 748 
       Presence of status bar in our project can be detected via Cordova plugin
    */

    var content="width=device-width, height=768, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi";
    document.getElementsByName('viewport')[0].content = content;

【参考方案4】：

您可以在 config.xml 中添加这一行

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

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。

【参考方案5】：

如果有人在 Cordova 4 中遇到同样的问题，对我有用的是安装 StatusBar 插件：

然后将下一个代码添加到应用程序（在主函数内部）：

StatusBar.overlaysWebView(false); 

为了个性化颜色，我还添加了这个：

StatusBar.backgroundColorByHexString("#1b75bc");

您可以找到文档here