Simple UI framework | 5. Develop BasePanel base classes and control the instantiation, creation and management of UI panel Prefab

Simple UI framework

Develop the instantiation, creation and management of BasePanel base class and control UI panel Prefab

1, BasePanel base class

Each panel has common functions, so each panel is given a common base class BasePanel.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BasePanel : MonoBehaviour
{

}

Make all panels basic BasePanel so that they can be managed in UIManager.
Here, BasePanel needs to inherit from monobehavior because it needs to be mounted on our scene object. We first create an empty BasePanel script, and then improve the function.

Next, we operate on each UI panel.
We only need to create a script under each UI panel, and the script can inherit BasePanel.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TextPanel : BasePanel
{

}

Next, we control the UI panel.

2, Instantiation, creation and management of control UI panel Prefab

Back to our UIManager, we need to manage our UI panel here.
We are creating a dictionary to store all our instantiated panels.

private Dictionary<UIType, BasePanel> panelDict;//Save the BasePanel component on the game object of all instantiated panels

Of course, Key is the UIType of the panel. Value can directly save the game object, as well as the components of the game object. Here I directly saved the BasePanel component.

We create a method to get the instantiated panel.

 public BasePanel GetPanel(UIType panelType)
    {

    }

First of all, we need to check whether there is this panel in the dictionary. If not, we will create this panel. If so, we will directly return to this panel.

    public BasePanel GetPanel(UIType panelType)
    {
        if (panelDict == null)
        {
            panelDict = new Dictionary<UIType, BasePanel>();
        }

        BasePanel panel;
        panelDict.TryGetValue(panelType, out panel);
    }

How do we get this panel? There are two steps:
1. Define a type to get.
2. Call the TryGetValue method of the dictionary and pass the Key.
Next, let's judge whether this panel has been approved.

    public BasePanel GetPanel(UIType panelType)
    {
        if (panelDict == null)
        {
            panelDict = new Dictionary<UIType, BasePanel>();
        }

        BasePanel panel;
        panelDict.TryGetValue(panelType, out panel);

        if (panel == null)
        {
            //If it cannot be found, find the path of the Prefab of this panel, and then instantiate the panel according to the Prefab
            string path;
            panelPathDict.TryGetValue(panelType, out path);
            GameObject instPanel = GameObject.Instantiate(Resources.Load(path)) as GameObject;
            instPanel.transform.SetParent(canvasTransform);
            panelDict.Add(panelType, instPanel.GetComponent<BasePanel>());
            return instPanel.GetComponent<BasePanel>();
        }
        else
        {
            return panel;
        }
    }

If it is empty, it means that we have never instantiated the panel of this panelType. We need to

private Dictionary<UIType, string> panelPathDict;//Store the path of all panel Prefab

This dictionary takes the path to Prefab to instantiate it.
Here we get the path and load it.
Because our panels are placed in the path under the Resource file, we can Load directly. After loading, you can instantiate it directly. Here, you need to forcibly convert to GameObject type. Here we use the as method that cannot be used in enumeration before.

GameObject instPanel = GameObject.Instantiate(Resources.Load(path)) as GameObject;

After I create the panel, we should put the panel under our Canvas.
So we need to get the canvas.

    private Transform canvasTransform;
    private Transform CanvasTransform
    {
        get
        {
            if (canvasTransform == null)
            {
                canvasTransform = GameObject.Find("Canvas").transform;
            }
            return canvasTransform;
        }
    }

We can Get it through the construction method or when using it. Here I choose to Get it when using it and define a Get method to Get it.
Here we use the Find method in GameObject. Because there is only one canvas in our scene, we can Find it directly by name or by path.
Why do we get the Transform type of the canvas? Because we want to put the newly instantiated panel under the canvas and set a parent-child hierarchical relationship through the Transform component.
Next, go back to the GetPanel method.
Next, we set the parent-child hierarchical relationship and put the instantiated panel under the canvas.

 instPanel.transform.SetParent(canvasTransform);

The SetParent method has two parameters. The first is the parent class to be set, and the second is whether to maintain its position on the world axis. We don't need to keep it here, because the Canvas is generally scaled by a certain scale. Placing the externally instantiated panel under the Canvas will cause the scaling scale of the Canvas to become abnormal. Therefore, our second parameter can be set to false or not.
After setting the parent class, we can directly put the instantiation panel in the dictionary and use the Add method.

summary

We have established the base class script BasePanel of the panel, which is convenient for us to set the public functions of the panel in the future.
At the same time, we have also set the functions of the control UI panel.

Tags: C# Unity UI

Posted by jallard on Tue, 03 May 2022 18:22:02 +0300