Best way to line text up on a table view (3 columns) ?

Solar2D Widgets
#1

I am using a table view to display my high score table but can’t seem to get it to line up as all the usernames are different length.

I want it like this -

1   fredJones   £15

2   joeSoap      £12

3   mMouse     £10

4   johnDoe      £5

At the moment am using a fixed number of spaces between each item, hence it’s all over the place. Should I just calculate how many spaces needed depending on length of username or is there a easy way ?

Dave

#2

To get perfect vertical alignment you can create 3 text objects in each line and have them line up.

#3

Can you explain a bit more please, as I don’t understand what you mean.

Thanks,

Dave

#4

I mean that in the first row for example, the number 1 will be a text object, the name will be a text object and the amount will be a text object. Then align those instead of aligning with spaces.

For example:

[lua]local function onRowRender( event )

    local row       = event.row

    local params    = row.params

    local place = display.newText(row, params.place, 10, 0, native.systemFont, 30)

    local name = display.newText(row, params.name, 50, 0, native.systemFont, 15)

    local amount = display.newText(row, params.amount, 150, 0, native.systemFont, 15)

end

tableView:insertRow {params = {place = 1, name = “Joe”, amount = “$400”}}

tableView:insertRow {params = {place = 2, name = “Jack”, amount = “$300”}}

tableView:insertRow {params = {place = 3, name = “Jane”, amount = “$200”}}[/lua]

#5

Spot on that, cheers.

Dave

#6

To get perfect vertical alignment you can create 3 text objects in each line and have them line up.

#7

Can you explain a bit more please, as I don’t understand what you mean.

Thanks,

Dave

#8

I mean that in the first row for example, the number 1 will be a text object, the name will be a text object and the amount will be a text object. Then align those instead of aligning with spaces.

For example:

[lua]local function onRowRender( event )

    local row       = event.row

    local params    = row.params

    local place = display.newText(row, params.place, 10, 0, native.systemFont, 30)

    local name = display.newText(row, params.name, 50, 0, native.systemFont, 15)

    local amount = display.newText(row, params.amount, 150, 0, native.systemFont, 15)

end

tableView:insertRow {params = {place = 1, name = “Joe”, amount = “$400”}}

tableView:insertRow {params = {place = 2, name = “Jack”, amount = “$300”}}

tableView:insertRow {params = {place = 3, name = “Jane”, amount = “$200”}}[/lua]

#9

Spot on that, cheers.

Dave