【NGUI】各个组件的应用与数值获取

NGUI是做UI的，自然不能不谈各种UI组件。常见的NGUI的组件有按钮button、输入框InputField、复选框Checkbox、下拉列表PopList、滑块Slider，当然还有在《【NGUI】标签页》（点击打开链接）提及过的单选框Toggle。HTML仅有<input><checkbox><select><radiobutton><button>都能做一大堆事情，我相信NGUI这些控件灵活运用的话足矣让你布置游戏的UI。本文将举一个例子介绍这些NGUI控件的使用，同时说明它们的数值如何用获取。

其实也是《【Unity3D】场景切换、UGUI组件事件、开始游戏与关闭游戏》（点击打开链接）的姊妹篇，将里面的内容再做一次。

当然制作过程，毕竟NGUI是专门做UI的，方便不少，而且界面比原生的UGUI好看。具体制作过程如下：

一、场景布置

1、首先和《【NGUI】Helloworld》（点击打开链接）一样导入NGUI，布置一个2D UI隐藏照相机。之后，我们可以在Asset直接搜索Control，你会发现NGUI已经提供好一大堆准备好的控件预设了。如图所示，拖入InputField、Checkbox、PopupList、Slider和Button，同时创建4个Label。你会发现比起《【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList》（点击打开链接）好多了，不至于弄个下拉列表都弄这么久，还是提高了不少的编程效率。

对于每个控件修改旗下Label字体的时候注意，由于NGUI对于中文支持实在是烂，因此你需要改回Arial才能输入中文。

而对于下拉列表，你需要修改的地方有三处，而不仅仅是Label，否则下拉选项也是没法显示中文的。除了PopupList旗下的Symbol和Label，还有自身的字体修改，如图所示。

2、上述所有组件摆放好，设置好之后，我们在于这些东西之上弄一个Sprite，然后放一个Label并且再拖一个Button，做获取信息的弹出消息框，如下图所示。并理清各个组件的Depth，Depth其实就是和网页中Z-index的一个意思，设置哪个东西在上头。

弄好之后可以先将这个Sprite点击如图的勾隐藏，以便进行和后续的工作，和Photoshop隐藏图层是一个意思~

3、大家可以注意到NGUI的按钮不像原生的UGUI自带点击事件的，你翻遍右侧的属性列表都没找到Onclick事件，我们需要自己添加。具体是给三个按钮添加Event Listener组件。没错，你没看错，就是三个，因为NGUI的Checkbox的本质是一个Button，你在脚本翻遍都没有这个类的。

二、脚本编写

之后你就可以新建一个空物体GameObject，赋予以下脚本GetValue.cs。

using UnityEngine;using System.Collections;public class GetValue : MonoBehaviour{    public GameObject checkbox;//复选框    public UIInput input_field;//输入框    public UIPopupList poplist;//下拉列表    public UISlider slider;//滑块    public GameObject button;//确认按钮     public GameObject Sprite;//弹出框    public UILabel label;//弹出框上面的文字    public GameObject close_button;//关闭按钮    private bool checkbox_oncheck;//用于记录复选框的状态    void Awake()    {        //设置按钮的监听，指向本类的ButtonClick、CheckBoxClick、CloseButtonClick方法中。        //同时可以写成：UIEventListener.Get(button).onClick += ButtonClick        UIEventListener.Get(button).onClick = ButtonClick;        UIEventListener.Get(checkbox).onClick = CheckBoxClick;        UIEventListener.Get(close_button).onClick = CloseButtonClick;        checkbox_oncheck = true;//在场景开始的时候，复选框是默认被选中的        Sprite.SetActive(false);//弹出框是隐藏的    }    /*按钮的点击事件*/    void ButtonClick(GameObject button)    {        //除了复选框，各个组件的值，可以用.value获取        //除了UILabel，其余UI类用.text获取值已经在NGUIv3.9过时，需要用到.value获取这个值        label.text = "姓名：" + input_field.value + ",\n" +          "SB与否：" + checkbox_oncheck + ",\n" +         "特征：" + poplist.value + ",\n" +         "心情指数：" + slider.value + "。\n";        Sprite.SetActive(true);//显示弹出框    }    /*复选框的点击事件*/    void CheckBoxClick(GameObject button)    {        checkbox_oncheck = !checkbox_oncheck;//复选框被点击一次则改变一次复选框的状态    }    /*关闭按钮的点击事件*/    void CloseButtonClick(GameObject button)    {        Sprite.SetActive(false);//隐藏弹出框         }}

将脚本赋予给空物体GameObject之后，做一个连线题，直接将控件拖到相应的位置，指明脚本的参数都是指代什么。如图。这样就省去我们用GameObject.Find("xx");，并且提高了程序的效率，无须在场景找控件了。

至此整个工程完毕。

可以看到NGUI对组件的脚本编写和原生的UGUI大有不同，当然你也用UGUI的方法，强行获取这些控件里面的值，但这样做并不明智。现在NGUI通过Event Listen将按钮的点击弄到同一个脚本中管理，这是NGUI的思维，而不是像UGUI在控件的属性面板指明是哪个脚本中的什么方法。

而大家也看到了，常用的组件输入框InputField、下拉列表PopList、滑块Slider都有相应的类UIInput、UIPopList、UISlider，直接通过.value则可以获取到相应的值。同样UI组件基本上有相应的类对应，防止了组件皆用GameObject表示，更加清晰吧。

不过怎么样都好，关键是你完成任务，个人感觉，NGUI和原生的UGUI是两个不同的做UI思维，但都不难。