Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]

How to center text within a group
Started by sidermaniac May 10 2018 08:21 PM

6 replies to this topic
This topic has been archived. This means that you cannot reply to this topic.
[TOPIC: post.html]


[GLOBAL: userInfoPane.html]
  • Observer

  • 25 posts
  • Corona SDK

Hello. I am totally new to Corona. 

Given the following code, I would like to center the menu items but not the line.

But if I use group_menu.x = display.contentCenterX the line is also centered.  

How do I center just the menu items? 

Any other code improving tips would be welcome as well.  

local group_title = display.newGroup()

local title = display.newText( "TITLE", 0, 0, native.systemFont, 16 )
title.x = display.contentCenterX 
title.y = 0
title:setFillColor( 0, .7, 0 )
title.anchorX = .5

local title_line = display.newLine(0, 16, display.contentWidth, 16)
title_line.anchorX = 0

group_title.anchorX = 0
group_title.anchorY = 0
group_title.anchorChildren = true 


local group_menu = display.newGroup()

local menu_file = display.newText("File", 0,0,native.systemFont,16)
menu_file.anchorX = 0
menu_file.x = 10 
menu_file.y = 0
menu_file:setFillColor( .8, .3, 0 )

local menu_windows = display.newText("Wins", 0,0,native.systemFont,16)
menu_windows.anchorX = 0
menu_windows.x = menu_file.x + 40 
menu_windows.y = 0
menu_windows:setFillColor( .8, .3, 0 )

local menu_doors = display.newText("Doors", 0,0,native.systemFont,16)
menu_doors.anchorX = 0
menu_doors.x = menu_windows.x + 50 
menu_doors.y = 0
menu_doors:setFillColor( .8, .3, 0 )

local menu_base = display.newText("Base", 0,0,native.systemFont,16)
menu_base.anchorX = 0
menu_base.x = menu_doors.x + 55 
menu_base.y = 0
menu_base:setFillColor( .8, .3, 0 )

local menu_misc = display.newText("Misc", 0,0,native.systemFont,16)
menu_misc.anchorX = 0
menu_misc.x = menu_base.x + 50 
menu_misc.y = 0
menu_misc:setFillColor( .8, .3, 0 )

local menu_line = display.newLine(0, 16, display.contentWidth, 16)
menu_line.anchorX = 0

group_menu.anchorX = .5
group_menu.x = 0 
group_menu.y = group_title.y + 40

[TOPIC: post.html]


[GLOBAL: userInfoPane.html]
  • Corona Geek

  • 7,461 posts
  • Corona SDK

Groups don't really have a center.  They adjust size as needed.


I think what you really means is, "How do I find the bounds and centroid of all the content in a group?"



local cx = display.contentCenterX
local cy = display.contentCenterY
local fullw = display.actualContentWidth
local fullh = display.actualContentHeight

local mRand = math.random

local group = display.newGroup()

local min = mRand(100, 300)
local max = mRand(100, 300)

for i = 1, 50 do
   local tmp = display.newCircle( group, cx + mRand( -min, max ), cy + mRand( -min, max), 10 )
   tmp:setFillColor( 0, mRand(10,100)/100, mRand(10,100)/100 )

local function findGroupBounds( g )
   local gBounds =  { xMin = math.huge, xMax = -math.huge, yMin = math.huge, yMax = -math.huge }
   for i = 1, g.numChildren do
      local bounds = g[i].contentBounds 
      gBounds.xMin = (gBounds.xMin < bounds.xMin) and gBounds.xMin or bounds.xMin
      gBounds.xMax = (gBounds.xMax > bounds.xMax) and gBounds.xMax or bounds.xMax
      gBounds.yMin = (gBounds.yMin < bounds.yMin) and gBounds.yMin or bounds.yMin
      gBounds.yMax = (gBounds.yMax > bounds.yMax) and gBounds.yMax or bounds.yMax
   return gBounds

local gBounds = findGroupBounds( group )

local groupCenterX = gBounds.xMin + (gBounds.xMax - gBounds.xMin)/2
local groupCenterY = gBounds.yMin + (gBounds.yMax - gBounds.yMin)/2

local tmp = display.newCircle( groupCenterX, groupCenterY, 10)

local edges = display.newRect( groupCenterX, groupCenterY, (gBounds.xMax - gBounds.xMin), (gBounds.yMax - gBounds.yMin)  )
edges.strokeWidth = 4

[TOPIC: post.html]


[GLOBAL: userInfoPane.html]
  • Corona Geek

  • 7,461 posts
  • Corona SDK

If you are talking about placing objects relative to the screen, then use the screen bounds.


Display groups are merely content containers that help you layer things nicely and group them (thus the name).,

[TOPIC: post.html]


[GLOBAL: userInfoPane.html]
  • Corona Geek

  • 7,461 posts
  • Corona SDK

Also, can you clarify what you mean by center?  


(I know it sounds stupid, but your idea of center and mine might be different.)



I've run your code and it looks OK to me. 


Maybe draw a picture showing what centered means to you.  


Also, what device are you simulating?  What are your config settings. all this matters.

[TOPIC: post.html]


[GLOBAL: userInfoPane.html]
  • Corona Geek

  • 7,461 posts
  • Corona SDK

[TOPIC: post.html]


[GLOBAL: userInfoPane.html]
  • Observer

  • 25 posts
  • Corona SDK

Thanks for the replies.  

In the picture you can see that the menu is offset to the left. I would prefer that the menu be centered. 

I am using samsung s5 1080x1920. 

In the display group are the individual menu items like File and Wins.  I also added the line to the group. So when I center the group using group_menu.x = display.contentCenterX the menu is centered nicely but the line becomes offset (as expected).  






I don't think I can do what I want the way I have it set up now.   


So maybe if you can answer these questions instead:  


1. I am drawing lines just to give visual separation. Should I be adding these lines to the group?


2. Do the lines I am drawing need a variable? They serve no purpose other than eye candy. 


3. I have been reading a lot of forum threads trying to get a feel for proper coding style. One of them stated that new users should not use the composer library until they understand how things work. But it seems to me that this library would greatly ease paging and menu-ing . What do you recommend? 



PS: This is an excellent development system. I am very impressed. 


[TOPIC: post.html]

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,144 posts
  • Corona SDK

Corona's display.newText() API supports setting a width for the returned text object. Once you have set a width, you can set an alignment within that width. So you could set the text width to be the same width as your line and then center the text within it's box.


But that may be over thinking things. An even simpler approach would be to not position the group at all and just use display.contentCenterX to position the text items and the line and leave their anchorX's at 0.5 instead of changing them to 0.


Remember that by default all Corona display objects draw from their center. Even if you want to move the group, the default X for the group is 0, so you can draw your object's .x at 0, then center the group.