Table View Formating and navBar Text Size

Hello Rob Miracle,

I made progress with my app and I need some advise on how to format it better.

As you can see on the image, The name of the country on the right side needs to have the same spacing before the Flag on the right side. I tried getting the length go the tex, but the character size varies. I also want to center the rows.

Also on the navBar widget, how do I change the Text Size on the navBar widget? I want to make for the Title bigger and bolder?

I know you wrote to Rob and he may write back, I wanted to suggest you set the anchorX property  on your text objects to either 0 or 1

If you set all the country name text object anchorX values to 0, they will all align on the left edge.

If you set all the country name text object anchorX values to 1, they will all align on the right edge.

So, for example the country names on the left could be set to 0

and the ones on the right could be set to 1.

This way they will align with the edges of their respective flags.

Is that what you’re wanting?

Rominggamer,

I tried your suggestion but it did not work.

I want to have equal distance between the objects in the row so I have:

Flag1 Country 1  Time  Country 2 Flag2. The trick here is to keep the Country2 name have the same space from the Flag2 on all rows. Flag1 and Country! they have the same space, but on Country2 I depend on the length of the country2 name to keep it let say 10 pixel from the Flag2, so they look uniform. The way it is in my image they vary. 

Here is my onRowRender function:

local function onRowRender( event ) --Set up the localized variables to be passed via the event table --print ("onRowRender") local row = event.row local id = row.index local params = event.row.params local spx=5 row.bg = display.newRect( 0, 0, display.contentWidth, 60 ) row.bg.anchorX = 0 row.bg.anchorY = 0 row.bg:setFillColor( 1, 1, 1 ) row:insert( row.bg ) if ( event.row.params ) then if ( row.isCategory )then --params.title then -- is category row row.title= display.newText( row,params.title, 12, 0, native.systemFontBold, 20 ) row.title.anchorX = 0 row.title.anchorY = 0 row.title:setFillColor( 0 ) row.title.x = 10 row.title.y = row.height / 2 else row.flag = display.newImageRect( row,params.flag,70, 46 ) row.flag.anchorX=0 row.flag.anchorY=0 row.flag.x= 10 row.flag.y = row.height \*0.5-row.flag.height\*0.5 row.countryText = display.newText( row,params.country, 12, 0, native.systemFont, 18 ) row.countryText.anchorX = 0 row.countryText.anchorY = 1.0--0.5 row.countryText:setFillColor( 0.5 ) row.countryText.x = row.flag.x+row.flag.width+spx row.countryText.y = row.height / 2 row.time = display.newText( row,params.time, 12, 0, native.systemFont, 18 ) row.time.anchorX = 0 row.time.anchorY = 1.0--0.5 row.time:setFillColor( 0.5 ) row.time.x = row.countryText.x \*2.5 row.time.y = row.height / 2 row.flag2 = display.newImageRect( row,params.flag2,70, 46 ) row.flag2.anchorX=1 row.flag2.anchorY=0 row.flag2.x= row.countryText.x \*5 row.flag2.y = row.height \*0.5-row.flag.height\*0.5 local ln=string.len( params.country2 )-14 print("len:"..ln) row.countryText2 = display.newText( row,params.country2, 12, 0, native.systemFont, 18 ) row.countryText2.anchorX = 1 row.countryText2.anchorY = 1.0--0.5 row.countryText2:setFillColor( 0.5 ) row.countryText2.x = row.flag2.x- (10\*ln)-150--(string.len( params.country2 )\*10)-8 row.countryText2.y = row.height / 2 row.rightArrow = display.newImageRect(row,myApp.icons, 15 , 40, 40) row.rightArrow.x = display.contentWidth - 20 row.rightArrow.y = row.height / 2 row:insert( row.rightArrow ) row:insert( row.countryText ) row:insert( row.flag ) row:insert( row.countryText2 ) row:insert( row.flag2 ) end end return true end

Rominggamer,

First of all my apologies, you were right about using the anchorX values to 1, I used it on the Flag2, but when I used to the Country2 it did align correctly. That worked fine . Thank you.

Glad it worked!

Thanks @roaminggamer.  While I appreciate the communities faith in me being able to respond to questions, our community is only great when others participate.

When you ask for me to specifically respond, you:

  1. Limit the number of ideas that can help you solve the problem.

  2. Delay your answer until I’m online and working next.

We have many other developers who can answer these project questions as well as, if not better than I can.

Again thanks @roaminggame, I do so ever appreciate your efforts.

Rob

I know you wrote to Rob and he may write back, I wanted to suggest you set the anchorX property  on your text objects to either 0 or 1

If you set all the country name text object anchorX values to 0, they will all align on the left edge.

If you set all the country name text object anchorX values to 1, they will all align on the right edge.

So, for example the country names on the left could be set to 0

and the ones on the right could be set to 1.

This way they will align with the edges of their respective flags.

Is that what you’re wanting?

Rominggamer,

I tried your suggestion but it did not work.

I want to have equal distance between the objects in the row so I have:

Flag1 Country 1  Time  Country 2 Flag2. The trick here is to keep the Country2 name have the same space from the Flag2 on all rows. Flag1 and Country! they have the same space, but on Country2 I depend on the length of the country2 name to keep it let say 10 pixel from the Flag2, so they look uniform. The way it is in my image they vary. 

Here is my onRowRender function:

local function onRowRender( event ) --Set up the localized variables to be passed via the event table --print ("onRowRender") local row = event.row local id = row.index local params = event.row.params local spx=5 row.bg = display.newRect( 0, 0, display.contentWidth, 60 ) row.bg.anchorX = 0 row.bg.anchorY = 0 row.bg:setFillColor( 1, 1, 1 ) row:insert( row.bg ) if ( event.row.params ) then if ( row.isCategory )then --params.title then -- is category row row.title= display.newText( row,params.title, 12, 0, native.systemFontBold, 20 ) row.title.anchorX = 0 row.title.anchorY = 0 row.title:setFillColor( 0 ) row.title.x = 10 row.title.y = row.height / 2 else row.flag = display.newImageRect( row,params.flag,70, 46 ) row.flag.anchorX=0 row.flag.anchorY=0 row.flag.x= 10 row.flag.y = row.height \*0.5-row.flag.height\*0.5 row.countryText = display.newText( row,params.country, 12, 0, native.systemFont, 18 ) row.countryText.anchorX = 0 row.countryText.anchorY = 1.0--0.5 row.countryText:setFillColor( 0.5 ) row.countryText.x = row.flag.x+row.flag.width+spx row.countryText.y = row.height / 2 row.time = display.newText( row,params.time, 12, 0, native.systemFont, 18 ) row.time.anchorX = 0 row.time.anchorY = 1.0--0.5 row.time:setFillColor( 0.5 ) row.time.x = row.countryText.x \*2.5 row.time.y = row.height / 2 row.flag2 = display.newImageRect( row,params.flag2,70, 46 ) row.flag2.anchorX=1 row.flag2.anchorY=0 row.flag2.x= row.countryText.x \*5 row.flag2.y = row.height \*0.5-row.flag.height\*0.5 local ln=string.len( params.country2 )-14 print("len:"..ln) row.countryText2 = display.newText( row,params.country2, 12, 0, native.systemFont, 18 ) row.countryText2.anchorX = 1 row.countryText2.anchorY = 1.0--0.5 row.countryText2:setFillColor( 0.5 ) row.countryText2.x = row.flag2.x- (10\*ln)-150--(string.len( params.country2 )\*10)-8 row.countryText2.y = row.height / 2 row.rightArrow = display.newImageRect(row,myApp.icons, 15 , 40, 40) row.rightArrow.x = display.contentWidth - 20 row.rightArrow.y = row.height / 2 row:insert( row.rightArrow ) row:insert( row.countryText ) row:insert( row.flag ) row:insert( row.countryText2 ) row:insert( row.flag2 ) end end return true end

Rominggamer,

First of all my apologies, you were right about using the anchorX values to 1, I used it on the Flag2, but when I used to the Country2 it did align correctly. That worked fine . Thank you.

Glad it worked!

Thanks @roaminggamer.  While I appreciate the communities faith in me being able to respond to questions, our community is only great when others participate.

When you ask for me to specifically respond, you:

  1. Limit the number of ideas that can help you solve the problem.

  2. Delay your answer until I’m online and working next.

We have many other developers who can answer these project questions as well as, if not better than I can.

Again thanks @roaminggame, I do so ever appreciate your efforts.

Rob