How to use ScrollView in all orientations?

Solar2D Widgets
#1

I am a newbie and so I apologize if this is an obvious question. I have searched here but haven’t been able to find an adequate answer. I am trying to scroll over a map comprised of a few smaller images. I would like to be able to do that in both orientations. But it doesn’t quite work. I am completely stumped. So any and all help will be deeply appreciated. This is

my code so far:-

scrollview = widget.newScrollView{ --x = centerX, --y = centerY, top = screenTop, left = screenLeft, width = screenWidth, height = screenHeight, horizontalScrollDisabled = true, hideScrollBar = true, topPadding = 0, friction = 1.5, isBounceEnabled = false, hideBackground = true } scrollview.anchorY=0.5 scrollview.anchorX=0.5 sceneGroup:insert(scrollview) scrollview:insert(layers) for i = 1,2 do local bg1 = display.newImageRect( layers, "images/Map"..(1+(i-1)\*2)..".png", 340, 340, true ) bg1.x = centerX-200 bg1.y = centerY+360-170\*(i-1)\*2 bg1.anchorX = 0 --scrollview:insert(bg1) end for i = 1,2 do local bg1 = display.newImageRect( layers, "images/Map"..(2+(i-1)\*2)..".png", 340, 340, true ) bg1.x = centerX+124 bg1.y = centerY+360-170\*(i-1)\*2 bg1.anchorX = 0 --scrollview:insert(bg1) end end

Now I have added code to check for orientation change with Resize and then change the scrollview. width and scrollview.height accordinly but it still doesn’t work properly.

#2

     horizontalScrollDisabled = true,

That’s going to prevent your from scrolling side to side.   Our scrollView object should let you scroll up and down, or left to right, but not diagonally.

Rob

#3

Thanks for your reply.

My problem is that the height and width of the scrollview has to be changed every time the device orientations. I have tried making a new scrollview every time the device orientation changes but something always goes awry. Is there any way to make sure that every time a new orientation takes place, the scrollview works?

#4

Hi @dimention5studio,

One approach would be to create a scrollView that can adapt to the longest dimension of the content area. For example, in portrait orientation, the scrollView would actually bleed off the left and right edges, and you could re-configure the content within the view to fit on the screen (but the edges of the scrollView would be offscreen).

Then, for changing orientation, you could use an “orientation” or “resize” event listener to detect that, then depending on the orientation, “unlock” the scrollView for the proper scrolling axis while *locking* it for the other axis:

http://docs.coronalabs.com/api/type/ScrollViewWidget/setIsLocked.html

Best regards,

Brent

#5

Thanks for your reply, Brent.

I’ll try it out right away. In the meantime I was trying out something different.

sennzq.jpg nx3pti.jpg

By pressing on the green arrows, the player can move the map up or down. As you can see, it works in the simulator.

But it  doesn’t do so in a real device.Instead I get the following results.

ed4pu.jpg qx4gau.jpg

I am at my wits end. I have no idea what I am doing wrong here. If you can, please help.

#6

Hi @dimention5studio,

This could be any number of things. Most likely it’s how you’ve set up your config.lua, and whether you’re properly using dynamic image selection. Have you read and do you fully understand these topics? If not, I suggest that you read the entire guide on this, and also watch the videos I’ve linked:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

http://youtu.be/RwVlzJtQWd8

http://youtu.be/QCU_G3GCerg

Brent

#7

Thanks for the links. I went through them.

I created a new display.newGroup and put all the maps in it. Turns out I needed to be very careful about how to place the group anchor and position it after each orientation change. For some reason it was working in the simulator and not a real device and I had to create a new main.lua from the ground up and the problem went away. But I am still now sure what was not working the first time.

#8

     horizontalScrollDisabled = true,

That’s going to prevent your from scrolling side to side.   Our scrollView object should let you scroll up and down, or left to right, but not diagonally.

Rob

#9

Thanks for your reply.

My problem is that the height and width of the scrollview has to be changed every time the device orientations. I have tried making a new scrollview every time the device orientation changes but something always goes awry. Is there any way to make sure that every time a new orientation takes place, the scrollview works?

#10

Hi @dimention5studio,

One approach would be to create a scrollView that can adapt to the longest dimension of the content area. For example, in portrait orientation, the scrollView would actually bleed off the left and right edges, and you could re-configure the content within the view to fit on the screen (but the edges of the scrollView would be offscreen).

Then, for changing orientation, you could use an “orientation” or “resize” event listener to detect that, then depending on the orientation, “unlock” the scrollView for the proper scrolling axis while *locking* it for the other axis:

http://docs.coronalabs.com/api/type/ScrollViewWidget/setIsLocked.html

Best regards,

Brent

#11

Thanks for your reply, Brent.

I’ll try it out right away. In the meantime I was trying out something different.

sennzq.jpg nx3pti.jpg

By pressing on the green arrows, the player can move the map up or down. As you can see, it works in the simulator.

But it  doesn’t do so in a real device.Instead I get the following results.

ed4pu.jpg qx4gau.jpg

I am at my wits end. I have no idea what I am doing wrong here. If you can, please help.

#12

Hi @dimention5studio,

This could be any number of things. Most likely it’s how you’ve set up your config.lua, and whether you’re properly using dynamic image selection. Have you read and do you fully understand these topics? If not, I suggest that you read the entire guide on this, and also watch the videos I’ve linked:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

http://youtu.be/RwVlzJtQWd8

http://youtu.be/QCU_G3GCerg

Brent

#13

Thanks for the links. I went through them.

I created a new display.newGroup and put all the maps in it. Turns out I needed to be very careful about how to place the group anchor and position it after each orientation change. For some reason it was working in the simulator and not a real device and I had to create a new main.lua from the ground up and the problem went away. But I am still now sure what was not working the first time.