(3) Use UGUI to realize the hierarchical menu

This is the 21st day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Recommended reading

CSDN home page

GitHub open source address

Unity3D plugin sharing

Jane’s address book

My personal blog

QQ group: 1040082875

Hello everyone, I am a Buddhist engineer ☆ quiet small magic dragon ☆, update Unity development skills from time to time, think useful remember one key three link oh.

One, foreword

The attributes and usage methods of each UGUI component, such as Text, Button, Image, Toggle, InputField, ScrollView, etc.

Then share some principles of UGUI, such as UGUI rendering mode, UGUI zoom calculation, UGUI tracing point positioning, UGUI automatic layout and so on.

I believe you will have a more comprehensive understanding of UGUI after reading.

Next, I’ll share an example of the UGUI UI component being applied.

Ii. Introduction and effect drawing

Hierarchy menu in Unity is not used much, mainly do classification when used more, today to share a few hierarchy code, expand, written as a plug-in is also good.

Let’s take a look at the effect first.

The first effect:Second effect:The third effect: The fourth effect:Fifth effect:The source file:

Source file Download

Github download address: layermenu. unitypackage

Three, implementation,

The first implementation effect

Implementation principle:

This is to use the UGUI Scroll View component of the system to control the creation of the parent object. The parent object is attached with the script to initialize the child object

Advantages and disadvantages: advantages are simple to implement, do not need more plug-ins, the amount of code is not large, the control is convenient. Disadvantages are that only two levels of display can be realized

Implementation process:

Create a new Scrpll View2. Make preforms

This is how the interface is designed:

Change the name Content: parent node container ParentMenu: parent node TextParent: parent node text ChildMenu: child node container item: child node TextChild: child node textThen change the name of the parent node to parentMenu and make a preform:Put the prefab in the Resources folder:To make the child object into a preform:Parentmenu. cs this script is mainly used to create child objects:

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

public class ParentMenu : MonoBehaviour
{
    private GameObject childMenu;// Parent of submenu
    private RectTransform[] childs;// Rect of all submenus
    private RectTransform itemRect;// Submenu prefab
    private Vector3 offset;// The height of a single submenu
    private int count;// The number of submenus
    public bool isOpening { get; private set; }// Whether the parent menu is expanded
    public bool isCanClick { get; set; }// Whether the parent menu can be clicked

    public void Init(RectTransform rect, int count)
    {
        // Find the child node
        childMenu = transform.Find("childMenu").gameObject;
        itemRect = rect;
        this.count = count;
        childs = new RectTransform[this.count];
        offset = new Vector3(0, itemRect.rect.height);
        for (int i = 0; i < this.count; i++)
        {
            childs[i] = Instantiate(itemRect, childMenu.transform);
        }
        childMenu.gameObject.SetActive(false);
        isOpening = false;
        isCanClick = true;
        GetComponent<Button>().onClick.AddListener(OnButtonClick);
    }

    void OnButtonClick()
    {
        if(! isCanClick)return;
        if(! isOpening) StartCoroutine(ShowChildMenu());else
            StartCoroutine(HideChildMenu());
    }

    IEnumerator ShowChildMenu()
    {
        childMenu.gameObject.SetActive(true);
        for (int i = 0; i < count; i++)
        {
            childs[i].localPosition -= i * offset;
            yield return new WaitForSeconds(0.1 f);
        }
        isCanClick = true;
        isOpening = true;
    }

    IEnumerator HideChildMenu()
    {
        for (int i = count - 1; i >= 0; i--)
        {
            childs[i].localPosition += i * offset;
            yield return new WaitForSeconds(0.1 f);
        }
        childMenu.gameObject.SetActive(false);
        isCanClick = true;
        isOpening = false; }}Copy the code

4, write the script foldablemenu. cs this script is mainly to create the parent object, and control the folding menu

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

public class FoldableMenu : MonoBehaviour
{
    private RectTransform content;// Parent of the parent object
    private TextAsset textAsset;// All menu information
    private RectTransform parentRect;// Prefab for the parent menu
    private RectTransform[] parentArr;// An array of all parent menus
    private RectTransform childRect;// Submenu prefab
    private Vector3 parentOffset;// Height of a single parent menu
    private Vector3 childOffset;// Height of a single parent menu
    private int[] cntArr;// The number of child menus that all parent menus have

    void Awake()
    {
        Init();
    }

    void Init()
    {
        // Get the parent node
        content = transform.Find("Viewport/Content").GetComponent<RectTransform>();
        // Get the information in menuinfo
        textAsset = Resources.Load<TextAsset>("menuInfo");
        // Get the height of the parent object
        parentRect = Resources.Load<RectTransform>("parentMenu");
        parentOffset = new Vector3(0, parentRect.rect.height);
        // Get the height of the subobject
        childRect = Resources.Load<RectTransform>("item");
        childOffset = new Vector3(0, childRect.rect.height);
        // Split string info = 3 3 4 4 5 5
        var info = textAsset.text.Split(', ');// Get the number of submenus
        // The length of the array
        cntArr = new int[info.Length];
        // An array of parent menus
        parentArr = new RectTransform[info.Length];
        The height is the total length of all parent objects
        content.sizeDelta = new Vector2(content.rect.width, parentArr.Length * parentRect.rect.height);
        //i = 6
        for (int i = 0; i < cntArr.Length; i++)
        {
            // Create a server
            parentArr[i] = Instantiate(parentRect, content.transform);
            // The coordinates are the width of the previous parent object
            parentArr[i].localPosition -= i * parentOffset;
            / / assignment
            cntArr[i] = int.Parse(info[i]);
            // The number of children on the parent object is 3, 3, 4, 4, 5, 5
            parentArr[i].GetComponent<ParentMenu>().Init(childRect, cntArr[i]);
            int j = i;
            // The button binding event on the parent objectparentArr[i].GetComponent<Button>().onClick.AddListener(() => { OnButtonClick(j); }); }}void OnButtonClick(int i)
    {
        // If iscanclick is false return because it has already been clicked cannot be clicked again unless iscanclick is set to true when raised
        if(! parentArr[i].GetComponent<ParentMenu>().isCanClick)return;
        parentArr[i].GetComponent<ParentMenu>().isCanClick = false;
        //isopening performs menuUp for true and menuDown for flase
        if(! parentArr[i].GetComponent<ParentMenu>().isOpening) StartCoroutine(MenuDown(i));else
            StartCoroutine(MenuUp(i));
    }

    IEnumerator MenuDown(int index)
    {       
        for (int i = 0; i < cntArr[index]; i++)
        {
            // Update the content height
            content.sizeDelta = new Vector2(content.rect.width,
                content.rect.height + childOffset.y);
            for (int j = index + 1; j < parentArr.Length; j++)
            {
                parentArr[j].localPosition -= childOffset;
            }
            yield return new WaitForSeconds(0.1 f); }}IEnumerator MenuUp(int index)
    {
        for (int i = 0; i < cntArr[index]; i++)
        {
            // Update the content height
            content.sizeDelta = new Vector2(content.rect.width,
                content.rect.height - childOffset.y);
            for (int j = index + 1; j < parentArr.Length; j++)
            {
                parentArr[j].localPosition += childOffset;
            }
            yield return new WaitForSeconds(0.1 f); }}}Copy the code

Mount this script to the Scroll View:Run, done!

The second realization effect

Implementation principle: this is also done with UGUI, the difference is that there is no need for container components, mainly to find the parent node, and then save the information of the parent node, the next node to the parent node as the target of the offset, or the parent node as the target of the child node

Advantages and disadvantages: Clear code, strong scalability, no need to design UGUI. Disadvantages: simple structure, no multi-level functions

Implementation process: 1, create a prefabSimple structure, two Image, arrow Image with Button component (can be pulled down and merged) and then put the prefab in the Resources folder:2. Write publicdata. cs script for a data class

using UnityEngine;

public class PublicData
{
    public static Transform parent;
    public static Vector2 currentPosition;
}

Copy the code

3. Write the script options_triangle. cs to initialize the function of the child node

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

public class Options_Triangle : MonoBehaviour
{
    public Button triangle;
    public Image content;
    public List<Transform> children = new List<Transform>();
    void Start()
    {
        triangle.onClick.AddListener(() =>
        {
            if (triangle.transform.eulerAngles.z == 270)
            {
                triangle.transform.eulerAngles = Vector3.zero;
                for (int i = 0; i < children.Count; i++)
                {
                    children[i].gameObject.SetActive(false); }}else
            {
                triangle.transform.eulerAngles = new Vector3(0.0.- 90.);
                for (int i = 0; i < children.Count; i++)
                {
                    children[i].gameObject.SetActive(true); }}}); }}Copy the code

4, write clickEvent. cs this is a hierarchical menu editing script

using UnityEngine;
using UnityEngine.UI;

public class ClickEvent : MonoBehaviour
{
    public Button add_options_t;
    public Button add_options;
    public Transform canvasParent;

    void Start()
    {
        add_options_t.onClick.AddListener(() =>
        {
            if (PublicData.parent == null)
            {
                PublicData.parent = Instantiate(Resources.Load<Transform>("Options_triangle"));
                PublicData.parent.transform.SetParent(canvasParent, false);
                PublicData.currentPosition = new Vector2(PublicData.parent.position.x, PublicData.parent.position.y);
            }
            else
            {
                Transform option = Instantiate(Resources.Load<Transform>("Options_triangle"));
                option.transform.SetParent(PublicData.parent, false);
                option.transform.position = new Vector3(PublicData.currentPosition.x + 30, PublicData.currentPosition.y - 32.0);
                PublicData.parent.GetComponent<Options_Triangle>().triangle.transform.eulerAngles = new Vector3(0.0.- 90.);
                PublicData.parent.GetComponent<Options_Triangle>().children.Add(option);
                PublicData.parent = option;
                PublicData.currentPosition = newVector2(PublicData.parent.position.x, PublicData.parent.position.y); }}); add_options.onClick.AddListener(() => {if (PublicData.parent == null)
            {
                return;
            }
            PublicData.parent.GetComponent<Options_Triangle>().triangle.transform.eulerAngles = new Vector3(0.0.- 90.);
            Transform content = Instantiate(Resources.Load<Transform>("Options"));
            content.transform.SetParent(PublicData.parent, false);
            content.transform.position = new Vector3(PublicData.currentPosition.x + 16, PublicData.currentPosition.y - 32.0);
            PublicData.parent.GetComponent<Options_Triangle>().children.Add(content);
            PublicData.currentPosition = new Vector2(content.position.x - 16, content.position.y); }); }}Copy the code

OK. Simply mount the ClickEvent script on any object in the scene

The third realization effect

Implementation principle: This is also done with UGUI, the more characteristic is that there is no use of a line of code, the use of VerticalLayoutGroup and ContentSizeFitter components of the automatic sorting function and Button OnClick component control sub-object display and hide to achieve the hierarchical menu function.

Advantages and disadvantages: the advantage is no code control, simple and easy to use. The disadvantage is that the UI needs to be stacked in advance, the workload is relatively large, and then the time to change the energy is large

Implementation process: 1. Create a Scroll View2. Parent node The parent node has a Button and a hidden Image

Button It has two functionsBtnSelecteStyle is a child of Button, so BtnSelecteStyle will block Button. Since BtnSelecteStyle’s OnClick is also required to close the child node, BtnSelecteStyle’s OnClick mount function is required:The second is the container that displays the child nodes, namely ImgBtnParentLayout

The ImgBtnParentLayout is the container for the child nodeHere are some child nodes

OK. Can the

The fourth realization effect

How it works: This is dynamically generated with code, one script is used to create the parent object and child object, and the parent relationship, the other script is used to set the position, arrow changes, button function initialization

Advantages and disadvantages: the advantages are clear code, clear structure, can achieve multi-level display, multi-level directory setting, tree level menu, etc. Disadvantages are that there is no code to judge the last node, the last node can not set pictures, the function of the last node is not added

Realization process: 1, the first is to make preforms ArrowButton and ArrowButton2 are both used to control the closing and display of child nodes. The difference is that ArrowButton is a small button on the left and has a picture display function. ArrowButton2 is an overall button, which is not displayed, but can be shown or hidden by clicking on the whole

Resources: The image is white, if you look carefully you can still see it – then save the download and put it in the project

Itempanelbase. cs: ItemPanelbase. cs: ItemPanelbase. cs: ItemPanelbase. cs: ItemPanelbase. cs: ItemPanelbase. cs: ItemPanelbase. cs

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

public enum NameSort
{
    Default,
    Active,
    Passive
}
public class ItemPanelBase : MonoBehaviour
{
    private List<ItemPanelBase> childList;// Set of subobjects
    [HideInInspector]
    public Button downArrow;// Press the arrow button
    public Button downArrow2;// Press the arrow button
    public Sprite down, right, dot;
    public bool isOpen { get; set; }// The child object is open
    private Vector2 startSize;// Start size

    NameSort m_NameSore = NameSort.Default;
    string m_Name;

    private void Awake()
    {
        childList = new List<ItemPanelBase>();
        downArrow = this.transform.Find("ContentPanel/ArrowButton").GetComponent<Button>();
        downArrow.onClick.AddListener(() =>
        {
            if (isOpen)
            {
                CloseChild();
                isOpen = false;
            }
            else
            {
                OpenChild();
                isOpen = true; }}); downArrow2 =this.transform.Find("ContentPanel/ArrowButton2").GetComponent<Button>();
        downArrow2.onClick.AddListener(() =>
        {
            if (isOpen)
            {
                CloseChild();
                isOpen = false;
            }
            else
            {
                OpenChild();
                isOpen = true; }}); startSize =this.GetComponent<RectTransform>().sizeDelta;
        isOpen = false;
    }

    // Add child objects to the collection
    private void AddChild(ItemPanelBase parentItemPanelBase)
    {
        childList.Add(parentItemPanelBase);
        if (childList.Count >= 1) { downArrow.GetComponent<Image>().sprite = right; }}// Set the name value of the current object
    public void SetName(string _name,NameSort m_sort)
    {
        m_Name = _name;
        m_NameSore = m_sort;
    }

    /// <summary>
    ///Set the parent object, the parent object is not the first level menu
    /// </summary>
    /// <param name="parentItemPanelBase"></param>
    public void SetItemParent(ItemPanelBase parentItemPanelBase)
    {
        this.transform.parent = parentItemPanelBase.transform;
        parentItemPanelBase.AddChild(this);
        this.GetComponent<VerticalLayoutGroup>().padding = new RectOffset((int)parentItemPanelBase.downArrow.GetComponent<RectTransform>().sizeDelta.x, 0.0.0);
        if (parentItemPanelBase.isOpen)
        {

            this.GetComponent<ItemPanelBase>().AddParentSize((int)this.gameObject.GetComponent<RectTransform>().sizeDelta.y);
        }
        else
        {
            this.transform.gameObject.SetActive(false); }}/// <summary>
    ///Set the parent object, the parent object as a level menu
    /// </summary>
    /// <param name="tran"></param>
    public void SetBaseParent(Transform tran)
    {
        this.transform.parent = tran;
    }

    /// <summary>
    ///Populate Item data
    /// </summary>
    /// <param name="_name">The name</param>
    public void InitPanelContent(string _name)
    {
        transform.Find("ContentPanel/Text").GetComponent<Text>().text = _name;
    }

    /// <summary>
    ///Update Panel size after adding a child object
    /// </summary>
    /// <param name="change"></param>
    public void UpdateRectTranSize(int change)
    {
        this.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(startSize.x, this.gameObject.GetComponent<RectTransform>().sizeDelta.y + change);
    }
    /// <summary>
    ///Increases the height of the parent object
    /// </summary>
    /// <param name="parentItem"></param>
    /// <param name="change"></param>
    public void AddParentSize(int change)
    {
        if (this.transform.parent.GetComponent<ItemPanelBase>() ! =null)
        {
            this.transform.parent.GetComponent<ItemPanelBase>().UpdateRectTranSize(change);
            this.transform.parent.GetComponent<ItemPanelBase>().AddParentSize(change); }}/// <summary>
    ///Close the list of child objects
    /// </summary>
    public void CloseChild()
    {
        if (childList.Count == 0) return;
        foreach (ItemPanelBase child in childList)
        {
            child.gameObject.SetActive(false);
            child.GetComponent<ItemPanelBase>().AddParentSize(-(int)child.gameObject.GetComponent<RectTransform>().sizeDelta.y);
        }
        downArrow.GetComponent<Image>().sprite = right;
    }

    /// <summary>
    ///Open the list of child objects
    /// </summary>
    public void OpenChild()
    {
        if (childList.Count == 0)
        {
            if (m_Name == "125K Card Reader" && m_NameSore == NameSort.Active)
            {
                Debug.Log("125 k equipment");
            }
            return;
        }

        foreach (ItemPanelBase child in childList)
        {
            child.gameObject.SetActive(true);
            child.GetComponent<ItemPanelBase>().AddParentSize((int)child.gameObject.GetComponent<RectTransform>().sizeDelta.y); } downArrow.GetComponent<Image>().sprite = down; }}Copy the code

Pulldownlist. cs this is the script to create the hierarchy menu: it’s a bit tedious

using System.Collections.Generic;
using UnityEngine;

public class PullDownList : MonoBehaviour
{
    private List<GameObject> itemPanelList;
    public GameObject itemPanel;

    private void Awake()
    {
        itemPanelList = new List<GameObject>();
    }

    void Start()
    {
        for (int i = 0; i < 27; i++)
        {
            // First menu
            if(i == 0)
            {
                GameObject newItemPanel = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel);
                newItemPanel.GetComponent<ItemPanelBase>().SetBaseParent(this.transform);
                newItemPanel.GetComponent<ItemPanelBase>().InitPanelContent("Level one");
            }
            // Secondary menu
            if (i == 1)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[0].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level two");
            }
            else if (i == 2)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[0].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level two");
            }
            // Menu level 3
            else if (i == 3)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[1].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level three");
            }
            else if (i == 4)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[1].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level three");
            }
            else if (i == 5)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[1].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level three");
            }
            else if (i == 6)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[1].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level three");
            }
            else if (i == 7)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[2].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level three");
            }
            else if (i == 8)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[2].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level three");
            }
            else if (i == 9)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[2].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level three");
            }
            else if (i == 10)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[2].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level three");
            }
            // Menu level 4
            else if (i == 11)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[3].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Active);
            }
            else if (i == 12)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[3].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Active);
            }
            else if (i == 13)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[4].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Active);
            }
            else if (i == 14)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[4].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Active);
            }
            else if (i == 15)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[5].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Active);
            }
            else if (i == 16)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[5].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Active);
            }
            else if (i == 17)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[6].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Active);
            }
            else if (i == 18)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[6].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Active);
            }
            else if (i == 19)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[7].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Passive);
            }
            else if (i == 20)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[7].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Passive);
            }
            else if (i == 21)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[8].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Passive);
            }
            else if (i == 22)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[8].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Passive);
            }
            else if (i == 23)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[9].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Passive);
            }
            else if (i == 24)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[9].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Passive);
            }
            else if (i == 25)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[10].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Passive);
            }
            else if (i == 26)
            {
                GameObject newItemPanel2 = Instantiate(itemPanel);
                itemPanelList.Add(newItemPanel2);
                newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[10].GetComponent<ItemPanelBase>());
                newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent("Level four");
                newItemPanel2.GetComponent<ItemPanelBase>().SetName("Level four", NameSort.Passive); }}}}Copy the code

Mount the script on the Panel

OK, we’re done

The fifth realization effect

Implementation principle: this is the hierarchy menu with UI hard stack, and then through the code control object hiding and display, can achieve the hierarchy menu folding and drop-down function, mainly using GridLayoutGroup component to sort and update

Advantages and disadvantages: the advantages of simple operation, the code is simple, don’t need too much understanding, then can show a multilevel menu, multi-stage content, and the last node function and image setting function Defect is need to stack the UI, expandable sex difference, the early stage of the workload is big, then later change the workload is big, the most important thing is that I felt this way quite low

Implementation process:

1, display the UI Panel mounted on the GridLayoutGroup componentTo make the UI UI is very simple, a Button with two children, one text and one Image, text is to display the content, Image is to display the arrow

And then somebody says, well, what about subobjects, which have the same structureI’m just dragging the image back

The same goes for the three-level menu:Add a first class menu:

Is it so easy…. Ha ha ha really low

The script function is very simple and the first level menu controls the hidden display of all the children below itThe secondary menu controls the hidden display of all children below it

And so on…

2. Edit the pulldown. cs code

using UnityEngine;
using UnityEngine.UI;

public class PullDown : MonoBehaviour
{
    public Button m_Btn1;// First menu button
    public Button m_Btn2;// Secondary menu button
    public Button m_Btn3;// Three menu buttons

    bool m_is1;// Global parameter control switch
    bool m_is2;// Global parameter control switch

    void Start()
    {
        m_is1 = true;
        m_is2 = true;
        m_Btn1.onClick.AddListener(Btn1_Event);
        m_Btn2.onClick.AddListener(Btn2_Event);
    }

    public void Btn1_Event()
    {
        if (m_is1)
        {
            m_Btn2.gameObject.SetActive(false);
            m_Btn3.gameObject.SetActive(false);
            m_is1 = false;
        }
        else
        {
            m_Btn2.gameObject.SetActive(true);
            m_Btn3.gameObject.SetActive(true);
            m_is1 = true; }}public void Btn2_Event()
    {
        if (m_is2)
        {
            m_Btn3.gameObject.SetActive(false);
            m_is2 = false;
        }
        else
        {
            m_Btn3.gameObject.SetActive(true);
            m_is1 = true; }}}Copy the code

Okay, go ahead and try it

(3) Use UGUI to realize the hierarchical menu

One, foreword

Ii. Introduction and effect drawing

Three, implementation,

The first implementation effect

The second realization effect

The third realization effect

The fourth realization effect

The fifth realization effect

Related Posts

Gitee automatically publishes to Packagist, supported!

R Language BUGS/JAGS Bayesian Analysis: Markov Chain Monte Carlo Method (MCMC) sampling

VMware virtual machine networking, so you really understand the role of every step of the operation, how boring