Create UI elements dynamically on Unity 4.6

Hello everyone.

I’m so happy that new version of Unity has arrived. I watched tutorials and now we can create menu elements without OnGUI function.

However there is new question: can you create theese UI elements dynamically? For example:

  1. Inventory UI where it will show all your picked objects and you can manage them.
  2. Ask question game where server will download question and answer texts to show it on theese UI elements.

of course you can, just like any other component just use AddComponent, and then to change something you can use GetComponent and then get which bit you want and change it!

For most of the components (at least in C#) you will need to make sure to add using UnityEngine.UI; at the top, or it will not recognise the component names.

Component names are as you would expect:

  • RectTransform
  • CanvasRenderer
  • Shadow
  • Outline
  • PositionAsUV1
  • Image
  • RawImage
  • Text
  • Mask
  • Button
  • InputField
  • Scrollbar
  • Slider
  • Toggle
  • ToggleGroup
  • Selectable

For example:

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class addText : MonoBehaviour {
	Text str;
	public Font myFont;
	void Start () {
		str = gameObject.AddComponent<Text>();
		str.text = "Hello World";
		str.font = myFont;
	}
}

Scribe

This is what worked for me, for anyone new to Procedural UI and banging your head everywhere…
This works for uGUI. [Unity 5.3.1 version is when I wrote this code]

Requirement:
Have a Panel (as a child of Canvas) and dynamically populated Text boxes inside it.

Procedure:

  1. I created the Panel on Canvas, hid
    it and put atleast one Text prefab
    as a child of the prefab and hid
    that too after making a prefab out
    of it (drag it to the project folder
    to make it a prefab). I would be
    activating the Panel and its
    children via
    gameObject.SetActive(true) when I
    need them.

  2. You have to put the code in either
    Start or Awake for sanity and static
    Instantiation.

    void Start () {

        // 17 is the number of Text UI objects I need inside the panel, I know the exact amount hence using a for loop.
    
        for(var i=0; i <= 17; i++ )
        {
            // Instantiate it without rect and rotation parameters.
            var tempTextBox = Instantiate(PanelText) as Text;
    
            // Use code below to debug in case it doesn't instantiate for whatever reason.
    
            //if (tempTextBox == null)
            //{
            //    Debug.Log(" Can't instantiate:  " + i);
            //    return;
            //}
    
            tempTextBox.fontSize = 14; // Set font size if needed, else it will take from prefab.
            //Set the text box's text element to the current textToDisplay:
            tempTextBox.text = "Blank" + i;
            tempTextBox.name = "Panel Text"; // Use this to easily locate this element in Hierarchy
    
            //Parent to the panel, which is the original panel where prefab was made.
            tempTextBox.transform.SetParent(Panel.transform, false); 
            //Set the text box's text element font size and style:           
        }
    }