koobas.hobune.stream
How to match UI Image size to UI Text size when using ContentSizeFitter on UI Text?
I have a prefab that has a UI text object and a separate UI image object grouped together. The aim of this is to have text on screen with a semi-transparent background behind it.
I am using a ContentSizeFitter component to make the UI text's RectTransform fit the size of the text string applied to it in a script and I want to be able to set the size of the UI image in the script to match this. However, when I access the size of the UI text's RectTransform.sizeDelta it returns (0, 0). I have included a code snippet below to show what I am doing.
// Instantiate a panel, which contains the text and background objects
GameObject panel = Instantiate (starpanel, pos, Quaternion.identity) as GameObject;
// Get the text and background objects
GameObject title = panel.transform.Find("StarTitle").gameObject;
GameObject background = panel.transform.Find("Background").gameObject;
// Add name to title and make text white
title.name = planet.name;
title.GetComponent<Text>().text = planet.name;
title.GetComponent<Text>().color = new Color(255, 255, 255, 255);
// Set the background to the same size/location as the text
background.transform.position = title.transform.position;
Debug.Log ("title size = " + title.GetComponent<RectTransform>().sizeDelta); // RETURNS (0, 0)
In the Editor at runtime, the UI text RectTransform has a note saying "Some values driven by ContentSizeFitter" and the width and height deltas are greyed out, although they do have values in them. I have looked at the ContentSizeFitter documentation and can't see any way to access the width and height that that component is generating.
Does anyone know of a way to get the size generated by the ContentSizeFitter component? I have had a trawl of Unity answers, but can't find anything that specifically addresses this question.
Or, thinking laterally, is there another way to tie to the size of my UI image to the size of the UI text object? I have tried adding the UI image component directly to the same object as the UI text (worth a shot...), but that throws an error saying "Can't add 'Image' to {object name} because a 'Text' is already added to the game object!"
After a bit more testing and exploration, I have realised that you can get the text component's preferred width and height even if you use a ContentSizeFitter on the text object or on a parent layout group. These values are the same as the inaccessible RectTransform width and height values.
See here: http://docs.unity3d.com/ScriptReference/UI.Text-preferredWidth.html
I got this to work using a Panel with a Horizontal Layout Group component and a ContentSizeFitter component and then making the UI Text object a child of this.
The paragraph titled "Fit to size of UI element with child Text" on this page was very helpful: http://docs.unity3d.com/Manual/HOWTO-UIFitContentSize.html
I had a slight problem with this approach in that my text object wasn't appearing in the game when I instantiated it and made it the child of another UI element. I discovered that you need to use a different method for setting the transform's parent so that it's coordinates aren't set relative to the parent (and therefore a long way away!)
See here for an answer to this: http://answers.unity3d.com/questions/907585/46-newly-instantiated-ui-prefabs-are-not-visible.html ... and documentation here: http://docs.unity3d.com/ScriptReference/Transform.SetParent.html
Great answer, thanks a lot for clarifying how you did it, it helped me a lot :)!
Hi, I know this is old but since you cracked it I thought I would ask. I have a problem where my text is going over the screen border. $$anonymous$$y panel is anchored to the middle and my text is a child of the panel. How do I stop it from overflowing?
