Image does not center after added to scrollView.

Solar2D General Questions/Discussion
#1

Ok. So I’m using widget.newButton like this.

local topBluePart = widget.newButton { x = centerX, y = centerY, width = actualW, height = 50, defaultFile = "gallery/bluePartWallpaper.png", onEvent = bob }

And with this code above the image centers perfect. As soon as i add this.

scrollView:insert(topBluePart)

The image is about 100 pixels above the center.

This is the scrollView.

 local scrollView = widget.newScrollView { x = centerX, y = centerY, width = actualW, height = actualH, horizontalScrollDisabled = true, listener = scrollListener }

There is no need for the scrollListener code so i wont post it. ( It’s the basic code from the docs anyways. )

So what am i doing wrong here? 

This is being done in a main.lua and that all the code. ( I’m trying to get this figured out before adding it into my main code. )

Thanks!

–SonicX278

#2

Using this code:

local widget = require( "widget" ) local actualW = display.actualContentWidth local actualH = display.actualContentHeight local centerX = actualW \* 0.5 local centerY = actualH \* 0.5 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 = 100, height = 100, defaultFile = "button.png", --onEvent = bob } topBluePart.anchorX = 0.5 topBluePart.anchorY = 0.5 scrollView:insert( topBluePart )

It looks like good on my side in the simulator using iPhone4.

Would you be able to explain a little bit more?

Best regards,

Tomas

#3

Here’s a video response to your post Tomas.

https://youtu.be/BG1A4hAY3TI

–SonicX278

#4

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

#5

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

#6

In short:

centerY does not equal display.actualContentHeight * 0.5

centerY equals display.contentHeight * 0.5

#7

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:

5jtu7o.png

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

#8

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

#9

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

#10

Still nothing.

–SonicX278

#11

Did you change back your config file to the original? I.e.:

application = { content = { width = 320, height = 480, scale = "letterBox", fps = 30, }, }
#12

Yes. I never changed it to the other one.

–SonicX278

#13

Does that mean that you didn’t even try it?

#14

Well i can’t because all my images will move.

–SonicX278

#15

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

#16

But now the when i go to refresh the simulator it just stays black and sometimes refreshes.

–SonicX278

#17

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

#18

Great to hear, which configuration did you end up using?

Best regards,

Tomas

#19 
--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

#20

Using this code:

local widget = require( "widget" ) local actualW = display.actualContentWidth local actualH = display.actualContentHeight local centerX = actualW \* 0.5 local centerY = actualH \* 0.5 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 = 100, height = 100, defaultFile = "button.png", --onEvent = bob } topBluePart.anchorX = 0.5 topBluePart.anchorY = 0.5 scrollView:insert( topBluePart )

It looks like good on my side in the simulator using iPhone4.

Would you be able to explain a little bit more?

Best regards,

Tomas