Here’s a video response to your post Tomas.
–SonicX278
There was also a problem like like this here.
https://forums.coronalabs.com/topic/32834-images-in-a-scrollview-not-centering/
I don’t understand what the fix he used.
–SonicX278
Okay, so display.contentCenterY = display.contentHeight * 0.5 according to the documentation:
https://docs.coronalabs.com/api/library/display/contentCenterY.html
However display.contentHeight are values taken from the config file which most likely look like this:
width = 320, height = 480,
So now your variable centerY becomes 480 * 0.5 = 240 and that is why it works on iPhone 4 because that is the height of that screen. However if you use an iPhone 5 the height is 568 but the display.contentHeight is still the same (480) as it takes the same value from the config file.
How can we fix this then?
First read this document: https://forums.coronalabs.com/topic/60994-image-does-not-center-after-added-to-scrollview/#entry316260
Now, implement data for each device or use this snippet in config.lua:
--calculate the aspect ratio of the device: local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.floor( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.floor( 320 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }
Now this code will work on all devices:
local widget = require( "widget" ) local centerX = display.actualContentWidth \* 0.5 local centerY = display.actualContentHeight \* 0.5 local actualW = display.actualContentWidth local actualH = display.actualContentHeight local scrollView = widget.newScrollView { x = centerX, y = centerY, width = actualW, height = actualH, horizontalScrollDisabled = true, listener = scrollListener } local topBluePart = widget.newButton { x = centerX, y = centerY, width = actualW, height = 50, defaultFile = "button.png", onEvent = bob } topBluePart.anchorX = 0.5 topBluePart.anchorY = 0.5 scrollView:insert( topBluePart )
Best regards,
Tomas
In short:
centerY does not equal display.actualContentHeight * 0.5
centerY equals display.contentHeight * 0.5
You could set the height to display.actualContentHeight and centerY as display.actualContentHeight * 0.5 but the problems are with anchors so it ends up looking like this:
I think it’s just better to set the config file and it seems to work very well with the majority of the devices that exists.
Best regards,
Tomas
Well i have a LOT of images in my app and if i go and change up the config then it will move all the images? Then ill have to spend hours re positioning everything. So there is no way to do it with the original config.?
–SonicX278
I think this code works:
local yOffset = ( display.actualContentHeight - display.contentHeight ) \* 0.5 local xOffset = ( display.actualContentWidth - display.contentWidth ) \* 0.5 local actualH = display.actualContentHeight local actualW = display.actualContentWidth local centerY = actualH \* 0.5 local centerX = actualW \* 0.5 local widget = require( "widget" ) local scrollView = widget.newScrollView { x = centerX + xOffset, y = centerY - yOffset, width = actualW, height = actualH, horizontalScrollDisabled = true, listener = scrollListener } local topBluePart = widget.newButton { x = 0, y = centerY, width = 100, height = 100, defaultFile = "button.png", --onEvent = bob } scrollView:insert( topBluePart )
Best regards,
Tomas
Still nothing.
–SonicX278
Did you change back your config file to the original? I.e.:
application = { content = { width = 320, height = 480, scale = "letterBox", fps = 30, }, }Yes. I never changed it to the other one.
–SonicX278
Does that mean that you didn’t even try it?
Well i can’t because all my images will move.
–SonicX278
What i ended up doing is this in config.
content = { width = display.actualContentWidth, height = display.actualContentHeight, scale = "letterBox", fps = 30, }, }
What do you guys think on this? Will it be ok?
–SonicX278
But now the when i go to refresh the simulator it just stays black and sometimes refreshes.
–SonicX278
Hey @tomaswesterlund! So i was still stuck and decided to give your config that you suggested a go! ANDD It worked! Thanks!
I have a question tho – Would you mind explaining how that config works and calculates? Thanks!
–SonicX278
Great to hear, which configuration did you end up using?
Best regards,
Tomas
--calculate the aspect ratio of the device: local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.floor( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.floor( 320 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }
That one.
–SonicX278