Hi,
I’m creating a button such as:
button = newButton
{
left = display.contentWidth/2,
top = display.contentHeight/5
}
but I’m having trouble centering it on the screen. What am I doing wrong?
Thanks.
top = display.contentHeight/2
That didn’t work. Please look at the attached screen shot. Thanks.
I don’t know why it’s not working. Are you doing something else in your code, that changes the location of the button?
It should simply be this:
left = display.contentWidth/2,
top = display.contentHeight/2
-Saer
The whole button object is set to {left=…;top=…} and since the label is centered within that button, it is then off-center w.r.t. the display (and widgets don’t support anchorX/anchorY so you can easily adjust it with that).
This seemed to work for me:
button = widget.newButton { width = 200, left = display.contentWidth/2 - 100, -- subtract half the defined width top = display.contentHeight/2, label = "foo" }
Of course, if your label is of varying width, you might need to tweak it after the fact (i.e. create the button, detect its size, then re-set its left edge). Or maybe setting the labelAlign=left might help (though it wouldn’t account for the length of the label).
Ahh, I see now. Makes sense.
I never use ‘label’ since I usually make all my own buttons via PS. I always set the x,y, of my widgets manually, outside the brackets, which works fine.
@amyusuf1: Hopefully you’ve got it working now. 
Cheers!
-Saer
Why not simply set the .x and .y properties after the widget is defined to position it exactly where you want? Top and Left are semantically not the same as x and y.
Rob
Hi,
That’s what I ended up doing after looking at somebody else’s code.
I tried looking through, http://docs.coronalabs.com/api/index.html, the Corona SDK API documentation and I can’t find where it says that widget has a x and y property? Thanks.
Hi @amyusuf1,
All display objects have an inherent x and y property which you can set after declaration to reposition the object. The reason widgets have a “top” and “left” is because, in the former graphics engine, widgets would be positioned to a top and left position and developers became accustomed to that. So, in the new graphics engine, we built the same functionality in to ease conversion. Of course, you can still position the widget after declaring it (using x and y), but that will be around its center point, not top and left.
Hope this helps,
Brent
top = display.contentHeight/2
That didn’t work. Please look at the attached screen shot. Thanks.
I don’t know why it’s not working. Are you doing something else in your code, that changes the location of the button?
It should simply be this:
left = display.contentWidth/2,
top = display.contentHeight/2
-Saer
The whole button object is set to {left=…;top=…} and since the label is centered within that button, it is then off-center w.r.t. the display (and widgets don’t support anchorX/anchorY so you can easily adjust it with that).
This seemed to work for me:
button = widget.newButton { width = 200, left = display.contentWidth/2 - 100, -- subtract half the defined width top = display.contentHeight/2, label = "foo" }
Of course, if your label is of varying width, you might need to tweak it after the fact (i.e. create the button, detect its size, then re-set its left edge). Or maybe setting the labelAlign=left might help (though it wouldn’t account for the length of the label).
Ahh, I see now. Makes sense.
I never use ‘label’ since I usually make all my own buttons via PS. I always set the x,y, of my widgets manually, outside the brackets, which works fine.
@amyusuf1: Hopefully you’ve got it working now.
Cheers!
-Saer
Why not simply set the .x and .y properties after the widget is defined to position it exactly where you want? Top and Left are semantically not the same as x and y.
Rob
Hi,
That’s what I ended up doing after looking at somebody else’s code.
I tried looking through, http://docs.coronalabs.com/api/index.html, the Corona SDK API documentation and I can’t find where it says that widget has a x and y property? Thanks.
Hi @amyusuf1,
All display objects have an inherent x and y property which you can set after declaration to reposition the object. The reason widgets have a “top” and “left” is because, in the former graphics engine, widgets would be positioned to a top and left position and developers became accustomed to that. So, in the new graphics engine, we built the same functionality in to ease conversion. Of course, you can still position the widget after declaring it (using x and y), but that will be around its center point, not top and left.
Hope this helps,
Brent