0

I am developing a Phonegap app for iOS (and others). The view is landscape only. I am using Phonegap Build with PG 3.1. I am testing on an iPad3 with iOS7. I need a solution that works not just on iOS7, but also a couple of versions back.

In the Xcode iPad emulator, the app uses the entire screen. The status bar is transparent and overlaid on top of the app. However, when I test the app on my iPad, the status bar isn't transparent anymore, and pushes the app down 20px, which means the bottom 20px disappear.

For this particular app, it would be much better if the top was overlaid, so that the important bottom part of the app wasn't pushed out of view. So the question is: Can I either make the status bar disappear completely, or can I make it transparent and overlaid?

I have tried the Status Bar plugin for Phonegap, but it doesn't seem to work properly. I used StatusBar.hide() in my deviceReady function, but the bar remained in view. And worse, the right-hand part of the screen became completely unresponsive to touch events. As if there was a transparent overlay on that part of the screen, possibly related to this bug. As described there, the overlay isn't transparent though, but it seems to cover exactly the same area that goes unresponsive in my case.

Per Quested Aronsson
  • 11,380
  • 8
  • 54
  • 76
  • Opinion: You don't want to do that. If your view is scrollable, all sorts of ugly text will side under the status bar. – brandonscript Dec 21 '13 at 07:40
  • The view itself is not scrollable, but some views contain scrollable elements. – Per Quested Aronsson Dec 21 '13 at 07:43
  • In that case, why not shrink your view down by 20pt and show it below the status bar? would have the same effect, no? – brandonscript Dec 21 '13 at 07:45
  • I could do that, but would prefer the transparent overlaid status bar, if it works. What about iOS6 and iOS5 compatibility for these different solutions? – Per Quested Aronsson Dec 21 '13 at 07:57
  • There's no transparent overlay for ios5/6 -- only 7. What's the effect you're going for anyway? You'd still need a solid color under it to make the text readable? – brandonscript Dec 21 '13 at 08:00
  • All I want is to use the full screen with or without the status bar. If I can't get rid of it completely, the second best would be to have it overlaid, and transparent if possible. I want to minimize the differences in the app necessary to support different OS versions. – Per Quested Aronsson Dec 21 '13 at 21:23
  • Why not just remove it altogether then? Create a full screen app and just hide it entirely - then you don't need to worry about it? – brandonscript Dec 21 '13 at 22:34
  • I'm using Phonegap Build with PG 3.1, and it doesn't seem possible to remove the status bar with it. Otherwise, this is probably the best option altogether. – Per Quested Aronsson Dec 22 '13 at 21:15

1 Answers1

0

I got this to work beautifully in Cordova 3.6 + iOS 7.1. And considering that iOS 7 and 8 each have 50% of market share this solution should be enough.

Plugin I'm using: org.apache.cordova.statusbar

Instead of using StatusBar.hide() I used:

var hideSb = function(){
//        StatusBar.hide;
        cordova.exec(null, null, 'StatusBar', 'hide', ['Ehi', 'You']);
    };

Call it in fn onDeviceReady. And this is based on:

cordova.exec(
    callbackFn,     // A callback function that deals with the JSON object from the CDVPluginResult instance
    errorFn,        // An error handler
    'TargetClass',  // What class to target messages to (method calls = message in ObjC)
    'methodToCall', // Which method to call
    [ 'array', 'of', 'arguments'] // These go in the CDVInvokedUrlCommand instance's.arguments property
);

And I've experienced that wrapping it in a function works and just using it straight away doesn't work at times. Also I'm clueless about the arguments passed!

allwynmasc
  • 393
  • 5
  • 18