Table View Behaviour

matt405 · May 9, 2014, 11:10am

I have an app with a table view. What I would like is for the table view to scroll just within the bounds of the height that I have specified.

When I render the rows the table view looks fine. My first row is a category row so it stays at the top. When I scroll down, the rows move up and continue behind the category row and then show themselves at the top of the screen. This carries on for about 3 rows before they finally disappear. Extremely annoying.

How can I get the table view to scroll within the boundaries as defined by the width and height?

bjsorrentino · May 9, 2014, 9:09pm

Hi @matt405,

Which build # of Corona are you using? Can you post your basic TableView setup code here?

Thanks,

Brent

matt405 · May 10, 2014, 7:46pm

Hi Brent, thanks for replying.

This is my initial TableView code that I call (I have it tucked away in a function file): -

local function CreateListView(lLeft,lTop,lWidth, lHeight, onRenderFunction, onRowFunction)

local list = widget.newTableView { left = lLeft, top = lTop, width =lWidth,&nbsp; height = lHeight, isBounceEnabled = false, onRowRender = onRenderFunction, onRowTouch = onRowFunction, } return list end

Then I call another function which loads the table view: -

DisplayList:insertRow { isCategory=true, rowHeight &nbsp;=45, lineColor={212,212, 212}, rowColor =&nbsp; {&nbsp; default = { 57,100,152 }, },&nbsp; } for i = 1, #results do if results[i].type == ListType then DisplayList:insertRow { rowHeight &nbsp;= 35, lineColor={212,212, 212}, rowColor =&nbsp; {&nbsp; default = { 255,255, 255 }, },&nbsp; params = { &nbsp; &nbsp; &nbsp; &nbsp; rowid = i }, } end end

Then I use the following row render function: -

local &nbsp;listViewRowRender = function( event ) &nbsp; &nbsp;local row = event.row &nbsp; &nbsp;local id = row.index &nbsp; &nbsp;local params = event.row.params &nbsp; &nbsp;local title={} if id == 1 then if GlobListType == "SignInStatus" then title[1] = "Staff Working Today" title[2] = "Status" end if GlobListType == "AllocationIssues" then title[1] = "Allocation Date/Shift" title[2] = "Area / Detail" end if GlobListType == "ResidentTasks" then title[1] = "Area" title[2] = "Resident" end if GlobListType == "Other Tasks" then title[1] = "Type" title[2] = "Description" end local taskDetail = display.newText( row, title[1], 0, 0, "Calibri", 18 ) taskDetail.x = row.x - ( row.contentWidth \* 0.5 ) + ( taskDetail.contentWidth \* 0.5 ) + 10 taskDetail.y = row.contentHeight \* 0.5 &nbsp; &nbsp; taskDetail:setTextColor(255, 255, 255) local taskDetail2 = display.newText( row, title[2], 0, 0, "Calibri", 18 ) taskDetail2.x = 220 + (taskDetail2.contentWidth / 2)&nbsp; taskDetail2.y = row.contentHeight \* 0.5 &nbsp; &nbsp;taskDetail2:setTextColor(255, 255, 255) end if (event.row.params) then if id ~= 1 then print("Param" .. params.rowid) local rowid = params.rowid local taskDetail = display.newText( row, results[rowid].title, 0, 0, "Calibri", 16 ) taskDetail.x = row.x - ( row.contentWidth \* 0.5 ) + ( taskDetail.contentWidth \* 0.5 ) + 10 taskDetail.y = row.contentHeight \* 0.5 &nbsp; &nbsp; taskDetail:setTextColor(61, 61, 61) local taskDetail2 = display.newText( row, results[rowid].detail, 0, 0, "Calibri", 16 ) taskDetail2.x = 220 + (taskDetail2.contentWidth / 2)&nbsp; taskDetail2.y = row.contentHeight \* 0.5 &nbsp; &nbsp;taskDetail2:setTextColor(61, 61, 61) if results[rowid].status == "2" then local taskStatus = display.newImage( row, "ongoingIcon.png", false ) taskStatus.x = row.x + ( row.contentWidth \* 0.5 ) - taskStatus.contentWidth taskStatus.y = row.contentHeight \* 0.5 else local taskStatus = display.newImage( row, "overdueIcon.png", false ) taskStatus.x = row.x + ( row.contentWidth \* 0.5 ) - taskStatus.contentWidth taskStatus.y = row.contentHeight \* 0.5 end end end return true end

My issue is that the tableview container is not the same size as the screen (this is an IPAD App). The initial load is great, but then when I scroll the table view “bleeds” beyond the size of the initial container by about 3 rows. I have fixed it by having a blank box positioned on top of the table view which is higher than the table view in the z hierarchy. This stops the user seeing the “bleeding”, but it is frustrating.

Not sure how I tell you which build I am on…

matt405 · May 12, 2014, 7:04am

Hi Brent, just thought I would say I have fixed this. I worked out which build I was using and it was about two years old! So, downloaded the latest build and of course nothing worked!

However, after a couple of hours of code review we are all good, and the table views now work as they should.

Thanks for pointing me in the right direction!!!

bjsorrentino · May 9, 2014, 9:09pm