Delaying touch on table view

Getting Started Newbie Questions
#1

Hello!

I’ve created a widget.newTableView and inserted rows into the table view. Each row has a touch event listener attached to it that when touched, whisks the user to another scene. This part works great.

What doesn’t work so great is if I have 50 items in my table, I expect my user to scroll up/down to see more rows. However, when the user tries to scroll, a touch event is registered and the user is taken to another scene. 

Is there a way with table views to delay touches?

p.s. I truncated the code down to the relevant parts. If something is broken, my apologies.

local function onRowRender( event )     --Set up the localized variables to be passed via the event table     local row = event.row     local id = row.index     row.bg = display.newRect( 0, 0, display.contentWidth, M.rowheight )     row.bg.anchorX = 0     row.bg.anchorY = 0     row.bg:setFillColor( 1, 1, 1 )     row.bg.name = "rowName"     row.bg:addEventListener("touch", onCategoryNameTouch)     row:insert( row.bg )     row.nameText = display.newText( "mytext", 12, 0, \_FONT, 42 )     row.nameText.anchorX = 0     row.nameText.anchorY = 0.5     row.nameText:setFillColor( 0 )     row.nameText.y = row.height \* 0.5     row.nameText.x = 42     row:insert( row.nameText )     return true     end myList = widget.newTableView {     top = \_S.top + 100,     width = display.contentWidth,      height = display.contentHeight - 80,     onRowRender = onRowRender,     onRowTouch = onRowTouch,     listener = scrollListener } sceneGroup:insert(myList) for i = 1,numberOfCategories do     myList:insertRow{         rowHeight = M.rowheight,         isCategory = false,         rowColor = { 1, 1, 1 },         lineColor = { 0.90, 0.90, 0.90 }     } end
#2

I don’t see onRowTouch but you should listen for event.phase == “release”

#3

Hey! Sorry for the delay here. I did a print statement of event.phase and it’s only outputting the began phase. I’m using this - row.bg:addEventListener(“touch”, onRestaurantNameTouch) - with this function:

local function onCategoryNameTouch(event) print(event.phase)          end
#4

For a quick fix, I just did this: row.bg:addEventListener(“tap”, onCategoryNameTouch). But, I’d like to know if I’m able to use touch.

#5

Normally you should not be putting touch handlers in your row, or at least not ones that cover the whole row. TableViews generate touch/tap events on their own that get directed to the onTouchHandler. You should provide a function for the tableView’s touch handler. From there you can determine which row was touched.

The built in touch listener handles swiping to scroll the rows and if you intercept that, then the touch events won’t get to the tableView.

Now if you do want to do this, you probably should have your row handling code look for any Y movement during moved phases and if so, return false so those events get to the tableView. But honestly its better to use the built in touch handling.

Rob

#6

Thanks Rob! Now I’m intrigued by this statement: The built in touch listener handles swiping to scroll the rows and if you intercept that, then the touch events won’t get to the tableView.

How would I go about listening for swipes on a row?

#7

onRowTouch() provides that for you in it’s event table. See:

https://docs.coronalabs.com/api/library/widget/newTableView.html#onrowtouch-optional

 if "press" == event.phase then wasSwiped = false elseif "swipeLeft" == event.phase and event.row.deleteButton and not event.row.deleteIsShowing then -- handle delete row here -- we have detected a swipe so set the swipe flag to true. wasSwiped = true -- if this was done on an actual row, show the delete button and set a flag to track that it's showing if row and event.row.deleteButton then transition.to( event.row.deleteButton, { time=250, x = event.row.deleteButton.x - 51 }) event.row.deleteIsShowing = true end elseif "swipeRight" == event.phase and event.row.deleteButton and event.row.deleteIsShowing then -- again, track the swipe event wasSwiped = true -- if we are on a row swiping right, then hide the delete button if row and event.row.deleteButton then transition.to( event.row.deleteButton, { time=250, x = event.row.deleteButton.x + 51 }) event.row.deleteIsShowing = false end

Here is a little snippet that shows and hides a delete button I’ve placed just off screen in each row.  Swiping left shows the button. Swiping right hides the button.

#8

Thanks again! I was not looking at onRowTouch and therefore didn’t see the swipeLeft and swipeRight values for event.phase. Thanks!

#9

I don’t see onRowTouch but you should listen for event.phase == “release”

#10

Hey! Sorry for the delay here. I did a print statement of event.phase and it’s only outputting the began phase. I’m using this - row.bg:addEventListener(“touch”, onRestaurantNameTouch) - with this function:

local function onCategoryNameTouch(event) print(event.phase)          end
#11

For a quick fix, I just did this: row.bg:addEventListener(“tap”, onCategoryNameTouch). But, I’d like to know if I’m able to use touch.

#12

Normally you should not be putting touch handlers in your row, or at least not ones that cover the whole row. TableViews generate touch/tap events on their own that get directed to the onTouchHandler. You should provide a function for the tableView’s touch handler. From there you can determine which row was touched.

The built in touch listener handles swiping to scroll the rows and if you intercept that, then the touch events won’t get to the tableView.

Now if you do want to do this, you probably should have your row handling code look for any Y movement during moved phases and if so, return false so those events get to the tableView. But honestly its better to use the built in touch handling.

Rob

#13

Thanks Rob! Now I’m intrigued by this statement: The built in touch listener handles swiping to scroll the rows and if you intercept that, then the touch events won’t get to the tableView.

How would I go about listening for swipes on a row?

#14

onRowTouch() provides that for you in it’s event table. See:

https://docs.coronalabs.com/api/library/widget/newTableView.html#onrowtouch-optional

 if "press" == event.phase then wasSwiped = false elseif "swipeLeft" == event.phase and event.row.deleteButton and not event.row.deleteIsShowing then -- handle delete row here -- we have detected a swipe so set the swipe flag to true. wasSwiped = true -- if this was done on an actual row, show the delete button and set a flag to track that it's showing if row and event.row.deleteButton then transition.to( event.row.deleteButton, { time=250, x = event.row.deleteButton.x - 51 }) event.row.deleteIsShowing = true end elseif "swipeRight" == event.phase and event.row.deleteButton and event.row.deleteIsShowing then -- again, track the swipe event wasSwiped = true -- if we are on a row swiping right, then hide the delete button if row and event.row.deleteButton then transition.to( event.row.deleteButton, { time=250, x = event.row.deleteButton.x + 51 }) event.row.deleteIsShowing = false end

Here is a little snippet that shows and hides a delete button I’ve placed just off screen in each row.  Swiping left shows the button. Swiping right hides the button.

#15

Thanks again! I was not looking at onRowTouch and therefore didn’t see the swipeLeft and swipeRight values for event.phase. Thanks!