【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList

我本以为UGUI至少是C#控件有的控件它就有,其实上这货所提供的组件少的可怜,如图所示,但是没有枪没有炮我们自己造。比如一个简单的下拉列表DrowDownList,这货到处都有,连那最SB的HTML都有select标签啊!亲!就你UGUI没有!

【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList_第1张图片
而且网上还以讹传讹,一堆不知道什么版本的原生UGUI的DrowDownList版本都来了,其实完成这东西非常简单,只是要费点功夫而已。最终效果如下图所示:

【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList_第2张图片

具体制作步骤如下,注:由于本人的渣英文,本文截图中的DropDownList被笔误写成了DrowDownList,文章叙述和脚本中的DropDownList才是正确的:

一、场景布置

1、先像《【Unity3D】UGUI自适应屏幕与锚点》(点击打开链接)布置一个自适应的画布Canvas。然后,在里面画一个UI->Panel,不是那个3D物体,是UI独有的Panel注意了!这是你以后弄出来的下拉列表DropDownList的大小。通过矩形工具调整大小和位置,并且将颜色设置为全透明。并且将这个Panel直接命名为DropDownList。

【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList_第3张图片
2、之后在这个DropDownList中放第一个Button,命名为Button0,调整好大小和位置与旗下Text的文字、字号等,如图所示。

【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList_第4张图片

3、之后再于Button0下方拉一个Panel,同样设置为全透明,命名为Candidate,意为候选的意思。如图所示。

【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList_第5张图片

4、在Candidate填充按钮,Button1-ButtonN,设置好字体大小等,你甚至还可以直接复制Button0拖到Candidate旗下,其中Button1的文字内容应该与Button0等同。同时调整DropDownList和Panel至适合的大小,调整DropDownList和Panel的时候,可能会导致Button的位置与形变,先将各个旗下Button的移出,移到Canvas,再进行调整就没事了,调好了,再将Button拉回来。最终的效果如图所示。

【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList_第6张图片

5、再于DropDownList放个Text或者Image在Button0之下,如同一朵美好的小花,表示这是一个下拉列表DropDownList,如图所示。这里的︾直接可以通过拼音输入法v6打出来。当然真正弄到正式游戏,自然是美工MM弄的好看的UI图片^_^。反正美工MM什么的,我是没有的……

【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList_第7张图片

二、脚本编写

至此,整个下拉列表DropDownList的布置完毕,我们还需要写那么一点点的脚本使其真正投入使用。DropDownList.cs如下所示:

using UnityEngine;
using UnityEngine.UI;//要控制Button旗下的文本Text,因此需要这个头文件!
using System.Collections;

public class DropDownList : MonoBehaviour
{

    private GameObject Candidate;

    void Start()//上来先将候选项隐藏
    {
        Candidate = GameObject.Find("Canvas/DropDownList/Candidate");
        Candidate.SetActive(false);
    }

    //给予默认按钮Button0的点击事件
    public void Button0_OnClick()
    {
        Candidate.SetActive(!Candidate.activeSelf);//如果候选项是隐藏的,就弄到显示
    }

    //给予其它按钮的点击事件
    public void Candidate_OnClick(string button_name)//点击按钮的名称将被传入
    {
        //将被默认按钮Button0的文本替换成用户点击的按钮
        GameObject.Find("Canvas/DropDownList/Button0/Text").GetComponent().text =
            GameObject.Find("Canvas/DropDownList/Candidate/" + button_name + "/Text").GetComponent().text;
        Candidate.SetActive(false);//隐藏候选项
    }

}

这段脚本直接送给DropDownList,而各个候选按钮Button1~ButtonN参数设置为自己的名字如同《【Unity3D】场景切换、UGUI组件事件、开始游戏与关闭游戏》(点击打开链接)赋予点击事件,Button0的点击如上所示,赋予Button0_OnClick()事件。

【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList_第8张图片

你可能感兴趣的:(Unity3D)