Unity创建按钮点击实现菜单显示和隐藏之美

在游戏的UI界面制作中我们经常会用到使用菜单来选择或则开关一些东西，具体的样式如图所示：

具体的效果是点击按钮前没有显示图层开关菜单，点击后显示，并可以进行开关操作，下面就展示如何制作这个UI控件，实现点击菜单显示和隐藏功能。

这个功能很常见，但是UGUI上并没有这个控件，我们可以通过简单的控件组合来实现这个看似高级的控件。

第一步：

在Hierarchy面板下创建一个button，起名为bgroup,在inspector面板上的image组件的source image处修改button的贴图外观，由于我们的button用不到文字，所以我们把bgroup的子节点的text组件删除。

第二步：

在bgroup下创建一个panel，起名为dropdown，调整panel的大小和位置以适合你需要。也可以添加背景图片。这里我没有添加图片，采用改变color的形式做了一个半透明的背景。接下来给dropdown添加Grid Layout Group组件和Layout Element组件，组件的具体设置如下：

第三步：

在dropdown下创建子控件，我这里标题栏采用图片，开关采用 toggle控件，你也可以采用其他控件，这些控件都是dropdown的子控件。

第四步：

写脚本控制点击事件：

菜单的显示与隐藏控制：

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

public class TuCheng : MonoBehaviour
{
    //public GameObject Gmenue;
    public GameObject btnObj;//显示菜单按钮
    public GameObject caidan;//菜单
    public Sprite expan;//显示菜单按钮图片一
    public Sprite back;//显示菜单按钮图片二
    Button btn;
    bool isshow = false;

    void Start()
    {
        caidan.SetActive(isshow);
        btn = btnObj.GetComponent<Button>();
        btn.onClick.AddListener(delegate ()
        {
            isshow = !isshow;
            caidan.SetActive(isshow);
            if (isshow)
            {
                btn.GetComponent<Image>().sprite = expan;
            }
            else
            {
                btn.GetComponent<Image>().sprite = back;
            }
        });
    }
}

将脚本挂载在bgroup上即可。