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

Question

我有一个使用 PhoneGap / Cordova 3.0 的应用程序。在 iOS7 上，状态栏会覆盖 UI。我阅读了许多答案，说要使用 margin-top:20px 或自定义 StatusBar 插件。问题是，使用 margin-top 时，当我有一个文本输入框聚焦时，它会将整个视图向上推（这是预期的），当它失去焦点时，视图会停留在顶部并忽略 margin 20px 值。

StatusBar 插件需要 Cordova 3.1，而我想使用 3.0 版本，因此该插件解决方案对我的特定应用程序不好。

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

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

- Liron Harel

Answer 1

如果您不想隐藏状态栏，请参考此解决方案。

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


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

或者 隐藏状态栏

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

选择项目名称-info.plist（xcode的资源部分）

然后添加键“View controller-based status bar appearance”和值“NO”

- Arjun T Raj

---

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

我的错，我没有提到它。我想让它激活。抱歉。 - Liron Harel

这正是我已经做的。问题是，当我点击一个输入字段并且 webview 上升时，当文本输入失去焦点时它不会返回到原始 margin-top:20px，它停留在最上面 (0px)。这正是我的问题所在。 - Liron Harel

@IdanShechter 我会看看能否找到我的代码，唯一的问题是状态栏会覆盖PhoneGap页面。 - Stephen Corcoran

@StephenCorcoran http://stackoverflow.com/questions/22670896/phonegap-getpicture-function-long-delay-resumes-on-recall - Liron Harel

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

- Nurdin

Answer 3

如果有人在 Cordova 4 中遇到相同的问题，我解决的方法是安装 StatusBar 插件：

然后将下面的代码添加到应用程序中（在主函数内）：

StatusBar.overlaysWebView(false); 

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

StatusBar.backgroundColorByHexString("#1b75bc");

您可以在这里找到文档。

- mauronet

Answer 4

你可以在config.xml文件中添加这行代码。

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

- Daniel Interliche

---

这并没有提供问题的答案。如果您想对作者进行批评或请求澄清，请在他们的帖子下留言。 - Bruce

Answer 5

关于失去焦点，

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;

}

- user3589009