Two questions about tableview

akak · February 9, 2015, 12:29pm

Hi,

I have this two question about tableview:

Is it possible to ‘move’ the row separation lines in order for them not be indented as they originally are?
I have a couple of buttons that at times overlay my tableview, but even if I return true in their respective handler functions the touch still propagates through them to the tableview below (only to the tableview and not to other UI elements that also get underneath thesame buttons). Why is this happening and how can I prevent it?

Many thanks!

bjsorrentino · February 9, 2015, 9:50pm

For full control of the row separators, you should consider just adding those to each row as separate display objects, for example, a line object or very thin rectangle object of 1-3 pixels tall which is positioned at the top or bottom of each row.

For the touch going through buttons, this should not be happening, but I’d need to see your code and how you’re creating these buttons to better determine what is occurring.

Take care,

Brent

akak · February 10, 2015, 11:40am

Hi Brent,

Thanks a lot for the reply!

The ‘make your own line separator’ expedient works great. I didn’t thinl of that. thanks.
As for the tableview still receiving touches I can give you the below code, which is the function that creates an overlay group to the scene containing UI instructions for the user. This group (InstGroup) has a background (InstBG), or better a ‘foreground’ since I bring it on top of the other elements, that listens for a tap to remove the whole group of instructions. If I tap it in correspondance of the underlaying tableview this latter still receives the touch… and messes up things!!!

I don’t why this happens since this function is called at the very bottom of the code for the scene, so that there’s no way for the tableview to be on top of the object receiving the tap:

&nbsp;&nbsp;&nbsp; local function Instructor3 () &nbsp; local var1 &nbsp; local InstGroup = display.newGroup() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sceneGroup:insert (InstGroup) &nbsp;&nbsp;&nbsp;&nbsp; if aspectRatio \> 1.5 then&nbsp; var1=45 else var1 = 0 &nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp;&nbsp; local InstBG = display.newRect( InstGroup, centerX, centerY, display.contentWidth, display.contentHeight ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; InstGroup:insert(InstBG) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; InstBG:setFillColor(0.2) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; InstBG.alpha= 0.1 &nbsp;&nbsp;&nbsp; local vertix = { 0, 5, -10, -15, 10, -15} &nbsp;&nbsp;&nbsp;&nbsp; local Tr1 = display.newPolygon(InstGroup,&nbsp; centerX, display.contentHeight - 55, vertix ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tr1:setFillColor( 1 )&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local Tr3 = display.newPolygon(InstGroup,&nbsp; centerX, centerY - 55, vertix ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tr3:setFillColor( 1 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local Tr2 = display.newPolygon(InstGroup,&nbsp; display.contentWidth - 30, centerY + 45 + var1, vertix ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tr2:setFillColor( 1 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local Tr4 = display.newPolygon(InstGroup,&nbsp; display.contentWidth - 25, 100, vertix ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tr4:setFillColor( 1 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tr4:rotate( 180 )&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; local txt4 = display.newText( InstGroup, "Options (addends here)", display.contentWidth - 70, 120, "Helvetica", 12 ) &nbsp;&nbsp;&nbsp;&nbsp; local txt1 = display.newText( InstGroup, "Delete all saves", centerX, display.contentHeight - 75, "Helvetica", 12 ) &nbsp;&nbsp;&nbsp;&nbsp; local txt3 = display.newText( InstGroup, "Save current count", centerX , centerY - 75 , "Helvetica", 12 ) &nbsp;&nbsp;&nbsp;&nbsp; local txt2 = display.newText(InstGroup, "Load / delete", display.contentWidth - 55, centerY + 25 + var1, vertix, 12 ) &nbsp;&nbsp;&nbsp;&nbsp; tableView:insertRow({ &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; isCategory = isCategory, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rowHeight = rowHeight, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rowColor = rowColor, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params = { id = 1, inputTxt = "'Example Save'", passedNumber = tostring(10), TimeDate = os.date( "%m/%d/%Y %H:%M.%S" )},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; lineColor = lineColor, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onRowTouch = onRowTouch,&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onRender = onRowRender, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; InstBG:toFront() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; InstGroup:toFront( ) &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; local function removeInst () &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transition.to(InstGroup , {time = 50, alpha = 0, onComplete = function() InstGroup:removeSelf() end } ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tableView:deleteAllRows( ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; prefs.firstRun3 = false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; prefs:save() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return true &nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp;&nbsp; InstBG:addEventListener( "tap", removeInst ) end &nbsp;&nbsp;&nbsp; -- if&nbsp; prefs.firstRun3 == nil then&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Instructor3 () &nbsp;&nbsp;&nbsp; --&nbsp; end

Hope you manage to make sense out of this…

Thanks for the concern!

P.S: I already have a workaround involving a flagging system, but I’d rather avoid that…

bjsorrentino · February 10, 2015, 9:52pm

Hi @akak,

To clarify, you have this specific order of things with the noted behavior? (this list would be from the top to bottom in z-index)

BUTTONS

TABLEVIEW

TAP-DETECTION GROUP (InstGroup+InstBG)… perhaps this is actually on top of TABLEVIEW?

COMPOSER OVERLAY (perhaps non-existant?)

MAIN SCENE

You’re saying the BUTTONS are passing their touch down to TABLEVIEW? Or even further down to the OVERLAY or MAIN SCENE? And those buttons absolutely 100% “return true” in their handler function?
Are you even using a Composer overlay scene? Or just making your own group (InstGroup) which gets placed in front of the the other elements?

akak · February 11, 2015, 10:34am

Hi Brent,

the layering order was correct. Only there was a tap/touch interference among the objects. I found and followed your very good tutorial here: http://coronalabs.com/blog/2013/10/01/tutorial-taptouch-anatomy/

and solved the thing.

Thank you very much for your attention!!!

bjsorrentino · February 9, 2015, 9:50pm

Hi @akak,

For full control of the row separators, you should consider just adding those to each row as separate display objects, for example, a line object or very thin rectangle object of 1-3 pixels tall which is positioned at the top or bottom of each row.

For the touch going through buttons, this should not be happening, but I’d need to see your code and how you’re creating these buttons to better determine what is occurring.

Take care,

Brent

akak · February 10, 2015, 11:40am

Hi Brent,

Thanks a lot for the reply!

The ‘make your own line separator’ expedient works great. I didn’t thinl of that. thanks.
As for the tableview still receiving touches I can give you the below code, which is the function that creates an overlay group to the scene containing UI instructions for the user. This group (InstGroup) has a background (InstBG), or better a ‘foreground’ since I bring it on top of the other elements, that listens for a tap to remove the whole group of instructions. If I tap it in correspondance of the underlaying tableview this latter still receives the touch… and messes up things!!!

I don’t why this happens since this function is called at the very bottom of the code for the scene, so that there’s no way for the tableview to be on top of the object receiving the tap:

&nbsp;&nbsp;&nbsp; local function Instructor3 () &nbsp; local var1 &nbsp; local InstGroup = display.newGroup() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sceneGroup:insert (InstGroup) &nbsp;&nbsp;&nbsp;&nbsp; if aspectRatio \> 1.5 then&nbsp; var1=45 else var1 = 0 &nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp;&nbsp; local InstBG = display.newRect( InstGroup, centerX, centerY, display.contentWidth, display.contentHeight ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; InstGroup:insert(InstBG) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; InstBG:setFillColor(0.2) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; InstBG.alpha= 0.1 &nbsp;&nbsp;&nbsp; local vertix = { 0, 5, -10, -15, 10, -15} &nbsp;&nbsp;&nbsp;&nbsp; local Tr1 = display.newPolygon(InstGroup,&nbsp; centerX, display.contentHeight - 55, vertix ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tr1:setFillColor( 1 )&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local Tr3 = display.newPolygon(InstGroup,&nbsp; centerX, centerY - 55, vertix ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tr3:setFillColor( 1 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local Tr2 = display.newPolygon(InstGroup,&nbsp; display.contentWidth - 30, centerY + 45 + var1, vertix ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tr2:setFillColor( 1 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local Tr4 = display.newPolygon(InstGroup,&nbsp; display.contentWidth - 25, 100, vertix ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tr4:setFillColor( 1 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tr4:rotate( 180 )&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; local txt4 = display.newText( InstGroup, "Options (addends here)", display.contentWidth - 70, 120, "Helvetica", 12 ) &nbsp;&nbsp;&nbsp;&nbsp; local txt1 = display.newText( InstGroup, "Delete all saves", centerX, display.contentHeight - 75, "Helvetica", 12 ) &nbsp;&nbsp;&nbsp;&nbsp; local txt3 = display.newText( InstGroup, "Save current count", centerX , centerY - 75 , "Helvetica", 12 ) &nbsp;&nbsp;&nbsp;&nbsp; local txt2 = display.newText(InstGroup, "Load / delete", display.contentWidth - 55, centerY + 25 + var1, vertix, 12 ) &nbsp;&nbsp;&nbsp;&nbsp; tableView:insertRow({ &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; isCategory = isCategory, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rowHeight = rowHeight, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rowColor = rowColor, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params = { id = 1, inputTxt = "'Example Save'", passedNumber = tostring(10), TimeDate = os.date( "%m/%d/%Y %H:%M.%S" )},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; lineColor = lineColor, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onRowTouch = onRowTouch,&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onRender = onRowRender, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; InstBG:toFront() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; InstGroup:toFront( ) &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; local function removeInst () &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transition.to(InstGroup , {time = 50, alpha = 0, onComplete = function() InstGroup:removeSelf() end } ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tableView:deleteAllRows( ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; prefs.firstRun3 = false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; prefs:save() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return true &nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp;&nbsp; InstBG:addEventListener( "tap", removeInst ) end &nbsp;&nbsp;&nbsp; -- if&nbsp; prefs.firstRun3 == nil then&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Instructor3 () &nbsp;&nbsp;&nbsp; --&nbsp; end

Hope you manage to make sense out of this…

Thanks for the concern!

P.S: I already have a workaround involving a flagging system, but I’d rather avoid that…

bjsorrentino · February 10, 2015, 9:52pm

Hi @akak,

To clarify, you have this specific order of things with the noted behavior? (this list would be from the top to bottom in z-index)

BUTTONS

TABLEVIEW

TAP-DETECTION GROUP (InstGroup+InstBG)… perhaps this is actually on top of TABLEVIEW?

COMPOSER OVERLAY (perhaps non-existant?)

MAIN SCENE

You’re saying the BUTTONS are passing their touch down to TABLEVIEW? Or even further down to the OVERLAY or MAIN SCENE? And those buttons absolutely 100% “return true” in their handler function?
Are you even using a Composer overlay scene? Or just making your own group (InstGroup) which gets placed in front of the the other elements?

akak · February 11, 2015, 10:34am

Hi Brent,

the layering order was correct. Only there was a tap/touch interference among the objects. I found and followed your very good tutorial here: http://coronalabs.com/blog/2013/10/01/tutorial-taptouch-anatomy/

and solved the thing.

Thank you very much for your attention!!!