is TableView blocking touch events ?

Hi everyone,
I have following problem. I covered TableView with invisible (isVisivle=false, isHitTestable=true) rectangle in order to capture touch events.  The rectangle is bigger than TableView so a have areas where TableView is under rectangle and areas where is only the rectangle.  Event capturing works but when touch event (event.phase==“began”) initiates in area above the TableView then listener will receive only event.phase==“began” and not the other event phases. It works perfectly when event initiates in anywhere else.

I tried a some thinks like putting the rectangle below or make it visible. But none of them solved the problem.

It seeem so me that TableView is blocking touch event phases even when is below the rectangle.

Does anyone knows what is going on ? I’m really puzzled.
Thanks

Hi @wercajkapps,

Are you absolutely sure that you’ve positioned the larger rectangle in front (z-index) of the tableView?

Brent

Hi Brent,
my use case is a little bit more complicated. So I made lua script to replicate it the easy way. I’m running it in windows simulator with Corona version v2014.2189, it also behaves the same way on my Android 4.3 device.

Just start your mouse (touch) movement outside the table view and then on the table view to see different behavior in console.

Thanks for your help ! :slight_smile:

Vasek

Unfortunately a cannot post script as attachment so it is there:

[lua]

– touch listener
local function myTouchListener( event )

    if ( event.phase == “began” ) then
        --code executed when the button is touched
        print( "object touched = "…tostring(event.target) )  --‘event.target’ is the touched object
    elseif ( event.phase == “moved” ) then
        --code executed when the touch is moved over the object
        print( “touch location in content coordinates = “…event.x…”,”…event.y )
    elseif ( event.phase == “ended” ) then
        --code executed when the touch lifts off the object
        print( "touch ended on object "…tostring(event.target) )
    end
    --return true  --prevents touch propagation to underlying objects
end

– called when new row is added
local function onRowRender(event)
    – Get reference to the row group
    local group = event.row;
    local h = event.row.contentHeight;
    local w = event.row.contentWidth;
    
    – fill row with red rectangle
    local rect = display.newRect(group, w*0.5, h*0.5, w, h*0.9);
    rect:setFillColor(1,0,0);
end


local group =  display.newGroup();

– table view size
local rowHeight = 100; – content px
local rowCount = 10;
local tableViewHeight = display.contentHeight*0.5;
local tableViewWidth =  display.contentWidth*0.5;
local tableViewTop = (display.contentHeight - tableViewHeight)*0.5;
local tableViewLeft = (display.contentWidth - tableViewWidth)*0.5;

– rectangle size
local rectHeight = display.contentHeight;
local rectWidth = display.contentWidth;

– add table view
local widget = require(“widget”)

local options =
{
    top = tableViewTop, left= tableViewLeft,
    hideBackground = true,
    onRowRender  = function(event) onRowRender(event) end,
    width = tableViewWidth,–self.width-2*self.rowMargin,
    height = tableViewHeight,
    isBounceEnabled = false;
    --noLines = true,
}

local levelsTable = widget.newTableView( options);
group:insert(levelsTable);

local rowOptions =
{
    rowHeight =  rowHeight,
    rowColor = { default={0,0}},
    
}

for i=1, rowCount do
    levelsTable:insertRow(rowOptions)
end

– add event capturing rectangle over table view
local touchDetectingRectangle = display.newRect(group, display.contentCenterX, display.contentCenterY, rectWidth, rectHeight);
touchDetectingRectangle:setFillColor(0.5,0.5);
touchDetectingRectangle:toFront(); – to make sure thad rectangke is abowe the table view
touchDetectingRectangle:addEventListener( “touch”, myTouchListener )

[/lua]

I think I see now… if you mean, does the table view block touch propagation to things behind it, then yes, it does. Do you want something behind the table view to detect touches when that point is on the table view?

Well maybe the question is what ‘behind’ means ? The touchDetectingRectangle is created as last display objects, so I expects it to be the most front object. I also call  

touchDetectingRectangle:toFront()  

 to be sure about it. Maybe i misunderstood something there ?

And yes I need something to detects touch events on area bigger than the table view to make whole display group draggable. 

Thank you for your help!

Vasek

Hi Vasek,

You understand the principle, but I’m not sure I understand what you’re trying to implement. Have you read the following tutorial? It might help with some more “advanced” use cases for touch/tap handling:

http://www.coronalabs.com/blog/2013/10/01/tutorial-taptouch-anatomy/

Take care,

Brent

Hi Brent,

first of all thank you for your help! I read the tutorial and it was helpful. But i still don§t know why my event capturing rectangle does not receives touch events. For more clarity i made actual use case screen-shot with annotations. Please see the attachment.

Thanks

Vasek

Hi Vasek,

If you add “return true” at the end of the touch listener for the overlay rectangle, it should receive all events. But then, how will the user interact with the tableView below?

Best regards,

Brent

Hi,

you are right. Adding return true to the touch listener will block event to propagates towards table view below. This is certainly not what i’m trying to achieve there :slight_smile: I jut need to keep table view interacting with user and to capture users touch movements simultaneously.  

Best Regards

Vasek

Hi Vasek,

I still don’t understand the usage case. Do you want the ability to “drag” the table view around the screen, but it also still behaves as normal when the user touches the actual table view?

Brent

Yes, that is it. I have several table views ordered in columns and I just need to swipe/drag between them.

Vasek

Hi Vasek,

I can’t think of any “perfect” way to maintain tableView functionality (flicking it up and down) while also being able to drag it around the screen. You may want to place some kind of “frame” around it with a visual indication that the user can move it around by dragging on that part of the overall element, but not by moving around on the tableView itself.

Brent

If I understand correctly I think Vaclav wants to go between tableviews like a slideview. Maybe this helps. I added a tableview listener and propagate the touches over to the touch rect.

[lua]

– touch listener

local function myTouchListener( event )

    if ( event.phase == “began” ) then

        --code executed when the button is touched

        print( "object touched = "…tostring(event.target) )  --‘event.target’ is the touched object

    elseif ( event.phase == “moved” ) then

        --code executed when the touch is moved over the object

        print( “touch location in content coordinates = “…event.x…”,”…event.y )

    elseif ( event.phase == “ended” ) then

        --code executed when the touch lifts off the object

        print( "touch ended on object "…tostring(event.target) )

    end

    --return true  --prevents touch propagation to underlying objects

end

– called when new row is added

local function onRowRender(event)

    – Get reference to the row group

    local group = event.row;

    local h = event.row.contentHeight;

    local w = event.row.contentWidth;

    

    – fill row with red rectangle

    local rect = display.newRect(group, w*0.5, h*0.5, w, h*0.9);

    rect:setFillColor(1,0,0);

end


local group =  display.newGroup();

– table view size

local rowHeight = 100; – content px

local rowCount = 10;

local tableViewHeight = display.contentHeight*0.5;

local tableViewWidth =  display.contentWidth*0.5;

local tableViewTop = (display.contentHeight - tableViewHeight)*0.5;

local tableViewLeft = (display.contentWidth - tableViewWidth)*0.5;

– rectangle size

local rectHeight = display.contentHeight;

local rectWidth = display.contentWidth;

– add table view

local touchDetectingRectangle = display.newRect(group, display.contentCenterX, display.contentCenterY, rectWidth, rectHeight);

touchDetectingRectangle:setFillColor(0.5,0.5);

local function tableViewListener(event)

    myTouchListener({phase = event.phase, target = touchDetectingRectangle, y = event.y, x = event.y})

end

local widget = require(“widget”)

local options =

{

    top = tableViewTop, left= tableViewLeft,

    hideBackground = true,

    onRowRender  = function(event) onRowRender(event) end,

    width = tableViewWidth,–self.width-2*self.rowMargin,

    height = tableViewHeight,

    listener = tableViewListener,

    isBounceEnabled = false;

    --noLines = true,

}

local levelsTable = widget.newTableView( options);

group:insert(levelsTable);

local rowOptions =

{

    rowHeight =  rowHeight,

    rowColor = { default={0,0}},

    

}

for i=1, rowCount do

    levelsTable:insertRow(rowOptions)

end

– add event capturing rectangle over table view

touchDetectingRectangle:toFront(); – to make sure thad rectangke is abowe the table view

touchDetectingRectangle:addEventListener( “touch”, myTouchListener )

[/lua]

Hi jojonsson,

you get it right. I’m trying to do slideview containing table views.

The event propagation you proposed works. But trouble is, that table view touch events are bit different.  All events have event.phase == “begin” until the first change in Y direction occurs. So if you manage to do you move perfectly horizontal no scrolling wil occur. This is of course very special case so i decided to neglect it for now.

Thank you very much for your help !

Vasek

Hi @wercajkapps,

Are you absolutely sure that you’ve positioned the larger rectangle in front (z-index) of the tableView?

Brent

Hi Brent,
my use case is a little bit more complicated. So I made lua script to replicate it the easy way. I’m running it in windows simulator with Corona version v2014.2189, it also behaves the same way on my Android 4.3 device.

Just start your mouse (touch) movement outside the table view and then on the table view to see different behavior in console.

Thanks for your help ! :slight_smile:

Vasek

Unfortunately a cannot post script as attachment so it is there:

[lua]

– touch listener
local function myTouchListener( event )

    if ( event.phase == “began” ) then
        --code executed when the button is touched
        print( "object touched = "…tostring(event.target) )  --‘event.target’ is the touched object
    elseif ( event.phase == “moved” ) then
        --code executed when the touch is moved over the object
        print( “touch location in content coordinates = “…event.x…”,”…event.y )
    elseif ( event.phase == “ended” ) then
        --code executed when the touch lifts off the object
        print( "touch ended on object "…tostring(event.target) )
    end
    --return true  --prevents touch propagation to underlying objects
end

– called when new row is added
local function onRowRender(event)
    – Get reference to the row group
    local group = event.row;
    local h = event.row.contentHeight;
    local w = event.row.contentWidth;
    
    – fill row with red rectangle
    local rect = display.newRect(group, w*0.5, h*0.5, w, h*0.9);
    rect:setFillColor(1,0,0);
end


local group =  display.newGroup();

– table view size
local rowHeight = 100; – content px
local rowCount = 10;
local tableViewHeight = display.contentHeight*0.5;
local tableViewWidth =  display.contentWidth*0.5;
local tableViewTop = (display.contentHeight - tableViewHeight)*0.5;
local tableViewLeft = (display.contentWidth - tableViewWidth)*0.5;

– rectangle size
local rectHeight = display.contentHeight;
local rectWidth = display.contentWidth;

– add table view
local widget = require(“widget”)

local options =
{
    top = tableViewTop, left= tableViewLeft,
    hideBackground = true,
    onRowRender  = function(event) onRowRender(event) end,
    width = tableViewWidth,–self.width-2*self.rowMargin,
    height = tableViewHeight,
    isBounceEnabled = false;
    --noLines = true,
}

local levelsTable = widget.newTableView( options);
group:insert(levelsTable);

local rowOptions =
{
    rowHeight =  rowHeight,
    rowColor = { default={0,0}},
    
}

for i=1, rowCount do
    levelsTable:insertRow(rowOptions)
end

– add event capturing rectangle over table view
local touchDetectingRectangle = display.newRect(group, display.contentCenterX, display.contentCenterY, rectWidth, rectHeight);
touchDetectingRectangle:setFillColor(0.5,0.5);
touchDetectingRectangle:toFront(); – to make sure thad rectangke is abowe the table view
touchDetectingRectangle:addEventListener( “touch”, myTouchListener )

[/lua]

I think I see now… if you mean, does the table view block touch propagation to things behind it, then yes, it does. Do you want something behind the table view to detect touches when that point is on the table view?

Well maybe the question is what ‘behind’ means ? The touchDetectingRectangle is created as last display objects, so I expects it to be the most front object. I also call  

touchDetectingRectangle:toFront()  

 to be sure about it. Maybe i misunderstood something there ?

And yes I need something to detects touch events on area bigger than the table view to make whole display group draggable. 

Thank you for your help!

Vasek

Hi Vasek,

You understand the principle, but I’m not sure I understand what you’re trying to implement. Have you read the following tutorial? It might help with some more “advanced” use cases for touch/tap handling:

http://www.coronalabs.com/blog/2013/10/01/tutorial-taptouch-anatomy/

Take care,

Brent

Hi Brent,

first of all thank you for your help! I read the tutorial and it was helpful. But i still don§t know why my event capturing rectangle does not receives touch events. For more clarity i made actual use case screen-shot with annotations. Please see the attachment.

Thanks

Vasek