Is a scrollView suitable for this?

Solar2D Widgets
#1

Bit of a newbie question - but I’m not that au-fait with the widget library. If I want to replicate something similar to the item menu featured in the screenshot, would a scrollView be the best way of going about this?

I’m happy/competent enough (I think) to code my own solution, but if it’s already there why re-invent the wheel?

The only drawbacks I can think of against using the widget solution is:

a. the need for masks

b. is it easy to “divide” the scrollView for each item and easy enough to insert the images of these items and other related data into each scrollView?

c. the docs make reference to the fact that scrollView doesn’t work with scaling - that sounds pretty concerning?

Any advice or opinions on the matter would be appreciated…

#2

A scrollView is definitely a good way to do this. They should work fine with scaling, and it is possible to create masks dynamically depending on the dimensions of the device.

#3

Hello nick_sherman,

could you please explain how it is possible to create masks dynamically (depending on the dimensions of the device)?

Thanks in advance.

#4

Actually the masks will scale with the device.  In other words if your content area is say 320x480 and your mask is 200x100, on a 640x960 device, the mask will be 400x200 for you.  The only time you need to change the mask is if you’re changing the aspect ratio of the scrollView.  Say on an iPhone 5/Android since it’s taller, you might want a 220x100 mask instead of a 200x100 on an iPhone 4

#5

Hi Rob,

thanks for the answer. My goal is to have a responsive design for my app so that the whole screen can be used. My x and y coords are only percentage values. This means in practice that the scrollview can be on different positions on the screen (dependent on the aspect ratio of the device). I am a newbie, but i think that is not possible with a scrollview widget because then i would need dynamic generated masks. But perhaps i am wrong?  

#6

If the scrollView is full screen, then you don’t need a mask.  If you want it partial, then you will need a mask.  Several community members have worked out a dynamic masking technique that might work for you, but they would have to help you implement it.

When Graphics 2.0 comes out, this masking stuff becomes much easier to do.  There is a new container that acts like a display.newGroup, but unlike a displayGroup which has no defined size, the container does and it’s self masking.  Part of the Graphics 2.0 update will included updated widgets for tableViews and scrollVews that won’t need these masks any longer because the container will do the work.

Graphics 2.0 will roll out to Pro and Enterprise subscribers first through the daily build process. Starter’s won’t get access to it until the next public release, which we have not set a date for yet. 

#7

Thanks Rob for the information.

#8

Hey Rob - I’ve just grabbed the beta of Graphics 2.0 and attempting to insert a scrollView into a container; however I’m just getting  a black screen. I couldn’t see this as a known bug although there is a reference to: “Scrolling doesn’t work properly”.

Assuming there isn’t a bug regarding the insertion of widgets into containers am I doing this properly; simply creating the scrollView, creating the container and then inserting the scrollView into the container?

Cheers…

#9

Maybe think about a slideview from code share? Zoom it out and put in container. Slideview I use in my project does not use scrollview. I’m not on my computer now but got it from code share.

#10

Hey,

I have used the code found here to implement dynamic masks, seems to work fine on different devices.

http://forums.coronalabs.com/topic/33503-dyanmic-tableview-mask/

Hope this helps…

#11

A scrollView is definitely a good way to do this. They should work fine with scaling, and it is possible to create masks dynamically depending on the dimensions of the device.

#12

Hello nick_sherman,

could you please explain how it is possible to create masks dynamically (depending on the dimensions of the device)?

Thanks in advance.

#13

Actually the masks will scale with the device.  In other words if your content area is say 320x480 and your mask is 200x100, on a 640x960 device, the mask will be 400x200 for you.  The only time you need to change the mask is if you’re changing the aspect ratio of the scrollView.  Say on an iPhone 5/Android since it’s taller, you might want a 220x100 mask instead of a 200x100 on an iPhone 4

#14

Hi Rob,

thanks for the answer. My goal is to have a responsive design for my app so that the whole screen can be used. My x and y coords are only percentage values. This means in practice that the scrollview can be on different positions on the screen (dependent on the aspect ratio of the device). I am a newbie, but i think that is not possible with a scrollview widget because then i would need dynamic generated masks. But perhaps i am wrong?  

#15

If the scrollView is full screen, then you don’t need a mask.  If you want it partial, then you will need a mask.  Several community members have worked out a dynamic masking technique that might work for you, but they would have to help you implement it.

When Graphics 2.0 comes out, this masking stuff becomes much easier to do.  There is a new container that acts like a display.newGroup, but unlike a displayGroup which has no defined size, the container does and it’s self masking.  Part of the Graphics 2.0 update will included updated widgets for tableViews and scrollVews that won’t need these masks any longer because the container will do the work.

Graphics 2.0 will roll out to Pro and Enterprise subscribers first through the daily build process. Starter’s won’t get access to it until the next public release, which we have not set a date for yet. 

#16

Thanks Rob for the information.

#17

Hey Rob - I’ve just grabbed the beta of Graphics 2.0 and attempting to insert a scrollView into a container; however I’m just getting  a black screen. I couldn’t see this as a known bug although there is a reference to: “Scrolling doesn’t work properly”.

Assuming there isn’t a bug regarding the insertion of widgets into containers am I doing this properly; simply creating the scrollView, creating the container and then inserting the scrollView into the container?

Cheers…

#18

Maybe think about a slideview from code share? Zoom it out and put in container. Slideview I use in my project does not use scrollview. I’m not on my computer now but got it from code share.

#19

Hey,

I have used the code found here to implement dynamic masks, seems to work fine on different devices.

http://forums.coronalabs.com/topic/33503-dyanmic-tableview-mask/

Hope this helps…