Center label text vertically / fit label height to amount of text

1,431 views
Skip to first unread message

AUDIOVISUALISA

unread,
Jun 1, 2015, 6:58:36 AM6/1/15
to mitappinv...@googlegroups.com
Hello guys,

is there any possibility to center a text in a label vertically? Or alternatively make the label height depending on the amount of text that will be in the label?


To explain my concrete issue:
Screenshot.jpg shows what my screen looks like in the app at the moment. SreenLayout.jpg shows how I arranged my layout elements on the screen:

1) Overall I have a Vertical Arrangement which fills the screen size.
2) The VA is devided by two Horizontal Arrangements. Their widths fill the parent VA width. Their heights also have fixed percentage values which depend on the height of the VA. I arranged them this way because I need a concrete position for the label text which should also fit to the background image (in the center of the Speechbubble).
3) Now the upper HA is the interesting one: I put the label inside. It is centered both horizontally and vertically in the HA. And I set its width to 70% of the parent HA width, and its height to 70% of the parent HA height, so it has a bit of an offset to the screen borders. But the text itself is still top aligned in the label.

Later on I would like to make one of the buttons change the text in the label. So the height of the text will be variable. Still I would like the text to be vertically centered (instead of top aligned) in the Speechbubble, just for aesthetical purposes.

Does anyone have an idea? I very much appreciate any help!
All the best,
Lisa
Screenshot.jpg
ScreenLayout.jpg

SteveJG

unread,
Jun 1, 2015, 8:59:06 AM6/1/15
to mitappinv...@googlegroups.com
Vertically centered is a problem...you could provide a 'spacer' label above your text label.     Make the spacer labels's Text color to none ... change the height of the spacer by
1)increasing / decreasing the font size
2) adding lots of text (but never showing it because text color is none)
3) experiment with  Height   Fill Parent perhaps
4) set the height to a predetermined pixel level ... be careful  this has consequences on different sized screens.


Then you got the problem of how large is the important text ... how many lines etc.    You could instruct AI to change the  Height of the spacer text based on the Height of the important label..I guess there are many ways that could be done...all of them using probably complicated code...but it would work.

Try some blocks and let us know what you come up with.

Oh...someone might have a better idea, so be sure to visit here while you are experimenting.   Working with AI2 layout is always a pain in the neck, however, there is almost always a solution. :)

Regards,
Steve

AUDIOVISUALISA

unread,
Jun 1, 2015, 11:36:29 AM6/1/15
to mitappinv...@googlegroups.com
Alright, thank you, Steve!

I was afraid there is no such function as vertical text alignment. I also thought of the possibility with the spacer labels, but unfortunately this does not work for me, because the amount of the text in the label has to be variable.

I think, in this case I will solve it by rewriting my text pieces to make them more or less the same length and then placing the label exactly where I need it.

Yet, if anybody else has further solutions, I will always be glad to know. :)
Best,
Lisa

Felipe Manga

unread,
Jun 1, 2015, 11:45:35 AM6/1/15
to mitappinv...@googlegroups.com
Have you tried this?
Make a vertical arrangement.
Inside, put 3 labels. The top and the bottom one should have height set to "Fill Parent".
The middle one is where you put the text. Don't set the height, leave it on Automatic.
That should center the text vertically.

AUDIOVISUALISA

unread,
Jun 1, 2015, 1:49:05 PM6/1/15
to mitappinv...@googlegroups.com
Thanks Felipe! That's exactly it!
Very cool, it looks much better now... :)
Reply all
Reply to author
Forward
0 new messages