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?
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
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 = 0You 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
@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
Thank you all!
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
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 = 0You 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
@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
Thank you all!