Hi,
I have some problems with label alignment for widget. In fact, my label is: “Something\nsomething else”.
However, it aligns everything at the left side, although I would like my label to be centred. I tried labelAlign but it does not work.
Thanks in advance for your replies
Can you provide more information? It’s really important if you want the community to help you that you provide us enough information.
What type of widget are you using? I’m guessing widget.newButton(), but you don’t clearly say.
It’s always helpful to show us your code. You can click the blue <> button in the row with Bold and Italic and then use select/copy/paste to copy the code for your widget constructor from your text editor and then paste it into the popup window. That way we can see exactly what you’re doing and not speculate as to what you are trying to do.
We have a saying: “Help us help you”. These terse questions are not helpful.
Rob
local Button = widget.newButton { shape = "rect", fillColor = { default={1,1,1, 0.6}, over={211/255,211/255,211/255, 0.6} }, label = "Something\nsomething else", labelColor = { default={105/255,105/255,105/255, 0.6}, over={0,191/255,255, 0.6} }, font = "Lato", fontSize = 55, width = 270, height = 200, emboss = false, onEvent = Button, } Button.x =135; Button.y = 100
Ok, I totally understand.
This is a simple problem with a complex explanation, with no easy solution.
Corona’s widgets are made up of other Corona API calls. Your button is a combination of two other API calls: display.newRect() and display.newText(). The labelAlign parameter, defaults to “center” and center’s the display.newText() box inside the display.newRect() box. It has nothing to do with how the text is aligned in side the box created by display.newText(). That API call actually returns a rectangular image and it has it’s own way to align text inside it’s own box. This is where the problem becomes very difficult to address.
For display.newText() there are actually two ways to create the text object, the legacy/simple format which is something like:
local someTextObject = display.newText("string to show", x, y, optionalWidth, optionalHeight, font, fontSize)
There is no way to align text with this format. This is the format that widget.newButton() uses. When you have a multi-line string, which was never intended for a button (and some people would argue that a multi-line button isn’t a good UI design).
The modern way passes a table of information to display.newText() such as:
local someTextObjectOptions = { text = "string to show", x = someValue, y = someValue, width = someWidth, height = someHeight, align = "center", etc. } local someTextObject = display.newText( someTextObjectOptions )
widget.newButton does not use this format.
Now here is where the fix would be pretty challenging. I doubt this is a change we are willing to make to widget.newButton. The widget code is open source and you can download the code from our GitHub repository and modify it to your needs. While that in itself isn’t that difficult to do, the open source version of widgets is a little out of date. And it could be a distraction in your current app development.
So my question is now, are you trying to make two buttons or do you need a button with two lines of text?
You can always make your own display.newText(), set the width and height and then align your text in that box and add your own touch/tap handler to the text box instead of using widget.newButton(). Again, this will be a bit more work, but it will be less work that trying to make widget.newButton work for you.
Rob
Can you provide more information? It’s really important if you want the community to help you that you provide us enough information.
What type of widget are you using? I’m guessing widget.newButton(), but you don’t clearly say.
It’s always helpful to show us your code. You can click the blue <> button in the row with Bold and Italic and then use select/copy/paste to copy the code for your widget constructor from your text editor and then paste it into the popup window. That way we can see exactly what you’re doing and not speculate as to what you are trying to do.
We have a saying: “Help us help you”. These terse questions are not helpful.
Rob
local Button = widget.newButton { shape = "rect", fillColor = { default={1,1,1, 0.6}, over={211/255,211/255,211/255, 0.6} }, label = "Something\nsomething else", labelColor = { default={105/255,105/255,105/255, 0.6}, over={0,191/255,255, 0.6} }, font = "Lato", fontSize = 55, width = 270, height = 200, emboss = false, onEvent = Button, } Button.x =135; Button.y = 100
Ok, I totally understand.
This is a simple problem with a complex explanation, with no easy solution.
Corona’s widgets are made up of other Corona API calls. Your button is a combination of two other API calls: display.newRect() and display.newText(). The labelAlign parameter, defaults to “center” and center’s the display.newText() box inside the display.newRect() box. It has nothing to do with how the text is aligned in side the box created by display.newText(). That API call actually returns a rectangular image and it has it’s own way to align text inside it’s own box. This is where the problem becomes very difficult to address.
For display.newText() there are actually two ways to create the text object, the legacy/simple format which is something like:
local someTextObject = display.newText("string to show", x, y, optionalWidth, optionalHeight, font, fontSize)
There is no way to align text with this format. This is the format that widget.newButton() uses. When you have a multi-line string, which was never intended for a button (and some people would argue that a multi-line button isn’t a good UI design).
The modern way passes a table of information to display.newText() such as:
local someTextObjectOptions = { text = "string to show", x = someValue, y = someValue, width = someWidth, height = someHeight, align = "center", etc. } local someTextObject = display.newText( someTextObjectOptions )
widget.newButton does not use this format.
Now here is where the fix would be pretty challenging. I doubt this is a change we are willing to make to widget.newButton. The widget code is open source and you can download the code from our GitHub repository and modify it to your needs. While that in itself isn’t that difficult to do, the open source version of widgets is a little out of date. And it could be a distraction in your current app development.
So my question is now, are you trying to make two buttons or do you need a button with two lines of text?
You can always make your own display.newText(), set the width and height and then align your text in that box and add your own touch/tap handler to the text box instead of using widget.newButton(). Again, this will be a bit more work, but it will be less work that trying to make widget.newButton work for you.
Rob