ScrollView with Overlaying Touch Object

Solar2D Widgets
#1

Hi guys,

I am trying to have a box (with touch) in front of a scroll view. The problem is that, either the scrollView will move, or the box’s touch listener is active.

I can’t get both the scrollView and box to have the listener at the same time. I tried playing around with different ‘return false/true’ scenarios, but still can’t get it to work.

Thanks

 -- ScrollView listener local function scrollListener( event ) local phase = event.phase print( "Scroll view phase : " , event.phase ) return true end -- Create the widget local scrollView = widget.newScrollView { top = 100, left = 10, width = 300, height = 400, scrollWidth = 600, scrollHeight = 800, listener = scrollListener } local scrollViewBackground = display.newRoundedRect( 0, 0, 768, 200, 12 ) scrollViewBackground.strokeWidth = 3 scrollViewBackground:setStrokeColor( 1, 0, 0 ) scrollViewBackground:setFillColor( 0,0,1, 50/255 ) scrollView:insert( scrollViewBackground ) local foreground = display.newRoundedRect( 0, display.contentCenterY, display.actualContentWidth, 500, 12 ) foreground.strokeWidth = 3 foreground:setStrokeColor( 1, 0, 1 ) foreground:setFillColor( 1,0,0, 50/255 ) local function foregroundTouch(event) print( "foregroundTouch" , event.phase ) if event.phase == "began" then return false --true else return false end end foreground:addEventListener( "touch", foregroundTouch )
#2

Your box is going to get the touch event and depending on what you do with that touch event, it might not make sense for the touch event to make it to the scrollView.  After all, you obviouslly you want the box to do something when touched or you wouldn’t have given it handler in the first place.

Most times I see this is they want the touch to fire if it’s a touch, but if it’s a move, then you want to pass that on to the scrollView.  There is a method to pass the focus to the scrollView.  See:  http://docs.coronalabs.com/api/type/ScrollViewWidget/takeFocus.html

If you detect a move of say more than 5px from the start of the move (event.xStart, event.yStart), then you can assume its a move attempt and then call the takeFocus method on the scrollView.

Rob

#3

Dear Rob,

My idea is to have an overlay to detect x/y movements on top regardless of what’s below (where the overlay will perform action depending, like opening the settings page). Other words, I was thinking of having the overlay as a ‘master to do certain actions when certain x/y drawings is made on it’. The layer below could have a few scroll views, buttons, etc which will all pass its action to a central location for processing.

I do know about the scrollView’s ‘takeFocus’ feature, but it would be a hassle to determine which scroll view to pass it to (assuming there are multiple scrollViews on a page) and also I would need to manually check each page on how to handle the overlay. 

Is there a way to have an overlay ‘touch’ to let events pass through (especially to scrollView) ?

Thanks

#4

If you return false from a touch handler, the event should fall to the display object underneath it.

Rob

#5

That’s what I was expecting, but it only ‘partially’ sends the event to the objects.

Based on my experiment (see code in first post), the overlay object does not get the ‘event.phase = moved’, if it returns false at ‘began’. It must be something that the scrollView does, where it consumes the event.

#6

The problem is that as soon as the scrollview gets a began touch phase it will take focus for that touch meaning all following events for this touch (until ended phase) will only be passed to the scrollview no matter what’s on top. It would be difficult to achieve what you want without modifying the scrollview itself.

#7

Your box is going to get the touch event and depending on what you do with that touch event, it might not make sense for the touch event to make it to the scrollView.  After all, you obviouslly you want the box to do something when touched or you wouldn’t have given it handler in the first place.

Most times I see this is they want the touch to fire if it’s a touch, but if it’s a move, then you want to pass that on to the scrollView.  There is a method to pass the focus to the scrollView.  See:  http://docs.coronalabs.com/api/type/ScrollViewWidget/takeFocus.html

If you detect a move of say more than 5px from the start of the move (event.xStart, event.yStart), then you can assume its a move attempt and then call the takeFocus method on the scrollView.

Rob

#8

Dear Rob,

My idea is to have an overlay to detect x/y movements on top regardless of what’s below (where the overlay will perform action depending, like opening the settings page). Other words, I was thinking of having the overlay as a ‘master to do certain actions when certain x/y drawings is made on it’. The layer below could have a few scroll views, buttons, etc which will all pass its action to a central location for processing.

I do know about the scrollView’s ‘takeFocus’ feature, but it would be a hassle to determine which scroll view to pass it to (assuming there are multiple scrollViews on a page) and also I would need to manually check each page on how to handle the overlay. 

Is there a way to have an overlay ‘touch’ to let events pass through (especially to scrollView) ?

Thanks

#9

If you return false from a touch handler, the event should fall to the display object underneath it.

Rob

#10

That’s what I was expecting, but it only ‘partially’ sends the event to the objects.

Based on my experiment (see code in first post), the overlay object does not get the ‘event.phase = moved’, if it returns false at ‘began’. It must be something that the scrollView does, where it consumes the event.

#11

The problem is that as soon as the scrollview gets a began touch phase it will take focus for that touch meaning all following events for this touch (until ended phase) will only be passed to the scrollview no matter what’s on top. It would be difficult to achieve what you want without modifying the scrollview itself.

#12

We have the exact same issue - an object with an event listener sitting on top of a scrollView. Has anything changed since May 2014? Is it possible to pass events to the object on top or is still the case that the scrollView will always receive those events in all cases?

#13

This will only happen if the scrollview receives the began phase of the touch event. If you return true from you “object on top” event listener it will not be passed to the scrollview. You can still pass it to the scrollview later on move phase of needed (like 10 pixel tolerance or alike) by using scrollview:takeFocus

#14

Many thanks primoz - that’s solved it. By force of habit, my listeners use ended but began does indeed work.

#15

Many thanks to primoz, I was having a similar issue and you totally helped me solve it!

#16

We have the exact same issue - an object with an event listener sitting on top of a scrollView. Has anything changed since May 2014? Is it possible to pass events to the object on top or is still the case that the scrollView will always receive those events in all cases?

#17

This will only happen if the scrollview receives the began phase of the touch event. If you return true from you “object on top” event listener it will not be passed to the scrollview. You can still pass it to the scrollview later on move phase of needed (like 10 pixel tolerance or alike) by using scrollview:takeFocus

#18

Many thanks primoz - that’s solved it. By force of habit, my listeners use ended but began does indeed work.

#19

Many thanks to primoz, I was having a similar issue and you totally helped me solve it!