Click different buttons on the same interface of UnityUI to display the corresponding UI panel


foreword

Simply realize the same interface and click different buttons to display the corresponding UI panel


Tip: The following is the text of this article, and the following cases are for reference

1. Create a new C# code called UIManager

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class UIManager : MonoBehaviour
{
    
    
    //公开定义三个GameObject类用来表示三个UI界面
    public GameObject UIModel;
    public GameObject UIMaterial;
    public GameObject UIMapping;
    void Start()
    {
    
    
        Status = UIStatus.Model;//在start方法中给属性赋值Model,让游戏一开始就显示Model模型界面
    }

    public enum UIStatus//定义枚举,列举UI显示的三种情况
    {
    
    
        Model,
        Material,
        Mapping
    }
    private UIStatus uistatus;//创建枚举变量
    private UIStatus Status//定义属性给枚举变量赋值
    {
    
    
        get
        {
    
    
            return uistatus;
        }
        set
        {
    
    
            uistatus = value;
            UpdateUI();//在给枚举变量赋值后调用UI显示方法,控制UI的显示
        }

    }
    public void UpdateUI()//定义UI显示的方法,通过枚举变量的值来判断
    {
    
    
        UIModel.SetActive(uistatus == UIStatus.Model);
        UIMaterial.SetActive(uistatus == UIStatus.Material);
        UIMapping.SetActive(uistatus == UIStatus.Mapping);
    }
    public void Model()//显示Model模型界面的方法
    {
    
    
        Status = UIStatus.Model;//给属性Status赋值,赋值的同时调用了UpdateUI方法
    }
    public void Material()//显示Material材质界面的方法
    {
    
    
        Status = UIStatus.Material;
    }
    public void Mapping()//显示Mapping贴图界面的方法
    {
    
    
        Status = UIStatus.Mapping;
    }
}

2. Create a new Panel in the scene (name it Panel1)

Create a new one under Panel1 : ① a Panel (named Panel2 ), ② three Scroll Views (named Model Interface , Material Interface , Mapping Interface respectively ) and delete the Scrollbar Horizontal inside (you can also not delete it); create a new three under Panel2 Button (named Model , Material , Model respectively )

And add Grid Layout Group component in Panel2

insert image description here

3. Pull the UIManager code and put it on the Canvas

Pull the GameObject in according to the picturePull it in as shown

4. Add click events on the three Buttons

insert image description here

insert image description here

insert image description here

5. Adjust the position

Just do what you like


Summarize

This is Mengxin's understanding of UI control. If you think it is wrong, you can point it out. Thank you!

Guess you like

Origin blog.csdn.net/lds1942816258/article/details/119108997