Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

NavigationBar with different device appearance
Started by jdsmedeirosbr Mar 02 2018 07:37 AM

5 replies to this topic
navigationbar iphone x

Best Answer Rob Miracle , 03 March 2018 - 09:21 AM

@sgs is right, but lets look at why?

 

Your config.lua defines a virtual grid/screen.  Because the iPhone 10 is greater than 960 pixels high, you're going to end up with a virtual screen size of 320 x 568 and by default it will be centered on the screen. This is roughly a 16:9 aspect ratio (1.7778) content area (the shape of HDTVs).  The problem with the iPhone 10 has an aspect ratio of 19.5:9 (2.16667:1) and you really have an actual screen size of 320x693.

 

What trips up many people is that they assume display.contentWidth and display.contentHeight will return you the full screen when it does not. All those two constants provide are the numbers you put in config.lua.  Instead you have display.actualContentWidth, display.actualContentHeight which returns you the converted physical screen size (converted to your content units, i.e 320 and 693). 

 

Because the virtual screen you defined is centered by default, those extra pixels (693 - 568 = 125) will be split on both sides of the content area. This means that you will have 62.5 content units of space that's on top of your content area.  We offer as mentioned above display.screenOriginX and display.screenOriginY to get the actual top of the screen.

 

Now all that said, centering your content area is a concept really useful for games.  For business type apps, it may make you have to work harder than you need to.  You should consider adding the 

xAlign = "left",
yAlign = "top",

to your config.lua.  This will guarantee that 0,0 will be the top, left of your screen. Then display.actualContentHeight, Width will get you the bottom,  right corner.  The drawback here is that display.contentCenterX, display.contentCenterY won't return you the center of the screen since you shifted the content area. But with your config.lua the display.contentCenterX will still be accurate, so you can use it for left-to-right positioning and you're not likely going to use display.contentCenterY anyway.

 

Also as @sgs mentioned, you will have to deal with the sensor housing/notch. You should use the safe zone offsets to add to any UI elements the user will interact with, but you should still extend your background to cover the full screen.

 

Rob

[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

jdsmedeirosbr

[GLOBAL: userInfoPane.html]
jdsmedeirosbr
  • Enthusiast

  • 52 posts
  • Corona SDK

I created an application and I inserted a navigationBar that is at the top of all the devices in the simulator, but in the iPhone X simulator it has the lowest bar, how can I solve this problem?

 

 

Attached Files



[TOPIC: post.html]
#2

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,331 posts
  • Enterprise

Without seeing your config.lua and your code for creating your nav bar, we don't have a clue about how to answer this question.  Please share that code. Make sure to use the code formatting button (the <> in the row with Bold/Italic) and paste your code into the popup window.

 

Rob



[TOPIC: post.html]
#3

jdsmedeirosbr

[GLOBAL: userInfoPane.html]
jdsmedeirosbr
  • Enthusiast

  • 52 posts
  • Corona SDK

Config.lua
 
if string.sub(system.getInfo("model"),1,4) == "iPad" then
application =
{
content =
{
width = 360,
height = 480,
scale = "letterbox",
}
}
elseif string.sub(system.getInfo("model"),1,2) == "iP" and display.pixelHeight > 960 then
application =
{
content =
{
width = 320,
height = 568,
scale = "letterbox",
},
}
elseif string.sub(system.getInfo("model"),1,2) == "iP" then
application =
{
content =
{
width = 320,
height = 480,
scale = "letterbox",
},
}
end

Code of Navigation:

local composer = require("composer")local widget = require ("widget")
local scene = composer.newScene()
function scene:create( event )
local sceneGroup = self.view
navBar = display.newRect(sceneGroup,0, 0, display.contentWidth, display.contentHeight * (13.4/100) )
navBar:setFillColor(.2,.2,.2)
navBar.anchorX = 0
navBar.anchorY = 0


[TOPIC: post.html]
#4

SGS

[GLOBAL: userInfoPane.html]
SGS
  • Corona Geek

  • 2,120 posts
  • Corona SDK

You will need to work with negative offsets for iPhoneX (and any overly tall devices). 

 

Try https://docs.coronalabs.com/api/library/display/screenOriginY.html

 

Because of the silly design you will need to work with "safe inserts".  More about that here https://docs.coronalabs.com/api/library/display/safeScreenOriginY.html



[TOPIC: post.html]
#5

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,331 posts
  • Enterprise

  Best Answer

@sgs is right, but lets look at why?

 

Your config.lua defines a virtual grid/screen.  Because the iPhone 10 is greater than 960 pixels high, you're going to end up with a virtual screen size of 320 x 568 and by default it will be centered on the screen. This is roughly a 16:9 aspect ratio (1.7778) content area (the shape of HDTVs).  The problem with the iPhone 10 has an aspect ratio of 19.5:9 (2.16667:1) and you really have an actual screen size of 320x693.

 

What trips up many people is that they assume display.contentWidth and display.contentHeight will return you the full screen when it does not. All those two constants provide are the numbers you put in config.lua.  Instead you have display.actualContentWidth, display.actualContentHeight which returns you the converted physical screen size (converted to your content units, i.e 320 and 693). 

 

Because the virtual screen you defined is centered by default, those extra pixels (693 - 568 = 125) will be split on both sides of the content area. This means that you will have 62.5 content units of space that's on top of your content area.  We offer as mentioned above display.screenOriginX and display.screenOriginY to get the actual top of the screen.

 

Now all that said, centering your content area is a concept really useful for games.  For business type apps, it may make you have to work harder than you need to.  You should consider adding the 

xAlign = "left",
yAlign = "top",

to your config.lua.  This will guarantee that 0,0 will be the top, left of your screen. Then display.actualContentHeight, Width will get you the bottom,  right corner.  The drawback here is that display.contentCenterX, display.contentCenterY won't return you the center of the screen since you shifted the content area. But with your config.lua the display.contentCenterX will still be accurate, so you can use it for left-to-right positioning and you're not likely going to use display.contentCenterY anyway.

 

Also as @sgs mentioned, you will have to deal with the sensor housing/notch. You should use the safe zone offsets to add to any UI elements the user will interact with, but you should still extend your background to cover the full screen.

 

Rob



[TOPIC: post.html]
#6

jdsmedeirosbr

[GLOBAL: userInfoPane.html]
jdsmedeirosbr
  • Enthusiast

  • 52 posts
  • Corona SDK

Thank you all!




[topic_controls]
[/topic_controls]