How to create a scrollable grid of images and text

BlueByLiquid

I need to create a scrollable grid of images with some text below each images. It would be like a picture viewer with descriptions under it. It would just be about 75 percent of the screen and the rest would have other information on it. I am not familiar with Gideros but I have worked with Moai and some corona. Any help would be greatly appreciated.

ar2rsawseen

Hello @BlueByLiquid
well there are lots of ways to go with it.
here is one example that can be used:
http://appcodingeasy.com/Gideros-Mobile/Easy-input-for-choosing-packages-or-levels-in-Gideros-Mobile

BlueByLiquid

Hi ar2rsawseen,

Thanks for the response and the link. I had seen that but unless I am misunderstanding that code it is to focus on one item at a time doesn't provide you with control over the organization of the images inside of the AceSlide container correct? For example I would have a grid of NxM photos each having a text box under the image. I see no way to control organization in that manor. Maybe I am missing something? Thanks!

ar2rsawseen

Sorry, for misunderstanding, so you want a grid like scrollable view.

Well ok, let's start from Grid.

Inside game template: https://github.com/ar2rsawseen/GameTemplate
There is a View.lua which contains GridView class, basically it alligns objects in grid based on provided configurations, as column amount, padding, etc.
You can see the usage inside level_select.lua

So you would have to create a function which would create grid element from provided image and text (basically create new sprite, then add bitmap and text to it, positioned the way you like, and return this sprite).

And after that it would be quite easy to create a scrollable layer.

BlueByLiquid

No problem at all. Thanks for the suggestions.

Ok so I think I have most of what I wanted. So I actually used the grid view to create a row and then I created an AceSlide to hold the rows. I did this because I want the easy scroll-ability of the AceSlide. Great! One thing. I would like the scroller to stop with one row at the top of the screen not the center. Is that possible?

Also is there any easy way to add acceleration to AceSlide? I couldn't find an option for that.

BlueByLiquid

@ar2rsawseen, Is there anyway to update the GridView component? When I modify the size of one of the fields?

ar2rsawseen

@BlueByLiquid you mean reposition all the elements. Well not right of the box. And I even think that it was meant mostly for same size elements, how would you position grid with different size elements?

BlueByLiquid

@ar2rsawseen, I meant for them to grow all grow to the maximum of any one element.

BlueByLiquid

@ar2rsawseen, I noticed an issue with GridView setting its width to much larger than the actual contents of the grid. I tracked down the issue and it seems to come from the addChild where you set the width and height of the gridview manually. It seems that this is creating something much larger than the sprites below it.

ar2rsawseen

ok, let me recheck that