Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

tableView rows overlap
Started by dan56 Jun 13 2018 07:54 PM

4 replies to this topic
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

dan56

[GLOBAL: userInfoPane.html]
dan56
  • Observer

  • 19 posts
  • Corona SDK

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

Attached Files



[TOPIC: post.html]
#2

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,619 posts
  • Corona SDK

Are you trying to do that because you want rows to be of different heights depending on their content?

 

If so, I don't believe that's possible using the built-in tableView.

 

If you wanted to change the height of your rows without having to do it in two places (i.e. where you pass the row height and when you create the display objects for each row), declare a variable like rowHeight and use this in both. That way you can either directly edit the row height, or perhaps calculate it based on the screen size, orientation etc.



[TOPIC: post.html]
#3

dan56

[GLOBAL: userInfoPane.html]
dan56
  • Observer

  • 19 posts
  • Corona SDK

>> different heights depending on their content? 

 

Yes, that’s it. I want to populate each row from my SQLlite database, with the idea being that each row might have a different height depending on what is in the database. For example, some table rows might contain 2 elements and some might contain 3, and some table rows might also contain an image (and the size of the image could vary).

 

 

>> If so, I don't believe that's possible using the built-in tableView...  declare a variable like rowHeight and use this in both [places].

 

Yep. I can do that. Thanks for the reply!

 



[TOPIC: post.html]
#4

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,865 posts
  • Corona Staff

The rowHeight will default to 40 points if you don't specify it.

 

Rob



[TOPIC: post.html]
#5

dan56

[GLOBAL: userInfoPane.html]
dan56
  • Observer

  • 19 posts
  • Corona SDK

>> default to 40 points if you don't specify it

 

Ah ha! That would explain it. :)

 

 

When I went back to the docs to see what gave me the idea rowHeight would be calculated automatically, I guess I'd say it was these lines in the API reference...

 

    -- 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
 
... and maybe just wishful thinking, but I've got it now. Thanks!
 



[topic_controls]
[/topic_controls]