how do you transition/snap scrollview children to x/y coordinates on the stage?

Getting Started Newbie Questions
#1

I’m wanting to use the scrollview widget as a level selection tool, and want the nearest scrollview child to be transitioned/snapped to center X after the touch event ends.  Unfortunately all scrollview children.x = 0, so I am unsure how to proceed which child needs to be targeted, and how to move them, and the rest of the scrollview objects to the correction x-coordinate.

I know that object:scrollToPosition() may be a path to go down, but I’m not seeing how to make it dynamically work with the scrollview objects.

Below is my test that all children.x = 0, no matter how much you move them around.

Thank you for any input.

[lua]

local widget = require “widget”

local mainGroup = display.newGroup( )

local scrollView

local function scrollListener( event )

    target = event.target – this is the scrollView

    print("scrollView[3].x = "…scrollView[1].x)

end

scrollView = widget.newScrollView{

    width = display.contentWidth,

    height = 250,

    x = display.contentWidth * 0.5,

    y = display.contentHeight * 0.5,

    backgroundColor = {1,1,1},

    listener = scrollListener

}

for i=1, 4 do

    local box = display.newRect( 0, 0, 300, 200 )

    box:setFillColor(0.2 * i, 0.2 * i, 0.2)

    box.anchorX, box.anchorY = 0,0.5

    box.x = (i -1 ) * box.contentWidth

    box.y = scrollView.contentHeight * 0.5

    scrollView:insert(box)

end

[/lua]

#2

Hi @tysonkuhn,

If all of your “items” are the same size, maybe you can read the position of the scroll view content, do some clever math to figure out which item is closest to center (based on the content position and the size of each item box), then on release you either move it left or right to the exact center, depending on how far “off center” the box is that spans the theoretical center axis.

Brent

#3

Thank you for the response Brent.  Clever math commence!

#4

**** Found it *****  

All display objects/display groups added to scrollview are under the first index nested in the second index of the scrollview object.  example from below: print(scrollView[2][1].numChildren) – 6

**************

hold up on the clever math.  How is the scrollview display group set up?  I’m attempting to cycle through the scrollview children with a for loop to check against the min/max parameters, but it doesn’t matter how many objects I put into scrollview, the .numChildren = 3, always.

code:

 [lua]

 local widget = require “widget”

local mainGroup = display.newGroup( )

local scrollView

local function scrollListener( event )

    local target = event.target – this is the scrollView

    local phase = event.phase

    print("phase: "…phase)

end

scrollView = widget.newScrollView{

    width = display.contentWidth,

    height = 250,

    x = display.contentWidth * 0.5,

    y = display.contentHeight * 0.5,

    backgroundColor = {1,1,1},

    listener = scrollListener

}

– add 6 objects to scrollView

for i=1, 6 do

    local box = display.newRect( 0, 0, 300, 200 )

    box:setFillColor(0.2 * i, 0.2 * i, 0.2)

    box.anchorX, box.anchorY = 0,0.5

    box.x = (i -1 ) * box.contentWidth

    box.y = scrollView.contentHeight * 0.5

    scrollView:insert(box)

end

print("scrollView.numChildren: "…scrollView.numChildren)

[/lua]

#5

Hi @tysonkuhn,

The actual display group of the scroll view is not accessed directly via “scrollView.” but rather “scrollView._view.”. Use “.numChildren” on this and you should be able to get the correct values:

[lua]

scrollView._view.numChildren

[/lua]

Take care,

Brent

#6

This is more of a question of how Corona nests objects now.  Am I not inserting the objects correctly into the scrollView widget, because all children are nested another layer within the ._view?

[lua]

scrollview._view.numChildren

– returns 1

scrollview._view[1].numChildren

– returns 6 (actual number of children)

[/lua]

#7

Hi @tysonkuhn,

Inserting them into the scrollview puts them into the “_view”. Can’t you just create a counter variable to keep track of how many of these items you’ve inserted into the view, without inspecting .numChildren?

Brent

#8

Hi @tysonkuhn,

If all of your “items” are the same size, maybe you can read the position of the scroll view content, do some clever math to figure out which item is closest to center (based on the content position and the size of each item box), then on release you either move it left or right to the exact center, depending on how far “off center” the box is that spans the theoretical center axis.

Brent

#9

Thank you for the response Brent.  Clever math commence!

#10

**** Found it *****  

All display objects/display groups added to scrollview are under the first index nested in the second index of the scrollview object.  example from below: print(scrollView[2][1].numChildren) – 6

**************

hold up on the clever math.  How is the scrollview display group set up?  I’m attempting to cycle through the scrollview children with a for loop to check against the min/max parameters, but it doesn’t matter how many objects I put into scrollview, the .numChildren = 3, always.

code:

 [lua]

 local widget = require “widget”

local mainGroup = display.newGroup( )

local scrollView

local function scrollListener( event )

    local target = event.target – this is the scrollView

    local phase = event.phase

    print("phase: "…phase)

end

scrollView = widget.newScrollView{

    width = display.contentWidth,

    height = 250,

    x = display.contentWidth * 0.5,

    y = display.contentHeight * 0.5,

    backgroundColor = {1,1,1},

    listener = scrollListener

}

– add 6 objects to scrollView

for i=1, 6 do

    local box = display.newRect( 0, 0, 300, 200 )

    box:setFillColor(0.2 * i, 0.2 * i, 0.2)

    box.anchorX, box.anchorY = 0,0.5

    box.x = (i -1 ) * box.contentWidth

    box.y = scrollView.contentHeight * 0.5

    scrollView:insert(box)

end

print("scrollView.numChildren: "…scrollView.numChildren)

[/lua]

#11

Hi @tysonkuhn,

The actual display group of the scroll view is not accessed directly via “scrollView.” but rather “scrollView._view.”. Use “.numChildren” on this and you should be able to get the correct values:

[lua]

scrollView._view.numChildren

[/lua]

Take care,

Brent

#12

This is more of a question of how Corona nests objects now.  Am I not inserting the objects correctly into the scrollView widget, because all children are nested another layer within the ._view?

[lua]

scrollview._view.numChildren

– returns 1

scrollview._view[1].numChildren

– returns 6 (actual number of children)

[/lua]

#13

Hi @tysonkuhn,

Inserting them into the scrollview puts them into the “_view”. Can’t you just create a counter variable to keep track of how many of these items you’ve inserted into the view, without inspecting .numChildren?

Brent

#14

Don’t mean to bring this back from the dead, but this was really helpful to me. I want to loop through the children of a scrollView and adjust all of their y positions. If it hadn’t found this, it would have taken me forever to realized they’re under scrollView[2][1]. This is useful to me because I’m dynamically adding and removing objects from the scrollView, and this is the easiest way to do that without storing the objects in a separate table.

#15

Don’t mean to bring this back from the dead, but this was really helpful to me. I want to loop through the children of a scrollView and adjust all of their y positions. If it hadn’t found this, it would have taken me forever to realized they’re under scrollView[2][1]. This is useful to me because I’m dynamically adding and removing objects from the scrollView, and this is the easiest way to do that without storing the objects in a separate table.