Hello tableView fans,
I’m having a problem with the tableView widget. When call insertRow() and specify rowHeight explicitly, everything looks good, but when I call insertRow() without specifying a rowHeight, the table displays with overlapping rows (see attached PNG files).
I expected that the inserted row would have a height dynamically determined by the onRowRender() function, and that’s the way I’d like to use it, but I can’t get that to work in my app.
I went back and created a simple example, copying (mostly) from the API reference code, and I can’t even get that to work. I must be missing something simple, but I don’t see what that is. I pasted in the example code below.
What am I missing?
Dan
----------------------------------------------------------------------------------------- -- main.lua ----------------------------------------------------------------------------------------- -- Below is some code that I copied/pasted "almost exactly" from the API reference -- I have noted where I changed it from "exactly" -- The reason for the change was to have 2 lines of text per table row -- I find that when I run this code, the table rows overlap, unless -- I've added one more line to the call to insertRow() to explicitly specify the rowHeight -- I was expecting insertRow to automatically insert a row of the "correct height" based on rowRender() -- What am I doing wrong? -- One more thing, -- I happened to use width = 1280, height = 1920, in my config.lua, and -- have global variables ScreenWidth=1280, ScreenHeight=1920 that I use throughout my code -- I don't think that has anything to do with this table problem, but I included it here in case it does -- 2 new lines of code below ScreenHeight = 1920 ScreenWidth = 1280 local widget = require( "widget" ) local function onRowRender( event ) -- Get reference to the row group local row = event.row -- Cache the row "contentWidth" and "contentHeight" because the row bounds can change as children objects are added local rowHeight = row.contentHeight local rowWidth = row.contentWidth --local rowTitle = display.newText( row, "Row " .. row.index, 0, 0, nil, 14 ) -- 1 modified line below, to specify a non-zero y, and to use a big font needed for my screen size local rowTitle = display.newText( row, "Row " .. row.index, 0, 50, nil, 96 ) rowTitle:setFillColor( 0 ) -- 2 new lines of code below, adding the 2nd line to the row local rowSubTitle = display.newText( row, "RowComment " .. row.index, 0, 110, nil, 48 ) rowSubTitle:setFillColor( 0 ) -- Align the label left rowTitle.anchorX = 0 rowTitle.x = 0 -- but not vertically centered in this example, so commented out the API line below --rowTitle.y = rowHeight \* 0.5 -- 2 new lines of code rowSubTitle.anchorX = 0 rowSubTitle.x = 0 end -- Create the widget local tableView = widget.newTableView( { --left = 200, left = 0, --top = 200, top = 0, --height = 330, height = ScreenHeight, --width = 300, width = ScreenWidth, onRowRender = onRowRender, onRowTouch = onRowTouch, listener = scrollListener } ) -- Insert 40 rows for i = 1, 40 do -- Insert a row into the tableView tableView:insertRow{ -- 1 new line of code below -- Why do I have to add this to keep the rows from overlapping? -- to see the overlap effect I mention, comment out the line below rowHeight = ScreenHeight/10 } end