Quick Question: scrollview + tap

Getting Started Newbie Questions
#1

Hi guys just want to know if “tap” events accept touch scroll cause I make an app with “touch” listeners and I need to use scrollview:takeFocus(), but now I add a button with a “tap” listener to a scrollview in my game and the scrollview scroll touching or not the button with the “tap” listener.

Thanks in advance
DoDi

#2

Disclaimer, I don’t use widget buttons. I also don’t use tap listeners. I use touch exclusively.

I suggest making your own button code and adding those buttons to the scroller.

You can make it work, but you’ll have to do some extra coding and custom listeners.  This is intermediate - advanced stuff.

i.e. If you want a button in a scroller where you can:

  • touch the button and release it and get a touch
  • touch, then drag on the button and have the scroller drag

The way I handle it is (actually a little more complicated than this, but this is the basic idea),

  1. I have a listener for the touchable object.  It returns false in all cases.  When the touch starts, I keep track of the fact that the button was touched in a table attached to the scroller.
  2. I have a listener for the scroller.   If the player moves their finger beyond a certain threshold, I track this touch sequence as a drag.  Later, when the ‘ended’ phase occurs, I pass the even manually to the other object’s listener and add a field in the event ‘dragged = true’ (or false) if no drag occurred during this touch.

SSK includes code for this, but the feature is not well documented.  I keep it there mostly for myself.

If you don’t work this out today post back and I’ll try to take time to give an example.

PS - The issue you encounter when embedding touchable objects into a scroller is that the scroller steals focus and the touched object stops getting events.

#3

Tip.  You never ‘need’ a tap listener.  You can emulate double-tap tracking with a touch listener.

#4

Here is an example showing two different kinds of touchable objects in a scroller:

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/10/scrollers_buttons.zip

local scroller = ssk.vScroller.new( nil, centerX, centerY, { w = 400, h = 600, backFill = hexcolor("#DDDDDD") } ) -- ====================================================== -- Tap Replacement Example -- ====================================================== local multiTapInterval = 333 local function fakeTap( self, event ) -- Only do work in "ended" phase if( event.phase == "ended" ) then -- Assign taps if not set yet self.taps = self.taps or 0 -- Detect 'dragged' and show it if( event.dragged ) then self.label.text = "dragged" self.taps = 0 return false end -- Update label to show consecutive taps occuring -- in less time than 'multiTapInterval' local dt = event.time - (self.lastTapTime or -10000 ) self.lastTapTime = event.time print( event.time, dt ) if( dt \< multiTapInterval ) then self.taps = self.taps + 1 else self.taps = 1 end self.label.text = self.taps end return false end local tmp = display.newRect( 200, 60, 100, 100 ) tmp:setFillColor(unpack(\_O\_)) scroller:insert(tmp) tmp.label = display.newText("0", tmp.x, tmp.y) scroller:insert(tmp.label) scroller:addTouch( tmp, fakeTap ) -- ====================================================== -- Basic Button Example -- ====================================================== local isInBounds = ssk.easyIFC.isInBounds local function onPush( self, event ) if( event.phase == "began" ) then self:setFillColor(unpack(\_LIGHTGREY\_)) elseif( event.phase == "moved" ) then if( isInBounds(event,self) ) then self:setFillColor(unpack(\_LIGHTGREY\_)) else self:setFillColor(unpack(\_DARKGREY\_)) end elseif( event.phase == "ended" ) then self:setFillColor(unpack(\_DARKGREY\_)) -- Do some action if the button is released, the touch -- is still over the button and no drag of the scroller -- happened if( isInBounds(event,self) and not event.dragged ) then self:setFillColor(unpack(\_CYAN\_)) timer.performWithDelay( 100, function() self:setFillColor(unpack(\_DARKGREY\_)) end ) end end return false end local tmp = display.newRect( 200, 220, 100, 100 ) tmp:setFillColor(unpack(\_DARKGREY\_)) scroller:insert(tmp) scroller:addTouch( tmp, onPush )
#5

@roaminggamer - I really admire you. Thanks for your help. I have not studied the “SSK” thoroughly but I can deduce what you want to explain from your examples. Thank you again!

DoDi

#6

Disclaimer, I don’t use widget buttons. I also don’t use tap listeners. I use touch exclusively.

I suggest making your own button code and adding those buttons to the scroller.

You can make it work, but you’ll have to do some extra coding and custom listeners.  This is intermediate - advanced stuff.

i.e. If you want a button in a scroller where you can:

  • touch the button and release it and get a touch
  • touch, then drag on the button and have the scroller drag

The way I handle it is (actually a little more complicated than this, but this is the basic idea),

  1. I have a listener for the touchable object.  It returns false in all cases.  When the touch starts, I keep track of the fact that the button was touched in a table attached to the scroller.
  2. I have a listener for the scroller.   If the player moves their finger beyond a certain threshold, I track this touch sequence as a drag.  Later, when the ‘ended’ phase occurs, I pass the even manually to the other object’s listener and add a field in the event ‘dragged = true’ (or false) if no drag occurred during this touch.

SSK includes code for this, but the feature is not well documented.  I keep it there mostly for myself.

If you don’t work this out today post back and I’ll try to take time to give an example.

PS - The issue you encounter when embedding touchable objects into a scroller is that the scroller steals focus and the touched object stops getting events.

#7

Tip.  You never ‘need’ a tap listener.  You can emulate double-tap tracking with a touch listener.

#8

Here is an example showing two different kinds of touchable objects in a scroller:

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/10/scrollers_buttons.zip

local scroller = ssk.vScroller.new( nil, centerX, centerY, { w = 400, h = 600, backFill = hexcolor("#DDDDDD") } ) -- ====================================================== -- Tap Replacement Example -- ====================================================== local multiTapInterval = 333 local function fakeTap( self, event ) -- Only do work in "ended" phase if( event.phase == "ended" ) then -- Assign taps if not set yet self.taps = self.taps or 0 -- Detect 'dragged' and show it if( event.dragged ) then self.label.text = "dragged" self.taps = 0 return false end -- Update label to show consecutive taps occuring -- in less time than 'multiTapInterval' local dt = event.time - (self.lastTapTime or -10000 ) self.lastTapTime = event.time print( event.time, dt ) if( dt \< multiTapInterval ) then self.taps = self.taps + 1 else self.taps = 1 end self.label.text = self.taps end return false end local tmp = display.newRect( 200, 60, 100, 100 ) tmp:setFillColor(unpack(\_O\_)) scroller:insert(tmp) tmp.label = display.newText("0", tmp.x, tmp.y) scroller:insert(tmp.label) scroller:addTouch( tmp, fakeTap ) -- ====================================================== -- Basic Button Example -- ====================================================== local isInBounds = ssk.easyIFC.isInBounds local function onPush( self, event ) if( event.phase == "began" ) then self:setFillColor(unpack(\_LIGHTGREY\_)) elseif( event.phase == "moved" ) then if( isInBounds(event,self) ) then self:setFillColor(unpack(\_LIGHTGREY\_)) else self:setFillColor(unpack(\_DARKGREY\_)) end elseif( event.phase == "ended" ) then self:setFillColor(unpack(\_DARKGREY\_)) -- Do some action if the button is released, the touch -- is still over the button and no drag of the scroller -- happened if( isInBounds(event,self) and not event.dragged ) then self:setFillColor(unpack(\_CYAN\_)) timer.performWithDelay( 100, function() self:setFillColor(unpack(\_DARKGREY\_)) end ) end end return false end local tmp = display.newRect( 200, 220, 100, 100 ) tmp:setFillColor(unpack(\_DARKGREY\_)) scroller:insert(tmp) scroller:addTouch( tmp, onPush )
#9

@roaminggamer - I really admire you. Thanks for your help. I have not studied the “SSK” thoroughly but I can deduce what you want to explain from your examples. Thank you again!

DoDi