What I’m trying to achieve, is a simple button with a price and a currency icon.
I need the text and icon to be centred on the button.
This is however not as easy as it sounds.
For me to anchor the text to the currency icon, or vice-versa, I need the text to be aligned on the side.
Now how do I centre the text on the button, while the text is aligned to the side?
I will need to know the size of the text itself, and not just the bounding box.
I’ve had a similar problem using NGUI.
Here I would just use a label with the ReesizeFreely option on, this way the text will always fit the size of the bounding box. And I can use centre alignment and anchor the currency icon on the side.
Only downside to this solution, is of course that a large enough number will exceed the boundaries of the button.
I think this is a pretty common UI problem, so I would like to hear people’s approach.
Right-click on the button → “Create Empty”. The new GameObject will be automatically positioned and aligned to the center of your button
To the new object, add components Layout - Horizontal Layout Group and Layout - Content Size Fitter, for the latter choose “Horizontal Fit - PreferredSize”
parent both icon and button text to this new object