iPhone in-call status bar causes layout problem with tab bar

[Basil Hussain]

I am using a tab bar in my app, but I have noticed a problem that occurs
whenever the iPhone's status bar is in its in-call mode.

The increased size of the in-call status bar causes the tab bar to shift
down so that its bottom edge is off the screen and you can't see any of the
text labels on it. It also leaves a gap between it and the web view. The web
view appears to behave correctly; its top edge remains at the border with
the status bar (i.e. not underneath) and the bottom edge doesn't move. I
have a screen-shot illustrating the problem if anyone needs illustration.

I don't know whether this has anything to with it, but I am currently using
the patch mentioned here:

http://phonegap.lighthouseapp.com/projects/20116/tickets/40#ticket-40-4

I needed this in order to get the tab bar in the correct position on the
screen in the first place!

Also, I wonder if this might be related: when my app loads, for a fraction
of a second before the webview appears, the default loading graphic 'pops'
upward, leaving a blank space underneath that looks to be the same height as
the status bar.

My app is nearly complete, and I'd be loath to submit it with these two
niggling problems.

Regards,
Basil Hussain

[Basil Hussain]

I managed to work out what the problem is with the loading graphic popping
upwards for a fraction of a second. It is another bug in PhoneGap. :-)

The glitch manifests itself at the point of transition between the iPhone
OS-loaded instance of default.png, and the UIImageView instance of the same
graphic that PhoneGap displays whilst the UIWebView is initialising.

The UIImageView is set as a sub-view of the window, and not the root view
controller. Because there is no initialisation of the frame for the
UIImageView, it defaults to 0,0 and width & height stretched to fit the
image. Because that 0,0 position is relative to the window, it ends up
showing underneath the status bar. This is in contrast to iPhone OS's
display of the loading graphics, which it positions below the status bar.

In order to fix it, I simply added the following line in PhoneGapDelegate.m
before line 188 (where it sets imageView.tag = 1):

imageView.frame = [[UIScreen mainScreen] applicationFrame];

This explicitly sets the frame of the UIImageView to exclude the status bar.

I'm still trying to track down the in-call status bar issue, though...

Regards,
Basil Hussain

http://phonegap.lighthouseapp.com/projects/20116/tickets/40#ticket-40-4

Regards,
Basil Hussain

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com

[Basil Hussain]

I have finally solved the tab bar and in-call status bar issue.

Essentially, it boils down to the fact that there is no auto-resizing mask
set on the UITabBar when it is created. I was looking at what the defaults
on a tab bar in Interface Builder were, and it twigged that this might be
it. The tab bar needs to have a flexible width and to be locked to left,
right and bottom margins.

So, that translates to an auto-resize mask of
UIViewAutoResizingFlexibleWidth and UIViewAutoResizingFlexibleTopMargin. The
fix simply constitutes adding the following line somewhere appropriate
within the createTabBar method in UIControls.m:

tabBar.autoresizingMask = (UIViewAutoResizingFlexibleWidth |
UIViewAutoResizingFlexibleTopMargin);

Problem solved! Tab bar doesn't move when toggling in-call status.

I would be grateful if someone could patch this upstream.

[Basil Hussain]

Oops, I forgot about the config setting that allows you to place the tab bar
at either top or bottom. Here's a diff for UIControls.m with a proper fix.

---
/Users/basil/Downloads/phonegap-phonegap-iphone-7b30721/PhoneGapLib/Classes/
UIControls.m 2010-07-17 13:46:32.000000000 +0100
+++ /Users/basil/Documents/PhoneGapLib/Classes/UIControls.m 2010-07-28
17:40:48.000000000 +0100
@@ -35,6 +35,7 @@
tabBar.delegate = self;
tabBar.multipleTouchEnabled = NO;
tabBar.autoresizesSubviews = YES;
+ tabBar.autoresizingMask = UIViewAutoresizingFlexibleWidth;
tabBar.hidden = YES;
tabBar.userInteractionEnabled = YES;

@@ -64,10 +65,11 @@
}
tabBar.hidden = NO;

- CGRect webViewBounds = originalWebViewBounds = webView.bounds;
+ CGRect webViewBounds = originalWebViewBounds =
webView.superview.bounds;

CGRect tabBarBounds;
if (atBottom) {
+ tabBar.autoresizingMask |= UIViewAutoresizingFlexibleTopMargin;
tabBarBounds = CGRectMake(
webViewBounds.origin.x,
webViewBounds.origin.y + webViewBounds.size.height - height,
@@ -81,6 +83,7 @@
webViewBounds.size.height - height
);
} else {
+ tabBar.autoresizingMask |= UIViewAutoresizingFlexibleBottomMargin;
tabBarBounds = CGRectMake(
webViewBounds.origin.x,
webViewBounds.origin.y,

By the way, the change to the initial assignment of webViewBounds there is
what I've found to be a better fix to the issues documented here:

http://phonegap.lighthouseapp.com/projects/20116/tickets/40

Regards,
Basil Hussain

tabBar.autoresizingMask = (UIViewAutoResizingFlexibleWidth |
UIViewAutoResizingFlexibleTopMargin);

Regards,
Basil Hussain

--