IOS 7 Nav Bar height issues

Getting Started Newbie Questions
#1

Hi guys,

After almost a month of evenings of hard work, I have almost completed my first app.  However I’m stuck trying to get the dimensions right for my navigation bar, which I’m trying to mimic from IOS 7.  I’m keeping the status bar and also adding a newRect behind it and below it for the nav bar.   And after that I’m adding a button for the chevron on the left and optional button on the right.

According to the what I read online, the status bar itself is supposed to be 40 pixels (20 points), while the nav bar extends below it by 88 pixels (44 points), for a total of 128 pixels (64 points) from the top of the screen.

However, on the Corona simulator for the various devices, the value for ‘display.topStatusBarContentHeight’ is not 40, it seems like a scaled value.  For example on the iPads it’s 23.4375, and on the iPhone 4 & 5 it’s 50.   I’m not sure how to specify the height for a nav bar newRect…  I did try a formula of ‘height = (status_bar_height / 40) * 128’   but it looked a bit too big on the iPhones and a bit too small on the iPads!

How would I go about solving this?  

I’m using the config.lua settings from Rob’s September tutorial.

#2

Hi,

Can you try to set this height in the config file and see how it looks:

height = 320\* display.pixelHeight / display.pixelWidth,

Earlier I had problem with the app looking good in iPhone 4 but on the Galaxy it created a gap which looked awful but with that codes the height looks good i.e. the image are always attached to the top of the device.

Best regards,

Tomas

#3

No, that makes the status bar huge,  about 40% of the screen height on an iPhone 4.   It looks a little better if you reverse those two variables above that you mentioned, but still too big.   Thanks anyway

EDIT: Oh wait, you mean in the config.lua?   I don’t want to mess with that file.   Yet, even if I do change it to that value, what would I specify for my nav bar height in the implementation file?

EDIT2:  Hmm… this seems to have fixed the problem!   If I specify 128 for the nav bar height, then it looks just right on ipad and iphone.  Great!  

#4

You just specify that value in the config file and then add a normal value in your code. So if you set X = 0 and Y = 0 it should be at the top.

A problem that I have noticed is that on iPad Retina it seems to create a pixel extra around the screen so you might need to make the image 1 pixel bigger in all (or just the sides if it’s a navigation bar for example) direction and set X = -1 and Y = -1. 

Check that in the simulator and you’ll see what I’m talking about.

For me it haven’t been a problem creating a bigger image or just creating a frame around the whole thing, however it depends on the application.

Best regards,

Tomas

#5

I see what you mean.  I’ll also check later on my actual iPad to see how much it affects it, before I make any additional adjustment.

This proposal of yours actually makes the fonts in the iPad more proportional to the iphone sizes.  They used to look bigger (especially in the nav bar), now they’re the same relative size as on the iPhone.

#6

OK, I’m not sure if I made a mistake somewhere along the way (it’s past 2am and I should sleep), but something happened and the display looks flattened, like there are black borders at the top and bottom and the actual display is squished.  

I changed the config.lua height back to this:

height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ),&nbsp;

And left the navbar height to the hard-coded 128.   It looks great again.  I’m not sure what’s going on – I thought I had saved your height calculation – but I’ll look into this next day.

#7

Hi,

Can you try to set this height in the config file and see how it looks:

height = 320\* display.pixelHeight / display.pixelWidth,

Earlier I had problem with the app looking good in iPhone 4 but on the Galaxy it created a gap which looked awful but with that codes the height looks good i.e. the image are always attached to the top of the device.

Best regards,

Tomas

#8

No, that makes the status bar huge,  about 40% of the screen height on an iPhone 4.   It looks a little better if you reverse those two variables above that you mentioned, but still too big.   Thanks anyway

EDIT: Oh wait, you mean in the config.lua?   I don’t want to mess with that file.   Yet, even if I do change it to that value, what would I specify for my nav bar height in the implementation file?

EDIT2:  Hmm… this seems to have fixed the problem!   If I specify 128 for the nav bar height, then it looks just right on ipad and iphone.  Great!  

#9

You just specify that value in the config file and then add a normal value in your code. So if you set X = 0 and Y = 0 it should be at the top.

A problem that I have noticed is that on iPad Retina it seems to create a pixel extra around the screen so you might need to make the image 1 pixel bigger in all (or just the sides if it’s a navigation bar for example) direction and set X = -1 and Y = -1. 

Check that in the simulator and you’ll see what I’m talking about.

For me it haven’t been a problem creating a bigger image or just creating a frame around the whole thing, however it depends on the application.

Best regards,

Tomas

#10

I see what you mean.  I’ll also check later on my actual iPad to see how much it affects it, before I make any additional adjustment.

This proposal of yours actually makes the fonts in the iPad more proportional to the iphone sizes.  They used to look bigger (especially in the nav bar), now they’re the same relative size as on the iPhone.

#11

OK, I’m not sure if I made a mistake somewhere along the way (it’s past 2am and I should sleep), but something happened and the display looks flattened, like there are black borders at the top and bottom and the actual display is squished.  

I changed the config.lua height back to this:

height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ),&nbsp;

And left the navbar height to the hard-coded 128.   It looks great again.  I’m not sure what’s going on – I thought I had saved your height calculation – but I’ll look into this next day.