How to make a store display (for in-app) that you can moved around with a finger sweep?

[LairdGames]

Hello,

I started working on add a store in my Space Command app so people can purchase gold coins, powerups…One thing I really love on some apps is the type of store where the user can see a bunch of items in form of images (describing the in-app and the price) place horizontally. And all you need to do is sweep left/right to see all the items.

Anyway the questions how to do that? I can see scrollview widget (which I already use for my help text in my app) but also see something about tableView which I never used. Could anybody share some code spinets or at least describe a solution. I would appreciated very much.

Thanks so much.

Mo

@Corona: It maybe even worth it to make a tutorial out of it since I am sure i am not the only one with this type of needs! [import]uid: 100814 topic_id: 35618 reply_id: 335618[/import]

[Naomi]

Hey, Mo @LairdGames, you might want to look into this library:

http://developer.coronalabs.com/code/gesture-recognition-library-corona-sdk

It’s in my todo list to look into this (meaning, I haven’t used it), but it might be what you are looking for?

Naomi [import]uid: 67217 topic_id: 35618 reply_id: 141606[/import]

[nick_sherman]

You could just use a scrollView widget that scrolls horizontally rather than vertically. Simply add all the images, text etc to the scrollView along with a touch listener, including those ‘off-screen’, and the user can swipe to move the scrollView content along. [import]uid: 93133 topic_id: 35618 reply_id: 141608[/import]

[LairdGames]

@Naomi. Thanks, that look s a fantastic library! Unfortunately it is not longer there it seems (broken link)

@Nick-sherman: Looks like a good solution. I did not think about adding a touch listener to the added images!!! brain dead today! I will experiment with this one for sure.

If anybody any suggestions, I will love it.

Mo [import]uid: 100814 topic_id: 35618 reply_id: 141611[/import]

[Naomi]

Hey, Mo @LairdGames, if you are still interested, here’s the link that works:

http://www.concat.pl/gesture-recognition-lib-for-corona-sdk-moduleles/

@Nick-sherman, sounds great. I might eventually go that route too. (I’m sort of waiting for the widget update that Danny is working on before looking further into this whole thing.)

Naomi [import]uid: 67217 topic_id: 35618 reply_id: 141615[/import]

[LairdGames]

@Naomi. Absolutely! Thank you very much for finding this! I downloaded and will play with it.

Mo. [import]uid: 100814 topic_id: 35618 reply_id: 141624[/import]

[LairdGames]

I am first trying the scroll view method (since I am already using scroll view in my app) I am wondering Nick you would differentiate the touch on the images (as buttons for in-app) and the background (the scrollview object)?

I guess I need to be able to scroll the all thing wether I first touch the background or one of the up image. I am thinking maybe using the “release” even on the image?

Any suggestions?

Thanks guys.

Mo [import]uid: 100814 topic_id: 35618 reply_id: 141639[/import]

[nick_sherman]

You’ll need something like this within your button touch listener. It will take the focus of the touch initially, and if the user moves their finger, return control to the scrollViewListener.

[lua]if event.phase == “began” then

display.getCurrentStage():setFocus(obj) – set focus on button, otherwise scrollView will take it

end

if event.phase == “moved” then – give scrollView the focus back if finger moved

local dx = math.abs( event.x - event.xStart ) – work out how far finger moved on X axis

– if finger drags button more than 2 pixels, pass focus to scrollView
if dx > 2 then
scrollView:takeFocus( event )
end
end[/lua]

You also need to apply this setting to your scrollView:

[lua]scrollView.isHitTestMasked = true – allows touches to propagate to buttons within the scrollView[/lua] [import]uid: 93133 topic_id: 35618 reply_id: 141653[/import]

[LairdGames]

Fantastic Nick! I will experiment and let you know.

THANKS, I appreciate the help.

Mo [import]uid: 100814 topic_id: 35618 reply_id: 141732[/import]

[Naomi]

Hey, Mo @LairdGames, you might want to look into this library:

http://developer.coronalabs.com/code/gesture-recognition-library-corona-sdk

It’s in my todo list to look into this (meaning, I haven’t used it), but it might be what you are looking for?

Naomi [import]uid: 67217 topic_id: 35618 reply_id: 141606[/import]

[nick_sherman]

You could just use a scrollView widget that scrolls horizontally rather than vertically. Simply add all the images, text etc to the scrollView along with a touch listener, including those ‘off-screen’, and the user can swipe to move the scrollView content along. [import]uid: 93133 topic_id: 35618 reply_id: 141608[/import]

[LairdGames]

@Naomi. Thanks, that look s a fantastic library! Unfortunately it is not longer there it seems (broken link)

@Nick-sherman: Looks like a good solution. I did not think about adding a touch listener to the added images!!! brain dead today! I will experiment with this one for sure.

If anybody any suggestions, I will love it.

Mo [import]uid: 100814 topic_id: 35618 reply_id: 141611[/import]

[Naomi]

Hey, Mo @LairdGames, if you are still interested, here’s the link that works:

http://www.concat.pl/gesture-recognition-lib-for-corona-sdk-moduleles/

@Nick-sherman, sounds great. I might eventually go that route too. (I’m sort of waiting for the widget update that Danny is working on before looking further into this whole thing.)

Naomi [import]uid: 67217 topic_id: 35618 reply_id: 141615[/import]

[LairdGames]

@Naomi. Absolutely! Thank you very much for finding this! I downloaded and will play with it.

Mo. [import]uid: 100814 topic_id: 35618 reply_id: 141624[/import]

[LairdGames]

I am first trying the scroll view method (since I am already using scroll view in my app) I am wondering Nick you would differentiate the touch on the images (as buttons for in-app) and the background (the scrollview object)?

I guess I need to be able to scroll the all thing wether I first touch the background or one of the up image. I am thinking maybe using the “release” even on the image?

Any suggestions?

Thanks guys.

Mo [import]uid: 100814 topic_id: 35618 reply_id: 141639[/import]

[nick_sherman]

You’ll need something like this within your button touch listener. It will take the focus of the touch initially, and if the user moves their finger, return control to the scrollViewListener.

[lua]if event.phase == “began” then

display.getCurrentStage():setFocus(obj) – set focus on button, otherwise scrollView will take it

end

if event.phase == “moved” then – give scrollView the focus back if finger moved

local dx = math.abs( event.x - event.xStart ) – work out how far finger moved on X axis

– if finger drags button more than 2 pixels, pass focus to scrollView
if dx > 2 then
scrollView:takeFocus( event )
end
end[/lua]

You also need to apply this setting to your scrollView:

[lua]scrollView.isHitTestMasked = true – allows touches to propagate to buttons within the scrollView[/lua] [import]uid: 93133 topic_id: 35618 reply_id: 141653[/import]

[LairdGames]

Fantastic Nick! I will experiment and let you know.

THANKS, I appreciate the help.

Mo [import]uid: 100814 topic_id: 35618 reply_id: 141732[/import]