How to make a scrolling menu

Solar2D Widgets
#1

Howdy! I took a look at the docs but i couldnt find a way to have a menu, or just a place in screen to put ui stuff and have them moved up and down. In short, a scrolling menu. I have the assets and graphics needed, it should look something like this at the end:
image

The slider is totally optional, but being able to have a way to organize ui elements and move them all together would be great. I cant use a view group, because theres a limit to where to would be visible, and that is where these other buttons are:
image

any help is greatly appreciated!

#2

You are looking for a scrollView object:
https://docs.coronalabs.com/api/library/widget/newScrollView.html

#3

i took a look on that earlier, but afaik it only lets me use 3 elements per scrollView object.

#4

You must have made some mistake. Post your code here if you need a feedback, or join Discord.

#5

Much sorry, i confused the view mask with view elements. It doesnt allow for more than 3 view masks, much sorry!

#6

you can use tableview and scrollview

I prefer scrollview

Tableview renders items as you scroll, and it can mislead you to what is happening if you don’t fully understand it’s behaviour, and a table view is like a list with rows, each row is an element that you add items to

Scroll view is an object that allows you to add items anywhere in the scrollview, you can make it scroll vertically and/or horizontally
but you have to set the x and y for each object

so you create a scrollview
you create any display objects
you insert them in the scrollview
and the size of the scroll view will keep increasing vertically or horizontally or both depending on where you place your items

or you create a tableview
then create a loop to create tableview items or list items
then you deal with tableview events like onRender

hope this helps

here is a small code for a scroll view:

local widget = require( "widget" )
local scrollView = widget.newScrollView
    {
        top = 0,
        left=0,
        width = display.contentWidth, 
        height=display.contentHeight,
        scrollHeight = display.contentHeight,
        verticalScrollDisabled = false,
        horizontalScrollDisabled = true,
        maxVelocity=6,
    }

local yy=50
for i=1,100 do
      local objectName = display.newText( i,0,0,native.systemFontBold,30)
      objectName.x=display.contentCenterX
      objectName.y=yy
      objectName:setFillColor(0)
      scrollView:insert( objectName )
      yy = objectName.y + objectName.height*0.5 + 100
end
1 Like