tweaking visual options of the tableView; is it a bug?

Hello,

I’m trying to tweak and adjust the visual options of the tableView and here are the points that I’d like to accomplish:

1.To set the lines that are separating individual rows at the same distance from the top and bottom of each text line that appears in each row, perhaps 10 -20 pixels from the top/bottom of the text line.  Is it possible to code?

Right now some lines are and other lines are not completely visible depending on the length of the line.

This line is completely visible:

zo9q2q.jpg

This line is much longer and therefore is cut off:

2l91lyo.jpg

What I would like to create is something like this:

24cuu60.jpg

where each text line is inside a separate text box or field; dividing lines or even better, dividing spaces are dynamically placed according to  the text line’s height;  and all the text boxes can be scrolled.

Is this possble to create in Corona?


  1. When I scroll the table down (swiping up)  the text is properly displayed.

see here:

acpjq.jpg

But when scrolling up (swiping down) some of the text lines (the longer ones) get messed up:

2089mol.jpg

It shows like this both in simulator and real device. Is there a way to fix it? or is is a bug?

the code I’m using:

[lua]

local widget = require( “widget” )
require(“sqlite3”)
local path = system.pathForFile(“mq.sqlite”, system.DocumentsDirectory )

local myData = {} – a table to contain the data loaded from SQLite

local function setupDB()

    local function copyDBtoDocDir()
        file = io.open( path, “r” )
           if( file == nil )then           

               pathSource     = system.pathForFile( “mq.sqlite”, system.ResourceDirectory )  
               fileSource = io.open( pathSource, “rb” )
               contentsSource = fileSource:read( “*a” )                                  

                pathDest = system.pathForFile( “mq.sqlite”, system.DocumentsDirectory )                 
                fileDest = io.open( pathDest, “wb” )                 
                fileDest:write( contentsSource )                 

                io.close( fileSource )        
                io.close( fileDest )         
           end   
    end

    copyDBtoDocDir()     
    
    db = sqlite3.open( path )
    local function onSystemEvent( event )
        if( event.type == “applicationExit”) then
            db:close()
        end
    end
    print ("version "…sqlite3.version())
    print ("db path "…path)  
    
    Runtime:addEventListener (“system”, onSystemEvent)    
end

local function loadData()
    
    local count = 0
    local sql = “SELECT * FROM allmq LIMIT 700”
    – local sql = “SELECT id, category, quote FROM allmq where category = ‘c 1’”
    local row
    
    for row in db:nrows(sql) do
        count = count + 1
        myData[count] = row.id … "  " … row.quote
        – print(myData[count]) – lets see if the data is coming in from SQLite
    end    
    
end

setupDB()

loadData()

– Handle row rendering
local function onRowRender( event )
    local phase = event.phase
    local row = event.row
    – in graphics 2.0, the group contentWidth / contentHeight are initially 0, and expand once elements are inserted into the group.
    – in order to use contentHeight properly, we cache the variable before inserting objects into the group
    local groupContentHeight = row.contentHeight
    – local rowTitle = display.newText( row, myData[row.index], 0, 0, nil, 24 )
    local rowTitle = display.newText( row, myData[row.index], 0, 0, 280, 480, nil, 18 )
    – in Graphics 2.0, the row.x is the center of the row, no longer the top left.
    rowTitle.x = 10
    – we also set the anchorX of the text to 0, so the object is x-anchored at the left
    rowTitle.anchorX = 0
    print(rowTitle.x)
    rowTitle.y = groupContentHeight * 1
    rowTitle:setFillColor(0/255,120/255,50/255)
end

–Set the background to grey
display.setDefault( “background”, 150/255,150/255,125/255 )

– The gradient used by the title bar
local titleGradient = {
    type = ‘gradient’,
    color1 = { 189/255, 203/255, 220/255, 255/255 },
    color2 = { 89/255, 116/255, 152/255, 255/255 },
    direction = “down”
}

– Create toolbar to go at the top of the screen
local titleBar = display.newRect( display.contentCenterX, 0, display.contentWidth, 32 )
titleBar:setFillColor( titleGradient )
titleBar.y = display.screenOriginY + titleBar.contentHeight * 0.5

– create embossed text to go on toolbar
local titleText = display.newEmbossedText( “Qs”, display.contentCenterX, titleBar.y, native.systemFontBold, 20 )

– Create the widget
local tableView = widget.newTableView
{
    left = 0,
    top = 0,
    height = 480,
    width = 320,
    onRowRender = onRowRender,
    – noLines = true,
    --onRowTouch = onRowTouch,
    – listener = scrollListener
}
– Insert rows
for i = 1, #myData do
    local isCategory = false
    local rowHeight = 280
    local rowColor = { default={ 1, 1, 1 }, over={ 1, 0.5, 0, 0.2 } }
    local lineColor = { 1, 0.5, 0 }

   

   – Insert a row into the tableView
    tableView:insertRow(
        {
            isCategory = isCategory,
            rowHeight = rowHeight,
            rowColor = rowColor,
            lineColor = lineColor,
        }
    )
end
 

[/lua]

and the SQLite db is attached.

Thanks for any comments and suggestions.

keram

Is there no one that can answer these two simple questions?

Anyone from the Corona staff?

I would consider not using a tableView for this but to use a scrollView.  Trying to know the row height before you create the row is going to be difficult to find out.   If you use a scrollView, you can use the techniques in this tutorial:

http://coronalabs.com/blog/2014/06/17/tutorial-working-with-large-blocks-of-text/

to generate an array of text blocks and put them in the scrollView.  You can then adorn the rows however you want.

Rob

Hi Rob,

Thanks for your advice and the tutorial. I tried with a very large block of text and scrolling works OK, no more distorted lines.

Does it mean that from that large text block, which now is a tab delimited text file, I can extract and display certain lines falling in specific categories?

And is it possible to use SQLite as an alternative using this method?

keram

SQLite is an alternate to you storing your data in a text file.  You are still going to have to figure out how to display it.

Rob

Is there no one that can answer these two simple questions?

Anyone from the Corona staff?

I would consider not using a tableView for this but to use a scrollView.  Trying to know the row height before you create the row is going to be difficult to find out.   If you use a scrollView, you can use the techniques in this tutorial:

http://coronalabs.com/blog/2014/06/17/tutorial-working-with-large-blocks-of-text/

to generate an array of text blocks and put them in the scrollView.  You can then adorn the rows however you want.

Rob

Hi Rob,

Thanks for your advice and the tutorial. I tried with a very large block of text and scrolling works OK, no more distorted lines.

Does it mean that from that large text block, which now is a tab delimited text file, I can extract and display certain lines falling in specific categories?

And is it possible to use SQLite as an alternative using this method?

keram

SQLite is an alternate to you storing your data in a text file.  You are still going to have to figure out how to display it.

Rob